Skip to main content

WooCommerce: Controlling an Asset CDN

Continuing on from my last post, I faced a new issue when it came to adding products and the associated images I was putting in (from Cloudinary) was getting uploaded to the WordPress media library. Not only that, using the URL from my site instead of the CDN it had come from. Double up on all of my images, what a waste - and I want to host from the CDN to keep costs of bandwidth down.  So let me show you how I overcame it.

Separating the herd

What was interesting, is that it was keeping a record of the original source location, and I found I could filter these apart from the rest of my media library:


With this in mind, I wrote a function around it so I could use it to give me a true/false if the given attachment was from this source.


Attaching the hook

Next, needed a way that as soon as an image was added, that it would update the attachment (post) pointing to the correct reference, and not to the file on our server. I found the add_attachment hook, which fires only when an image is added.  So I made the following function which not only updates the item to the external URL, but also deletes the file off our server:

It appears we are moving with steam - but somehow the URL persists to be from our server, only this time the file is not found, be we had deleted it.  So we need to alter the logic WordPress is using to resolve the domain and path.  I found the filter wp_get_attachment_url, which provided this cure:


Final cleanse

Short and sweet. But hang on? Large images are now ok, correctly coming from our CDN, but our thumbnails are not?  Generally, with WordPress generating thumbnails, this is a good thing, but in this case it was not desired.  Here, the system attempts to put together the path of the URL, along with the file it would had generated previously when it was uploaded, but our aim now is to keep that clean and only point to the original URL.

The information for these filename and image properties lives in a serialized wp_attachment_metadata key in the wp_postsmeta table.  With time against me, I've taken the quick and nasty (but still clean) method of renaming all sizes for each thumbnail:


As you can see, this pulled me through quite a re-factor, but all problems were solved.

Preventative cure

There is one more thing needed to be implemented to tie things down.  It appears WooCommerce has a background task of attempting to re-generate thumbnails, likely if they are missing.  Fortunately, I quickly came across this small tip:


And that's it!  I hope this helped any of you facing the same hurdles.
Labels:

Comments

Post a Comment

Popular posts from this blog

question2answer Wordpress Integration

 Today I want to journal my implementation of a WordPress site with the package of "question2answer".  It comes as self-promoted as being able to integrate with WordPress "out of the box".  I'm going to vent a small amount of frustration here, because the only integration going on is the simplicity of configuration with using the same database, along with the user authentication of WordPress.  Otherwise they run as two separate sites/themes. This will not do. So let's get to some context.  I have a new hobby project in mind which requires a open source stack-overflow clone.  Enter question2answer .  Now I don't want to come across as completely ungrateful, this package - while old, ticks all the boxes and looks like it was well maintained, but I need every  page to look the same to have a seamless integration.  So, let's go through this step by step. Forum Index Update This step probably  doesn't need to be done, but I just wanted to mak...
Post a Comment
Read more

Running NodeJS Serverless Locally

 So it's been a long time, but I thought this was a neat little trick so I thought I'd share it with the world - as little followers as I have.  In my spare time I've been writing up a new hobby project in Serverless , and while I do maintain a staging and production environment in AWS, it means I need to do a deployment every time I want to test all of the API's I've drafted for it. Not wanting to disturb the yaml configuration for running it locally, I've come up with a simple outline of a server which continues to use the same configuration.  Take the express driven server I first define here: And then put a index.js  in your routes folder to contain this code: Voila! This will take the request from your localhost and interpret the path against your serverless.yml and run the configured function.  Hope this helps someone!
Post a Comment
Read more

Google Sheets Web App

 Greetings! Has been yet another long period since my last post, but hopefully the type of content makes up for it.  Today I'm writing about a need that I had to document my entire movie collection in Google Sheets, because some that were on my local network, some on DVD, some on my Playstation Video account and as well as my small collection in Google TV.  All in all there is currently over 500 movies, and growing. So the spreadsheet is fine on its own, but something nice and "pretty" was needed to list, search and filter by the movie's attributes.  I first got an API key to be used with  OMDB API .  This allows me to get a JSON of the movie's IMDB attributes with a search from the title.  I then added two functions in the "Apps Script" component of the sheet: From here, I could call the function to search (from a cell) with: =API(CONCAT("http://www.omdbapi.com/?apikey=*******&t=",ENCODEURL(A1))) That would return the JSON (assuming A1 is...
Post a Comment
Read more