Hi guys, hope you’re all well.
Have finally finished our first site using tagDiv composer and absolutely loving it. My only major problem at the moment relates to image thumbnail sizes when using Flex Block 1 – which we are using heavily because it’s so flexible.
This is our site: https://www.thecarexpert.co.uk/
Problem appears to be that the page is pulling and cropping the full-size images (usually 1200x800px or 1400x700px) for the thumbnails, rather than using the versions selected (696x0px).
As a result, images are taking up far too much size and time in page loading, according to this test I’ve run several times.
https://pageweight.imgix.com/jobs/a48a70f0-ff69-4dc1-a9cc-f6253a6cb7b4/
Any ideas on how I can fix this?
And secondly, assuming I can get this working, can you consider smaller thumbnail sizes for these blocks for a future update? Some of our thumbnails are very small, especially on mobiles, so we’d like to serve the smallest images possible (<200px wide).
Hi,
I checked a few of the flex modules in your website, seems that indeed the full images or some unusual sizes are used instead of selected thumbnails. For example this module
– https://www.screencast.com/t/lyt91bTX6z2
It uses a thumbnail size it seems of 1395x741px – https://www.thecarexpert.co.uk/wp-content/uploads/2014/07/car-finance-voluntary-termination-pcp-hp-agreement-e1476792854766-1392×741.jpg
That is not a theme created thumbnail and also not the full size of the image, quite unusual. The same image seems to have a 696px size created which should be used if selected
– https://www.thecarexpert.co.uk/wp-content/uploads/2014/07/car-finance-voluntary-termination-pcp-hp-agreement-e1476792854766-696×370.jpg
I made few tests, selecting different sizes for the image in the block
– https://www.screencast.com/t/ixvHrwCHL
– https://www.screencast.com/t/GiFKbq3bu
They are loading correctly from what I can see. The sizes you select should be used. The smallest at the moment is the 324x400px size.
Do you maybe use any image optimization plugins or image delivery services? Worth testing without them if you do. Or investigate all plugins at once. Deactivate them all as a quick test (except theme plugins), check if this has any effect.
Also create a new test page and use a flex block, select the image size, see if the same thing happens there. Let me know what you find.
Thanks
Hi Simion,
Thanks for your reply. I think we are getting somewhere.
The image width you mentioned of 1392px is double 696px, so presumably it’s pulling the retina version of the 696px thumbnails.
We use the Imagify image optimisation plugin, as owned/recommended by WP Rocket. It optimises for all thumbnail sizes used by the theme. I disabled the plugin then built a new page and created eight new posts to test, so it wouldn’t pull any old images. Link here, with one flex block to pull 696px images and one set for 324x400px images:
https://www.thecarexpert.co.uk/image-compression-testing/
Made no difference, was still pulling the 1392px and 648px (retina) images. Disabled all my other plugins apart from tagDiv ones and core plugins like bbPress, still no difference.
Went to the theme panel and deselected all the retina versions of the thumbnails, and presto! It now pulls the 696px and 324px images instead of the 1392px and 648px versions.
So it appears that the tagDiv theme panel settings are causing the flex block to pull the retina images rather than the originals, rather than a plugin.
From what I can see the 696px size is used at the moment for the first block
– https://www.screencast.com/t/LNT8dO7ONLkE
Also the smaller one here, for the second – https://www.screencast.com/t/jqSAvzhhu
What you did seems to have worked.
Yes, that seems to have done the trick across all of our existing content as well, so hopefully that will help reduce load times.
The problem with this is that we’ve had to disable our retina images, which is not ideal for viewers with retina screens. Is this something that can be fixed for a future update?
It would also be really helpful to be able to use smaller image sizes than 696px as well. As you can see on our site, all of our thumbnails are in a 2:1 or 3:2 format, so the 324x400px option doesn’t work for us at all. A lot of our thumbnail sizes are quite small, so it would be better to be able to have something like a 300x200px or 200x100px resolution as it would make the thumbnail file sizes much smaller.
Can you please pass this on to the dev team to add to their list of future feature requests?
Many thanks.
It’s the same for me, if the retina thumbnails are enabled they will be displayed in the flex block modules.
I will add this on our list and it will be looked over as soon as possible. The flex blocks will receive more options over future updates, maybe even the capability to choose from all the thumbnails the theme creates.
Sorry for this inconvenience, a solution will be found in these matters.
Thanks for your help Simion. Overall, we’re really happy with the theme and the work all you guys have done. The level of customisation we have been able to create right out of the box is brilliant, so it’s really just tweaking some details.
Cheers,
stuart
