How to filter the URL of thumbnail size in the WordPress Media Grid and admin pages

Question

I posted this question on WordPress Stack Exchange a couple of days ago, but I didn't receive any answer. Now I'm reposting it here hopefully I will get the answer.

---

I need to filter the URL of the thumbnails in the Media Grid (or any admin pages) by getting the original image URL and adding some URL parameters to generate the thumbnail on the cloud using the AWS Serverless Image Handler.

Suppose I have this original image URL:

https://cdn.example.com/2023/02/20/1234567890-original.jpg

And I don't have any sizes metadata stored in DB for that image. I need to find the proper hook where I can return something like this URL for the thumbnails in the Media Grid or any image displayed on the admin pages:

https://cdn.example.com/2023/02/20/1234567890-original.jpg?size=240x240

I'm planning here to avoid storing any thumbnail sizes in the attachment metadata in DB, and then generating any needed size on the fly using the mentioned library.

Is there any proper hook that is being triggered before returning the thumbnail size URL?

Answer 1

Ran into a similar problem. We don't want to generate a bunch of thumbnails, so we turn those off.

As of late 2022 the image name still seems to get passed through. We hook into wp_get_attachment_image_src for now. We are using named transforms with our CND.

// Generate IMG Urls through CDN with params appended.
function fa_appendImageSRC( $image, $attachment_id, $size, $icon ) {
        // write_log(get_page_template());
    if ( ! $image ) {
            // write_log("Empty image: $image, $attachment_id, $size");
            return $image;
    }
        // write_log("image[0]: {$size}");
    if ( empty( $attachment_id ) ) {
        return $image;
    }
        // write_log("image[0]: {$image[0]}");
    if ( is_string( $size ) ) {
        // write_log("size: {$size}");
    } else {
            // write_log("size(w): {$size[0]}");
            // write_log("size(h): {$size[1]}");
    }

    if ( isset( $size ) && ( 'full' === $size ) ) {
            return $image;
    }

        // write_log("attachment_id: {$attachment_id}");

    if ( isset( $size ) && 'woocommerce_thumbnail' === $size ) {
            $image[0] .= '?tr=n-woocommerce_thumbnail';
            $image[1]  = 247;
            $image[2]  = 247;

    } elseif ( isset( $size ) && 'woocommerce_single' === $size ) {
            $image[0] .= '?tr=n-woocommerce_single';
            $image[1]  = 510;
            $image[2]  = 510;

    } elseif ( isset( $size ) && 'woocommerce_gallery_thumbnail' === $size ) {
            $image[0] .= '?tr=n-woocommerce_gallery_thumbnail';
            $image[1]  = 100;
            $image[2]  = 100;

    } elseif ( isset( $size ) && 'sidebar_tower' === $size ) {
            $image[0] .= '?tr=n-sidebar_tower';
            $image[1]  = 330;
            $image[2]  = 330;
    } elseif ( isset( $size ) && 'large' === $size ) {
            $image[0] .= '?tr=n-large';
            $image[1]  = 1024;
            $image[2]  = 1024;

    } elseif ( isset( $size ) && is_array( $size ) ) {
            $image[0] .= '?tr:w-' . $size[0] . ',h-' . $size[1] . ',q-80,cm-pad_resize,bg-FFFFFF,fo-auto';
            $image[1]  = $size[0];
            $image[2]  = $size[1];
            // write_log("size array: {$image[0]}");
    }

    return $image;
}

add_filter( 'wp_get_attachment_image_src', 'fa_appendImageSRC', 99, 4 );

I'v attempted custom src-set generation and it is an ugly ugly kludge. I'd rather have this all stored as image meta at image create time or recreated during "thumbnail regeneration".

function fa_wc_get_gallery_image_html( $attachment_id, $main_image = false, $size = 'woocommerce_single' ) {
    // write_log("Custom html. Main_image: {$main_image} Size: {$size}");
    $parent_title = '';
    $parent       = get_post_ancestors( $attachment_id );

    if ( ( $parent ) && is_array( $parent ) ) {
        // write_log(get_the_title($parent[0]));
        $parent_title = get_the_title( $parent[0] );
    }

    // write_log("parent_title: {$parent_title}");

    $gallery_thumbnail   = wc_get_image_size( 'gallery_thumbnail' );
    $thumbnail_size      = apply_filters( 'woocommerce_gallery_thumbnail_size', array( $gallery_thumbnail['width'], $gallery_thumbnail['height'] ) );
    $image_size          = apply_filters( 'woocommerce_gallery_image_size', $size );
    $full_size           = apply_filters( 'woocommerce_gallery_full_size', apply_filters( 'woocommerce_product_thumbnails_large_size', 'full' ) );
    $thumbnail_src       = wp_get_attachment_image_src( $attachment_id, $thumbnail_size );
    $full_src            = wp_get_attachment_image_src( $attachment_id, $full_size );
    $image               = wp_get_attachment_image(
        $attachment_id,
        $image_size,
        false,
        array(
            'title'                   => $parent_title, // get_post_field( 'post_title', $attachment_id ),
            'data-caption'            => get_post_field( 'post_excerpt', $attachment_id ),
            'data-src'                => $full_src[0],
            'data-large_image'        => $full_src[0],
            'data-large_image_width'  => $full_src[1],
            'data-large_image_height' => $full_src[2],
            'class'                   => $main_image ? 'wp-post-image skip-lazy' : 'skip-lazy', // skip-lazy, blacklist for Jetpack's lazy load.
        )
    );
    $image_wrapper_class = $main_image ? 'slide first' : 'slide';
    $image_html          = $main_image ? $image : '<a href="' . esc_url( $full_src[0] ) . '">' . $image . '</a>';
    return '<div data-thumb="' . esc_url( $thumbnail_src[0] ) . '" class="woocommerce-product-gallery__image ' . $image_wrapper_class . '">' . $image_html . '</div>';
}