Magento – change image upload location

This is how I've done it right now.

Overriding CMS template filter

The CMS Helper contains two methods called getPageTemplateProcessor() and getBlockTemplateProcessor() which will do Mage::getModel(...) with input of the configured model name from the config respectively at global/cms/page/tempate_filter and global/cms/block/tempate_filter.

So add this to your module's config.xml to replace the original values of widget/template_filter (set in app/code/core/Mage/Widget/etc/config.xml):

<config>
    <!-- ... -->
    <global>
        <models>
            <mymodule_cdn>
                <class>MyModule_Cdn_Model</class>
            </mymodule_cdn>
        </models>
        <cms>
            <page>
                <tempate_filter>mymodule_cdn/template_filter</tempate_filter>
            </page>
            <block>
                <tempate_filter>mymodule_cdn/template_filter</tempate_filter>
            </block>
        </cms>
    </global>
</config>

Sidenotes:

1. notice the node name <tempate_filter> is missing the 'l' in 'template' which is a typo in Magento core
2. This is a form of rewrite. The last loaded module will do this rewrite effectively, therefore also it would be good practice to make your module <depends> on <Mage_Widget />

Custom template filter model with 'cdnmedia' directive

And the model:

class MyModule_Cdn_Model_Template_Filter extends Mage_Widget_Model_Template_Filter
{
    /**
     * CDN media URL filter
     *
     * @param array $construction
     * @return string
     */
    public function cdnmediaDirective($construction)
    {
        $params = $this->_getIncludeParameters($construction[2]);

        if (!isset($params['url']) || '' == trim($params['url'])) {
            return '';
        }

        $secure = null;
        if (isset($params['secure'])) {
            $secure = in_array($params['secure'], array('1', 'true', 'on', 'yes'));
        }

        return Mage::helper('mymodule_cdn')->getUrl($params['url'], $secure);
    }
}

Rendering the actual URL

The question is how to add the directive, not the actual URL creation, but for completeness, here's the 'mymodule_cdn' helper getUrl() method:

/**
 * Get CDN URL for path
 *
 * @param string $path
 * @param null|boolean $secure
 * @return string
 */
public function getUrl($path = '', $secure = null)
{
    if ($secure === null) {
        $secure = intval(Mage::getStoreConfig('mymodule_cdn/default/is_secure')) > 0;
    }
    return rtrim(($secure === true
            ? Mage::getStoreConfig('mymodule_cdn/secure/base_url')
            : Mage::getStoreConfig('mymodule_cdn/unsecure/base_url')
        ), '/')
        . '/' . ltrim($path, '/');
}

Usages

You can use the {{cdnmedia}} directive now in your CMS pages and static blocks:

<img src="{{cdnmedia url="images/picture.jpg" secure="true"}}" />
<!-- will render: -->
<img src="https://cdn.example.com/images/picture.jpg" />

And because of the use of a helper building the actual URL, you can use this in phtml templates:

<img src="<?php echo Mage::helper('mymodule_cdn')->getUrl('images/picture.jpg', true); ?>" />
<?php /* will render: */ ?>
<img src="https://cdn.example.com/images/picture.jpg" />

Reference

Used this article as reference: http://de.nr-apps.com/blog/2013/01/16/magento-store-url-template-directive/

Having a quick look at the extension here are the benefits of using the extension rather than setting up CDN through web urls config. I've removed the marketing stuff...:

1. The extension comes with a tool for refreshing the files on the CDN instantaneously. Without our extension, you have to use a tool on the AWS website called "Invalidation Manager" to make the CDN pull updated files from your server. The invalidation manager is very slow and somewhat unreliable. The invalidation manager also only allows you to refresh 3 files every fifteen minutes... so it is quite time consuming to use it.

2. It prevents the CDN from being used on Javascript that requires same-origin loading. This is relevant to Javascript that is used for uploading files.

Having said that there also is a remark concerning S3 for this extension:

Currently it does not support S3 as the origin.

That being said, it uses your server as the origin in the same way that S3 works.

Basically, the extension caches your files on CloudFront and then serves them directly to your users from CloudFront. Every two hours the extension checks your server for a new version of the files and updates CloudFront accordingly.