Support » Theme: Pinnacle » Deliver the correct size for image gallery

  • Resolved hugodebe

    (@hugodebe)


    Hi, I’m trying to optimize the page load of my articles, as they all have image galleries of more than 20-30 pics. I use the default gallery parameters (3 columns and thumbnail size).

    I edited the responsive column layout, to never show a thumbnail size over 230px.
    In WordPress Settings > Media I set a Thumbnail size of 230 x 230px.

    The image resolution delivered is always 400×400. How to edit it to 230px?

    This is how the image is defined:

    <div class="tcol-lg-4 tcol-md-4 tcol-sm-4 tcol-xs-6 tcol-ss-12 g_item">
    <div class="grid_item kad_gallery_fade_in gallery_item">
    <a href="http://example.com/wp-content/uploads/2016/10/image.jpg" data-rel="lightbox" class="lightboxhover">
    <img src="http://example.com/wp-content/uploads/2016/10/image-400x400.jpg" alt="" srcset="http://example.com/wp-content/uploads//2016/10/image-230x230.jpg 230w, http://example.com/wp-content/uploads//2016/10/image60x60.jpg 60w, http://example.com/wp-content/uploads//2016/10/image-400x400.jpg 400w" sizes="(max-width: 400px) 100vw, 400px" class="light-dropshaddow" height="400" width="400">
    </a>
    </div>
    </div>

    Thanks in advance

Viewing 5 replies - 1 through 5 (of 5 total)
  • 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://wordpress.org/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="
            http://example.com/wp-content/uploads/2016/10/image-400x400.jpg" 
       srcset="
               http://example.com/wp-content/uploads/2016/10/image-230x230.jpg 230w, 
               http://example.com/wp-content/uploads/2016/10/image-60x60.jpg 60w, 
               http://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="http://example.com/wp-content/uploads/2016/10/image-230x230.jpg"
         srcset="
                 http://example.com/wp-content/uploads/2016/10/image-230x230.jpg 230w, 
                 http://example.com/wp-content/uploads/2016/10/image-60x60.jpg 60w, 
                 http://example.com/wp-content/uploads/2016/10/image-230x230@2x.jpg 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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Deliver the correct size for image gallery’ is closed to new replies.