Deliver the correct size for image gallery

Hello Hugo,

After changing thumbnail sizes, you need to use a plugin to regenerate them on your site. Try installing this plugin and let me know if your image sizes are reflected once you get it setup.

https://www.ads-software.com/plugins/regenerate-thumbnails/

-Kevin

Hello Kevin, thanks for the plugin! It took few hours as the website has more than 3000 images. All the images have now a 230×230 thumbnail, but the browser continue choosing the 400×400 option.

The code is the same :

<img class="light-dropshaddow"  alt="" 
   src="
        https://example.com/wp-content/uploads/2016/10/image-400x400.jpg" 
   srcset="
           https://example.com/wp-content/uploads/2016/10/image-230x230.jpg 230w, 
           https://example.com/wp-content/uploads/2016/10/image-60x60.jpg 60w, 
           https://example.com/wp-content/uploads/2016/10/image-400x400.jpg 400w" 
   sizes="(max-width: 400px) 100vw, 400px" 
   height="400" 
   width="400"
>

I had some readings about responsive images in wp, but I’m not sure how to modify the src and sizes attributes to 230px instead of 400px.

1/ Is the 400px parameter set by the theme and can I edit the template in my child theme?

2/ Do I need a filter to redefine the src and sizes attributes?

3/ To go further, is it recommended to unset the 400×400 thumbnails and bulk delete them to save space?

Thanks in advance for any help

I’m working around something like this to override the sizes attribute:

function my_attachment_image_attributes( $attr, $attachment, $size ) {
    if ( $size === 'thumbnail' ) {
        $attr['sizes'] = '(max-width: 230px) 100vw, 230px';
    }
    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'my_attachment_image_attributes', 10, 3 );

Without success for now…

Hey,
With the theme gallery turned on it sets the size based on how many columns you have set in your gallery. That way the images fill the space and are clear then viewing because wordpress defaults to thumbnail and that wouldn’t look good for most who have there thumbnail set at 150. If you wanting to use your own settings then you would just turn off the theme gallery in your theme options > misc settings.

I hope that helps,

Ben

Hi Ben, If I disable the theme gallery, the lightbox is disabled as well.

As I want to keep the theme lightbox, I made a custom version of the Toolkit Plugin where I replaced “400” by “230” (gallery.php line 152). I’m sure you don’t recommend to do so, but I now have what I wanted.

<img class="light-dropshaddow" 
     title="..." 
     alt="..."
     height="230" width="230"
     sizes="(max-width: 230px) 100vw, 230px" >
     src="https://example.com/wp-content/uploads/2016/10/image-230x230.jpg"
     srcset="
             https://example.com/wp-content/uploads/2016/10/image-230x230.jpg 230w, 
             https://example.com/wp-content/uploads/2016/10/image-60x60.jpg 60w, 
             https://example.com/wp-content/uploads/2016/10/[email protected] 460w" >

Both the 400×400 and 400×400@2x image sizes are not anymore generated when uploading. The 230×230@2x size images are automatically created for all my old images. It sounds perfect!

I will have a deeper look to bulk delete the old 400×400 thumbnails, to save space.

Many thanks Kadence for the support.