CDN integration

[michaelmaeder]

Hi all,

I would like to use a CDN with Lay Theme. As some research has shown in the forum there does not seem to be an official way to integrate a CDN fully. Investigating the website after CDN activation shows me all JS, stylesheets and fonts load from the CDN, but the images do not load from there, but locally.

I have identified two two sources for image urls, that would require to adopt the cdn path. Both are part of the wordpres REST API.

This will rewrite the local domain path (mydomain.com') to the cdn domain (abcdef.stackpathcdn.com) for all calls of get_attachment_image_src. This will only be active after re saving the corresponding pages. Its added in the functions.php of my child theme:

function filter_wp_get_attachment_image_src( $image, $attachment_id, $size, $icon ) {
    if(isset($image[0]))
    {
        $image[0] = str_replace(
            'mydomain.com',
            'abcdef.stackpathcdn.com',
            $image[0]);
    }
    return $image;
};
add_filter( 'wp_get_attachment_image_src', 'filter_wp_get_attachment_image_src', 99, 4 );

Similarly Lay Theme seems to store a bunch of prepared JSON for Gridder in options fields. This JSON seems to deliver the image URLs relative (without protocol or domain). I was looking for a Wordpress filter to filter for any call to get_option for any option containing "_gridder_json" in their name, yet could not find a catch all filter for this. Does anyone have a tip on how to achieve this? WOuld be nice if I could also load the images from the CDN, which will improve page speed dramatically.

Best, MM

[mariusjopen]

Dear @michaelmaeder
we will get back to you in a bit!

Best!

Marius

[arminunruh]

oh hmm

if you'd do in lay options -> "custom css & html" -> "custom head content":

<script>
frontendPassedData.siteUrl = "http://google.com";
</script>

now lay theme would try to load images from:
http://google.com/wp-content/uploads/2019/04/3.jpg

[michaelmaeder]

Thanks Armin and Marius,

I just tried this out. Setting the js object frontendPassedData.siteUrl does work for some images, but not for others apparently. I currently have no public example, but will get back to this soon once the page is launched. If you have any tips in the meantime, that would be much appreciated.

Thanks

[michaelmaeder]

Never mind, after reselecting all images in the content, now the CDN url is set properly. Somehow it seems this does not work for images that have been selected before I have set the siteURL accordingly.

[mariusjopen]

Dear @michaelmaeder
ok. Thank you for letting us know.

Best!

Marius

[michaelmaeder]

Actually now I realised all links set on Images within the gridder are also set to the CDN, which makes them not work anymore. The only navigation that still works is the main navigation. All other navigation within the site is broken after setting the frontendPassedData.siteUrl.

So setting frontendPassedData.siteUrl is fixing the CDN for images but breaking the page navigation within the page (not the main menu).

Is there a way to just set the path for assets and not for navigational links?

Thank you!

[michaelmaeder]

@mariusjopen Sorry forgot to mention you int he earlier post. Hope you see this. Thanks for any tips :-)

[arminunruh]

cdn integration should work now with the latest lay theme versions

[michaelmaeder]

Thanks Armin, so I guess I have to go to work and migrate all that CSS over.