How can I customise Jetpack Tiled Image Gallery?

  • I’m looking for some advice about customising the Jetpack Tiled Image Gallery.

    I am working with the TwentyThirteen theme.

    On my main website I want to create a gallery of images with links to blog entries on several other of my websites. I’m able to achieve this with the WP Gallery Custom Links plug-in. I’m happy with that. However I have two irritations which I think are all down to Jetpack not WP Gallery Custom Links.

    #1 All the tiled galleries float left unless I add the following code to style.css:

    .tiled-gallery {
max-width: 600px;
margin: auto !important;
}

    That centres the galleries, but it limits them to 600px in width. I’ve tried other widths and replacing the max-width with auto, but this is the only code that works.

    Note that the thumbnail grid (i.e. the native WP gallery that is not a Jetpack addition) is not a problem in this respect. The thumbnail grid centres beautifully, but ONLY if I use 3 columns. If I use 4 or more, it breaks and also floats left.

    Ideally I’d like to use a Jetpack tiled gallery and have it centred and utilising the whole width of the page. Any suggestions?

    #2 I would like to have a caption or tooltip appear for each image of the gallery. At present a few words of the caption appear, but not a whole sentence.

    If I test TwentySixteen in Live Preview, the native thumbnail grid includes the captions nicely under each image of the grid – but not in TwentyThirteen which is the theme I want to use. And TwentySixteen has no effect on the Jetpack galleries. So…

    How do I add a tooltip or control the size of the font in the caption on Jetpack Tiled Gallery images?

    Any advice very welcome.

    (Though please bear in mind that I am no programmer, even if I’ve been stumbling through WordPress code for several years now.)

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi !

    As explained here:

    Tiled Galleries are built to fill your theme’s content width. You can define a specific $content_width value by adding the following code to your theme’s functions.php file:

    if ( ! isset( $content_width ) ) {
    $content_width = 800;
}

    If you have something new to overwrite Jetpack CSS, I’d be interested ! ??

    Thread Starter TheSupercargo

    (@thesupercargo)

    Thanks @ygirod.

    The problem with that code is it doesn’t centre the galleries on the page. It floats it them left regardless of how wide or narrow I set the content width.

    Possibly I need to set the content width somewhere else as well.

    I still don’t know why the code I gave in my original post works, but it might have to do with TwentyThirteen’s out-of-the-box content width (604px). I really thought I’d managed to override that, but perhaps not all the time.

    I’ll take another look at this over the weekend. Maybe come back with some links to illustrate my problem.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How can I customise Jetpack Tiled Image Gallery?’ is closed to new replies.