Magento – Transparent PNGs and Image Caching

Read this answer, https://magento.stackexchange.com/a/1008/361

The number within the URL doesn't represent the scale or pixel dimensions of the image - it is the store view.

All directories/files are automatically created the moment the front-end is viewed and the resize code is executed. It is that simple.

So the code example below was working for me with the event "controller_action_layout_load_before" as I could not see this noted in your question. It would work with and without cache enabled and on both rendering the regular template and the new popup template. Please updated me if this is not the correct event or if this is not one that you can use and I will try changing my code.

/app/etc/modules/Manners_Test.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Manners_Test>
            <active>true</active>
            <codePool>local</codePool>
        </Manners_Test>
    </modules>
</config>

/app/code/local/Manners/Test/etc/config.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Manners_Test>
            <version>0.0.1</version>
        </Manners_Test>
    </modules>
    <global>
        <models>
            <manners_test>
                <class>Manners_Test_Model</class>
            </manners_test>
        </models>
    </global>
    <frontend>
        <events>
            <controller_action_layout_load_before>
                <observers>
                    <manners_test>
                        <class>manners_test/observer</class>
                        <method>changeLayoutEvent</method>
                    </manners_test>
                </observers>
            </controller_action_layout_load_before>
        </events>
        <layout>
            <updates>
                <manners_test>
                    <file>manners_test.xml</file>
                </manners_test>
            </updates>
        </layout>
    </frontend>
</config>

/app/design/frontend/base/default/layout/manners_test.xml

<?xml version="1.0"?>
<layout version="0.1.0">
    <default></default>
    <popup translate="label">
        <label>Catalog Product View Popup</label>
        <remove name="right"/>
        <remove name="left"/>
        <reference name="root">
            <action method="setTemplate">
                <template>page/popup.phtml</template>
            </action>
        </reference>
        <reference name="content">
            <remove name="catalog.product.related"/>
            <remove name="product.attributes"/>
            <remove name="product.info.upsell"/>
            <remove name="product.description"/>
            <remove name="product.info.additional"/>
            <remove name="product.description"/>
            <remove name="product.info.container1"/>
            <remove name="product.info.container2"/>
        </reference>
    </popup>
</layout>

/app/code/local/Manners/Test/Model/Observer.php

<?php
class Manners_Test_Model_Observer {
    public function changeLayoutEvent($observer) {
        $action = $observer->getEvent()->getAction();
        $layout = $observer->getEvent()->getLayout();

        if(($action->getRequest()->getControllerName() == 'product' && $action->getRequest()->getActionName() == 'view')) {
            $template = $action->getRequest()->template;

            if (isset($template) && $template != '') {
                $cache = Mage::app()->getCacheInstance();
                $cache->banUse('full_page');

                $update = $layout->getUpdate();
                $update->load($template);
                $layout->generateXml();
            }
        }
    }
}