Question

I’ve seen a few posts here about issues with relative image paths in CSS not working when the CSS is hosted in a CDN, but I have a situation I can’t find an answer for. In our Magneto store we have the Merge CSS feature turned on. Unfortunately, in Magento, when you do this, it merges them to a single file in the media folder instead of the skin folder. So now, relative paths for images don’t work. Magento tries the secure URL when it can’t find a resourse in the non-secure URL. In our case, we don’t use the CDN for secure pages, so it is able to find the images using the secure URL instead. This technically works, but our site is slower at returning the images than the CDN is and I’d really like to fix this. Short of going through all the CSS sprites and either hard-coding the CDN URL as the image path (undesirable) or removing the CSS directives all together and putting calls to getSkinUrl() within the template files that contain the offending elements (slightly less undesirable), I’m at a loss as to how to fix this. Surely someone has run into this problem before. Any suggestions or thoughts on how to work around this issue?

Thanks!

Answer 1

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.