Best way to prepend CDN URL to all images/videos


#1

So we are currently using S3 for all our assets and need to prepend all url’s within image and embed tags. We have tried using the fingerprinting from broccoli-assets-rev built into EmberCLI. But there are two issues that it brings up:

  1. We don’t want fingerprinting on our image/video assets. Adding the folders to the exclude list will not prepend our CDN url to the assets.

  2. CDN is not prepended to bounded-image assets. So if we had in a template "<img src="/assets/images/{{product-name}}-{{product-image-type}}.jpg">" … the cdn/fingerprint will not work on it.

Our last resort, we ended up creating a component for rendering all our images/videos. But I feel doing it this way is horribly inefficient given how much images are in each page. Does anyone know any solution to this? Many thanks in advanced.


#2

We are actually doing this with a combination initializer & service. A typical, knee-jerk question is always "why not just code the CDN URL in the <img src="" />? In most cases, you can get a lot of traction and distance out of this. Assuming you’ve thought of this and, like me, needed something more, read on.

In my case, I have to support Dev, QA, Staging and Prod environments, all with different CDN urls, so this had to pulled out to a service/config. To further complicate the process, not all images would pull from the same CDN, if they were pulled from a CDN at all.

Pseudo-code follows :

In my templates, I’d have something like:

<img src="{{linksService.cdnGraphicsHostUrl}}/img/{{product-name}}-{{product-image}}" />

The short version of my initializer and service would be:

export var initialize = function (container, app) {
    // application.injection('route', 'foo', 'service:foo');
    app.inject('controller', 'linksService', 'service:linksService');
    app.inject('component', 'linksService', 'service:linksService');
};
export default {
    name: 'linksService',
    before: 'store',
    initialize: initialize
};

and

import Ember from 'ember';

export default Ember.Service.extend({
    cdnGraphicsHostUrl: function () {
        // execute some other code here
        return "//s3.amazonaws.com/item-bucket/item-object";
    }
});

#3

Thanks so much for your help!