Smaller Thumbnails
This topic contains 5 replies, has 3 voices, and was last updated by Michael 7 years, 10 months ago.
We have moved to a support ticketing system and our forums are now closed.
Open Support TicketTagged: File Size, site speed, thumbnail
-
AuthorPosts
-
December 18, 2016 at 11:05 am #326441
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 #327137Hi,
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 #327437Deferred 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 #327457I 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 #328276Hi 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 #328369It’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.
-
AuthorPosts
We have moved to a support ticketing system and our forums are now closed.
Open Support Ticket