[Jetpack Tiled Galleries] content width 100%

  • Hi,

    I’m trying to work out a way to be able to display a tiled gallery in 100% of the page width. I thought I found a working solution in setting a very high (4000px) custom tiled gallery width: 

    function jeherve_custom_tiled_gallery_width() {
    return '4000';
}
add_filter( 'tiled_gallery_content_width', 'jeherve_custom_tiled_gallery_width' );

    However, this prevented my page from loading the images responsively and really slowed it down. Is there a better way of doing this?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    I’d recommend setting a content width value that matches your theme’s content area. Once you’ve done so, you can make sure the gallery remains responsive by adding CSS to limit the width of the content area.

    I hope this helps.

    Thread Starter tor2dbear

    (@tor2dbear)

    Thank you for your reply.

    I’m a bit confused with the relationship between responsive images in WP 4.4 and content width. I have modified the illustratr theme so that the theme content area is 100% of the view ports width as well as changed the content_width to 2000px which works well enough. The images are displayed at 100% of the view port, though never in a resolution above 2000px (not optimal but good enough).

    I haven’t, however, been able to make the tiled gallery “stretch” in the same way to fill the view port when greater than the content_width. Is this possible to achieve with CSS?

    • This reply was modified 8 years, 1 month ago by tor2dbear.
    Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    Jetpack’s Tiled Galleries (and all other embeds on your site, whether they’re handled by Jetpack or by WordPress core itself) will never stretch to a width greater than the content_width value. You could use CSS to upscale the gallery and its images, but you would end up with blurry images, so I would recommend against it.

    I’m afraid there really isn’t a good work-around here, as content_width was designed that way; your embeds are not supposed to be larger than your theme’s content width.

    Thread Starter tor2dbear

    (@tor2dbear)

    Okay, I understand. So the best solution for me would be to use a content_width of perhaps 4000px which would be pretty much the greatest resolution usel today? I guess this is of topic, but doing so somehow makes WP load a large version of all my images no matter what the size of the view port. Any idea what could cause this?

    • This reply was modified 8 years, 1 month ago by tor2dbear.
    Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    Using a large content_width can indeed be a good work-around.

    doing so somehow makes WP load a large version of all my images no matter what the size of the view port.

    WordPress should also add srcset attributes to your images, thus allowing the use of smaller devices on smaller viewports. This will only work if you use a recent version of WordPress though (4.4+).

    Perhaps related to what is being discussed here – if not, I will post this question somewhere else:

    I have set a high value for content_width (2000px).
    Tiled gallery is inside a container-div which has a width of 720px.

    Through custom JS I resize div.tiled-gallery to the width given in the data-original-width-attribute (as long as this is lower than browser-width). This works fine and imgs are displayed nicely on load.

    On resize, however, although div.tiled-gallery still gets the right size, the imgs inside it are calculated to fit the parent div (i.e. 720px).

    Where do I need to change what, so that img sizes are calculated from div.tiled-gallery downwards, and not, as it seems to be now, from the outer most div?

    Thanks,
    Michael

    Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    @mkalina This is a bit different from what’s discussed above as it seems you’ve got a very specific custom setup.

    Image sizes are calculated within Jetpack, for each row and for each image, depending on the gallery type. Here is an example:
    https://github.com/Automattic/jetpack/blob/4.6/modules/tiled-gallery/tiled-gallery/tiled-gallery-rectangular.php#L132-L167

    I’m afraid there isn’t an easy way to customize the value from outside Jetpack, short of doing it through custom JS like you did so far.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Jetpack Tiled Galleries] content width 100%’ is closed to new replies.