Magento 1.7 – Add New Custom CMS Template Directive {{cdnmedia}}

cdnce-1.7.0.2cmsmagento-1.7media

I want to add a new CMS directive to render CDN media URL's just like the media directive:

{{media url="wysiwyg/image.jpg"}}

Will result in http://www.example.com/media/wysiwyg/image.jpg

Now I have some specific images that will be hosted on a separate CDN. I want to be able to render URL's to those images from CMS pages/blocks:

{{cdnmedia url="images/picture.jpg"}}

This should result in http://cdn.example.com/images/picture.jpg where the CDN base URL would be configurable.

I already have a helper that can take "images/picture.jpg" as input and will return a full CDN URL (based on configured secure and unsecure CDN bas URL's).

How can I add this into the CMS rendering?

Best Answer

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/

Related Topic