-
Posts
-
I need some help please to tweak a function you supplied to me in this thread last year.
The function removes 495px wide images from srcset: these images were originally created on upload but then deleted as they were no longer used anywhere but unfortunately were still included in srcset definitions and didn’t display.
function avf_remove_specific_image_size_from_srcset( $sources, $size_array, $image_src, $image_meta, $attachment_id ) { if ( isset( $sources[495] ) ) { unset( $sources[495] );} return $sources; } add_filter( 'wp_calculate_image_srcset', 'avf_remove_specific_image_size_from_srcset', 10, 5 );The image URL in srcset was …image-name-495×279.jpg, …image-name-495×335.jpg etc i.e. landscape images.
I have now discovered a problem that portrait images that were uploaded as 400px tall but then also deleted are referenced in srcset and not being displayed, e.g. …image-name-170×400.gif and …image-name-268×400.gif as two examples.
The above filter appears to work just on the first part of the image size URL specified in srcset, i.e. if I change 495 to 170 then the deleted 170×400.gif reference gets removed from srcset. I’ve tried $sources[x400] but that just crashes the site… :-)
Is there a function/filter, or modification to the above, that can remove all the 400px tall portrait references as well as 495px wide?
Did you try to disable temporarly on performance the option : Responsive Images
then refresh all cachings and reenable the option again.
Maybe that will do the job.Next: have you regenerated the thumbnails – best is Force Regenerate Thumbnails plugin for that
@Guenni007 – refresh and re-enable didn’t work.
If I regenerate the thumbnails will that force a code change to all the srcset definitions? That’s what I need, something to force the HTML on each page to “regenerate” and only pick up the image sizes that now remain in the Media Library, removing all the references to the deleted sizes. I don’t understand why Updating a page doesn’t force such a reset/regeneration.
a function like this to remove the image-sizes enfold likes to have:
function remove_enfold_image_sizes() { // do NOT remove widget size, is used in backend portfolio items! // remove_image_size('widget'); remove_image_size('square'); remove_image_size('featured'); remove_image_size('featured_large'); remove_image_size('portfolio'); remove_image_size('portfolio_small'); remove_image_size('gallery'); remove_image_size('magazine'); remove_image_size('masonry'); remove_image_size('entry_without_sidebar'); remove_image_size('entry_with_sidebar'); remove_image_size('shop_thumbnail'); remove_image_size('shop_catalog'); remove_image_size('shop_single'); remove_image_size('shop_gallery_thumbnail'); } add_action('init', 'remove_enfold_image_sizes');i guess does only influence the calculation of newly uploaded images.
The former uploads are not influenced on that. So these sizes are still in your uploads folder. (have a look by ftp inspection if this is the fact)
the use of Force Regenerate Thumbnails – removes those already calculated image-sizes that are not registered.Hi,
Thank you for the inquiry.
We may need to view the site again to properly check the issue. Please create a test page and provide the URL in the private field.
Best regards,
Ismael@Guenni007 – thanks but have a function to remove the image sizes I don’t use. I implemented it when I found out a few months after using Enfold for the first time (years ago…) about the huge number of image sizes it creates, most of which are never used. That is the ultimate cause of my problem here – I’d uploaded images and created pages then discovered I was almost out of disk space, so deleted all sizes I never use. But by then the deleted image sizes had been inserted into srcset, some don’t display as I’ve deleted them, and there is no (apparent) way to change the srcset HTML after it has first been created.
@Ismael:
On this page the images “Museum Leaflet” and “Domino by Pat Thomas” are inserted on the page as 64x150px and 90x150px size images. They display correctly as that size in desktop mode. Original image upload sizes were 339x800px and 299x500px.In Dev Tools, switch to Responsive (or view on a smartphone) and the images no longer display because I have deleted the …x400px sizes.
Dev Tools Console reports:
greenville/:67 GET https://www.americanroadtrips.net/wp-content/uploads/2014/05/highway-61-blues-museum-leaflet-170×400.gif 404 (Not Found)
greenville/:67 GET https://www.americanroadtrips.net/wp-content/uploads/2014/05/domino-by-pat-thomas-239×400.gif 404 (Not Found)Let’s focus on the Leaflet image.
The first question is why is the responsive page even trying to load the 170×400.gif image – this is surely way too big for a smartphone screen and to me the specified 64x150px size should still be loaded. That aside, how to remove the x400 image from srcset?
Second, these are the files in Media Library.
highway-61-blues-museum-leaflet-127×300.gif
highway-61-blues-museum-leaflet-222×525.gif
highway-61-blues-museum-leaflet-34×80.gif
highway-61-blues-museum-leaflet-64×150.gif
highway-61-blues-museum-leaflet-76×180.gif
highway-61-blues-museum-leaflet.gifIf you look at srcset for the leaflet, you will notice that highway-61-blues-museum-leaflet-76×180.gif is not listed within. Not that I’d want that size displayed either, but surely it should be included? Is this an error?
Hi,
Thank you for the info.
The leaflet image is not displaying, even on desktop view. There’s not much difference in file size or page loading impact between the 170×400px and 64×150px thumbnails, so I wouldn’t worry about that. Which thumbnails have you removed so far?
function avf_wp_calculate_image_srcset_mod( $sources ) { foreach ( $sources as $width => $image ) { if ( $width == 170 || $width == 400 ) { unset( $sources[$width] ); } } return $sources; } add_filter( 'wp_calculate_image_srcset', 'avf_wp_calculate_image_srcset_mod' );Also, why are you using gif as the image format? for non-animated images, it’s better to use jpg, png or webp.
Best regards,
Ismaelre. gif format – the images are quite old and I must have mistakenly created them as that rather than jpg; there are only 22 gifs out of over 4000 images on the site, I might get around to changing them.
Thank you for the function but it is the 400px height of the deleted portrait images that I need to target and remove from srcset. Changing $width to $height doesn’t work. $width == 170 does, but I don’t know the widths of all the 400px tall images that I deleted because…
When portrait format images were uploaded originally, Enfold portfolio size image (495x400px) was enabled. The upload process used the Max Height of 400px to create the new portfolio size, so the width was smaller and varied – the leaflet is 170 wide, the domino 239px. The other deleted 400px images would have had multiple widths as the portrait images were all different sizes and aspect ratios. I also know that I’ve got some uploaded images with an original width of 400px so just targeting “400” in srcset isn’t an option, I need to target 400px as image height please.
Hi,
When portrait format images were uploaded originally, Enfold portfolio size image (495x400px) was enabled.
You may need to regenerate the thumbnails to delete the disabled thumbnails. Have you tried any of these plugins?
— https://wordpress.org/plugins/regenerate-thumbnails/
— https://wordpress.org/plugins/regenerate-thumbnails-advanced/Make sure to create a site back up before using the plugins.
I also know that I’ve got some uploaded images with an original width of 400px so just targeting “400” in srcset isn’t an option,
Unfortunately, this is not possible without manually targeting each image. You may need to keep the thumbnails with a 400px height. As mentioned above, the file size difference between these thumbnails is very negligible, so it won’t really make much difference whether they are enabled or disabled.
Best regards,
Ismael
- You must be logged in to reply to this topic.