0

The project I'm working on, I couldn't find an easy way to have WordPress create the thumbnails sizes I needed without tons of waste, nor to simultaneously generate WebP versions, so I disabled the thumbnails, I upload a full-size jpg or png, and then I manually generate my WebP and other sizes and copy them to the uploads. A custom PHP function handles building responsive <picture>.

However, I'd like to avoid the media library loading up the full-size image as the thumbnail all the time, as it's a waste of bandwidth. I'd like to point to a small WebP or JPG version that is not in the library but in the uploads folder and have it load that image instead. The file name is almost the same, just needs to be appended with _width (width being a number) which I could do with strtr or something.

Is there a way to access the Media Library File column with a function and a hook/filter so I can change the src path to the thumbnail image? I'd also need to avoid PDF, SVG and TXT file uploads and just target JPG or PNG files. If it's not possible, I'll have to generate a thumbnail with a custom size.

enter image description here

10
  • WP 5.8 can create webp images automatically if the server has support. Otherwise, it's not clear what you mean by file column, can you describe it using other words or a screenshot? Are you talking about the custom table view? Or the panel on the right when selecting an image? Or something else?
    – Tom J Nowell
    Oct 7, 2021 at 23:56
  • Also, have you asked how to dynamically generate images to avoid the waste you didn't want? This sounds more like a fix for a fix rather than a fix for a problem
    – Tom J Nowell
    Oct 7, 2021 at 23:57
  • I couldn't find anything about dynamically creating all file formats necessary. WordPress seems to default to using whatever type you feed it (give it WebP, you only get WebP, etc.) I built Photoshop actions and have a file renamer, so it's actually not much of a chore, time is limited and couldn't spend more time digging or posting for solution. As for "File Column," thumbnails are displayed in the File column in the Media Library. I want to modify the wp_get_attachment_image src for the thumbnails. wp_enqueue_media might be the way, but not sure how to go about it. I'll add a screenshot.
    – liquidRock
    Oct 8, 2021 at 0:15
  • Also, as I said, WordPress makes thumbnails for everything, even if you don't need the sizes for all images in your design. I scoured this site and others and even posted here (or SO) about how to specifically make WordPress use the image_sizes I wanted based on a file prefix, but no one responded. As it is, I already have 2,000 images do to responsive and the site isn't live, and I couldn't keep waiting without a reply, so this is the route I took. Everything works great and I use a plugin to organize uploads into directories. Just need to modify the admin thumbnail src somehow.
    – liquidRock
    Oct 8, 2021 at 0:22
  • And one last note, having WordPress dynamically generate WebP might not be ideal. I have to finesse quality in Photoshop sometimes and I made variants of my actions because sometimes the image quality will fall apart unless you bump up the WebP quality by a few percent, while other images hold up fine. Having one quality setting for everything wouldn't work well for this project.
    – liquidRock
    Oct 8, 2021 at 0:24

1 Answer 1

1

I managed to solve this after being pointed in the right direction. In my case, I filtered wp_get_attachment_image_attributes to change all the paths in the admin for attachments at once.

In my case, I am using descriptive suffixes on all my image files (i.e. _featured etc) so modifying them was easy using strtr which I also used to change the extension from jpg to webp.

Now all attachment image previews load in the files I want in the correct format at the desired size, and it works for Media Library, featured images, and custom fields.

add_filter( 'wp_get_attachment_image_attributes', 'my_attachment_filter', 10, 3 );
function my_attachment_filter($attr, $attachment, $size){
    if (is_admin()){
        if (array_key_exists( 'src' , $attr)){
            $old_src = $attr['src'];
            $new_src = strtr($old_src, array('_featured' => '_featured_eighth', '_portrait' => '_portrait_204', '_og.' => '_og_320.', '.jpg' => '.webp'));
            $attr['src'] = $new_src;
        }
    }
    return $attr;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.