Smaller Thumbnails

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Tagged: File Size, site speed, thumbnail

Author

Posts
December 18, 2016 at 11:05 am #326441

Michael
Buyer

Post count: 16

For my site, I use a full screen parallax image for each listing, so the images can get quite large. I have the max-width set to 1600px on upload. The problem this is causing, is that these huge images are being loaded as thumbnails but just scaled down for ‘related posts’, ‘search results’, etc. This is causing speed issues obviously as instead of loading one picture that is around 100-200k, each page has to load 6-8 of these photos. Whenever I upload a photo to one of my listings, there is a smaller version hard-cropped at 480×320 that is also created. What I would like GD to do is instead of loading the full size image “original-image.jpg” in these smaller thumbnail areas, ideally, it would load “original-image-480×320.jpg”. I imagine all it would take is locating the function where the featured image is loaded and adding “-480×320” before the final “.” in the url, however, I’m not much of a coder. Thanks for any help you can offer.

December 19, 2016 at 4:29 pm #327137

Paolo
Site Admin

Post count: 31206

Hi,

lazy load should defer loading of any image in listings pages.

I asked to the developers if they have anything to add to this.

they’ll let us know asap.

Thanks

December 20, 2016 at 3:26 am #327437

Michael
Buyer

Post count: 16

Deferred loading or not, it would be nice to not have to load the full size image when a smaller thumbnail version would be sufficient. Thanks

December 20, 2016 at 5:12 am #327457
Michael
Buyer

Post count: 16
I went ahead and found the code to make this work. For future reference I’ll link it here. The function is in post_functions.php starting on line 1550. My custom code starts on line 1600
```
            // Custom Thumbnail Size Here //
            $t_image = $image->src;
	    $t_image = substr( $t_image, 0, -4 );
	    // This should be the hardcropped extension to add to the end of image. //
	    $t_image .= '-480x320.jpg';

            if (!is_wp_error($max_size)) {
                if ($image->width) {
                    if ($image->height >= $image->width) {
                        $width_per = round(((($image->width * ($max_size->h / $image->height)) / $max_size->w) * 100), 2);
                    } else if ($image->width < ($max_size->h)) {
                        $width_per = round((($image->width / $max_size->w) * 100), 2);
                    } else
                        $width_per = 100;
                }

		// All instances of $image->src have been changed to modified $t_image //
                if (is_admin() && !isset($_REQUEST['geodir_ajax'])){
                    $html = '<div class="geodir_thumbnail"><img style="max-height:' . $max_size->h . 'px;" alt="place image" src="' . $t_image . '"  /></div>';
                } else {
                    if($size=='widget-thumb' || !get_option('geodir_lazy_load',1)){
                        $html = '<div class="geodir_thumbnail" style="background-image:url('' . $t_image . '');"></div>';
                    }else{
                        //$html = '<div class="geodir_thumbnail" style="background-image:url('' . $image->src . '');"></div>';
                        //$html = '<div data-src="'.$image->src.'" class="geodir_thumbnail" ></div>';
                        $html = '<div data-src="'.str_replace(' ','%20',$t_image).'" class="geodir_thumbnail geodir_lazy_load_thumbnail" ></div>';

                    }

                }
            }
```
December 21, 2016 at 12:34 pm #328276

Stiofan O’Connor
Site Admin

Post count: 22956

Hi Michael,

I don’t think your solution is best but i will be taking a look at it in future.

Thanks,

Stiofan

December 21, 2016 at 2:37 pm #328369

Michael
Buyer

Post count: 16

It’s probably not best, but it works for 99% of what I need. Unfortunately, any of the photos that aren’t set as featured images don’t have the smaller thumbnail version automatically created, so those all need to be manually uploaded.
Author

Posts