Change Image URL to a CDN

admin管理员组

文章数量:1290144

Running NGINX, Wordpress 4.75 after upgrading from a way older version of Wordpress, our images are being served locally and I would like to change that to our CDN.

In the past images that were uploaded to the blog were uploaded directly to our CDN using a plugin ( I think Offload S3 Lite ).

My goal is that I want post images, thumbnail etc URL to be served from our CDN and not local.

For example I have: .jpg

Needs to point to: .jpg

Before the wordpress site (was not updated for a while) was uploading images directly to the CDN (AWS S3 -> Cloudfront) now that we upgraded to 4.75 the images that get served are pointing to local url instead of our CDN url.

images are served through the functions like: the_post_thumbnail()

Which I believe uses wp_get_attachment_image under the hood. If I can included a function in my functions.php to rewrite image urls that could work too.

So how can I get the image urls to point to our CDN and instead of local url?

Thanks for your help!

Running NGINX, Wordpress 4.75 after upgrading from a way older version of Wordpress, our images are being served locally and I would like to change that to our CDN.

In the past images that were uploaded to the blog were uploaded directly to our CDN using a plugin ( I think Offload S3 Lite ).

My goal is that I want post images, thumbnail etc URL to be served from our CDN and not local.

For example I have: https://test/blog/wp-content/uploads/2016/07/Wedding1-370x215.jpg

Needs to point to: https://cdn.test/blog/wp-content/uploads/2016/07/Wedding1-370x215.jpg

Before the wordpress site (was not updated for a while) was uploading images directly to the CDN (AWS S3 -> Cloudfront) now that we upgraded to 4.75 the images that get served are pointing to local url instead of our CDN url.

images are served through the functions like: the_post_thumbnail()

Which I believe uses wp_get_attachment_image under the hood. If I can included a function in my functions.php to rewrite image urls that could work too.

So how can I get the image urls to point to our CDN and instead of local url?

Thanks for your help!

• images
• cdn

Share Improve this question asked Jun 13, 2017 at 18:54 RanknoodleRanknoodle 20944 silver badges99 bronze badges 1

• 1 Did you try this tutorial? premium.wpmudev/blog/moving-wordpress-media-to-amazon-s3 – Serkan Algur Commented Nov 5, 2018 at 8:00

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

Since the major adoption of Responsive Images and the addition of new srcset attribute to the <img> element. WordPress has to evolve too. WordPress 4.4 added the responsive images feature.

If you inspect the src attribute it might point to the CDN, however, you still need to consider the srcset attribute which might still be using the local version of the images.

First, we need to provide the algorithm for changing the local URL to the CDN version. The algorithm I use adheres your test case above; i.e. https://test/ to https://cdn.test/

Add these to functions.php

// Add .cdn after http:// or https://
function to_cdn($src) {
    $dslash_pos = strpos($src, '//') + 2;

    $src_pre  = substr($src, 0, $dslash_pos); // http:// or https://
    $src_post = substr($src, $dslash_pos); // The rest after http:// or https://

    return $src_pre . 'cdn.' . $src_post;
}

Then we need to change the src attribute of the image using the wp_get_attachment_image_src filter.

function test_get_attachment_image_src($image, $attachment_id, $size, $icon) {
    if(!is_admin()) {
        if(!image) {
            return false;
        }

        if(is_array($image)) {
            $src = to_cdn($image[0]); // To CDN
            $width = $image[1];
            $height = $image[2];

            return [$src, $width, $height, true];

        } else {
            return false;
        }
    }

  return $image;

}
add_filter('wp_get_attachment_image_src', 'test_get_attachment_image_src', 10, 4);

Next is for the srcset attribute this time using wp_calculate_image_srcset filter.

function test_calculate_image_srcset($sources, $size_array, $image_src, $image_meta, $attachment_id) {
    if(!is_admin()) {
        $images = [];

        foreach($sources as $source) {
            $src = to_cdn($source['url']); // To CDN
            $images[] = [
                'url' => $src,
                'descriptor' => $source['descriptor'],
                'value' => $source['value']
            ];
        }

        return $images;
    }

  return $sources;
}
add_filter('wp_calculate_image_srcset', 'test_calculate_image_srcset', 10, 5);

You probably want to use the wp_get_attachment_thumb_url filter to rewrite the images that are attached to a post (like featured images or ones added via media manager.)

If there are other images in the content (like if someone copied and pasted HTML with an image tag) you can filter the_content and use RegEx to replace those URLs, but that's hopefully not going to be something you run into very much.

本文标签： Change Image URL to a CDN