Image Paths in CSS to Support Cdn

Image paths in CSS to support CDN

Probably the easiest thing would be to host both your images and CSS file on the CDN. Image paths in your CSS file are relative to the CSS file itself, so you won't have to change your CSS at all.

If that's not an option, you're stuck putting the fully qualified URLs in your stylesheet. Now, if you really wanted to, you could generate your CSS file dynamically on the fly, and perform some replacement so you don't actually have to hard code the CDN in your sheet.

css image path with version for CDN

The best solution which I've found was to change the version tag to be at the beginning of the url and to use url rewrite in order to process the requests.
So if for example I used to had:

http://website/Content/Images/1.png?123456

this will become to:

http://website/123456/Content/Images/1.png

Notice that I use url rewrite in order the process the request so that http://website/123456/Content/Images/1.png will actually bring the data from http://website/Content/Images/1.png

How to reference CDN images in a stylesheet which may use HTTPS?

Making all image paths to the CDN be over HTTPS is definitely a bad idea. There is a significant overhead with each HTTPS request, so you might not want to do that.

However, turns out there is a simple solution to specifying absolute, cross-domain URLs without the protocol. Simply use, in your css, something like

url: (//d604721fxaaqy9.cloudfront.net/image.jpg) ...

and make sure that your stylesheet is being served over the same protocol, either by using the same trick, or preferably by specifying a path without the protocol, i.e., something like

<link href="/styles.css" ...

or

<link href="styles.css" ...

and you're good to go!

Is there a way to prefix the url of an image referenced in .scss in case of CDN usage?

Try the interpolation syntax along with a variable:

background: url(#{$path_variable_name}/site/background.jpg);

Define alternative image path in CSS

It can be done using javascript. But using your provided CSS codes just add the second to your url something like this:

background-image: url("https://cdn.com/img/myimage1.jpg"), url("https://otherdomain/img/myimage1.jpg");

Magento CSS image directives and CDN conflict

The actual problem has nothing to do with CDN or the location of the merged CSS files in relation to the images. Magento actually does something cool...it parses the CSS files and fills in all the relative URLs with full URLs. It does this inside the Mage_Core_Model_Design_Package class in the _prepareUrl method. It determines whether to use a secure URL or a non-secure URL in the following line:

$secure = $store->isAdmin() ? $store->isAdminUrlSecure() : $store->isFrontUrlSecure();

The problem here is that it will use a secure URL even if the page in question isn't actually secure. If you have use secure URL in frontend enabled, it doesn't use secure URLs all the time. It only uses them on the customer account pages and cart/checkout. Any other page is not secure and doesn't need secure resources.

When merging the URLs, Magento is smart in that it creates a css and a css_secure folder under the media folder. You'll notice if you view the source of the customer account page that it is pulling the CSS from the css_secure folder, but on the homepage it uses the css folder. So it's already set up to know the difference between secure and non-secure pages, but the merging of the CSS doesn't take that into account.

To fix this, I made a basic extension to rewrite the core/design_package model with a new _prepareUrl method. The only difference is that right after the line mentioned above I added this:

$secure = $secure && Mage::app()->getRequest()->isSecure();

This ensures that only the merged css files in the css_secure folder get secure URLs for the resources.

Hope this helps anyone with a similar problem.

---

Related Topics