When developing a Magento site you’ll want to be able to access images that are saved in a couple different locations in the file structure. Typically, images are going to be saved in one of two locations. Images added via the admin panel’s image tool are going to be located in the media folder. While images that are part of your theme are in skin/frontend/PACKAGE/THEME/images folder. The two main places you’ll be calling your images is template (phtml) files and CMS pages. Here is a quick ‘how to’ for accessing those images from both locations.

Template Files

Media Images from Template (phtml) Files

Adding an image from the media folder:

<img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA). 'subfolder/image.png'; ?>" />

*note Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA) returns a path of www.yourwebsite.com/media

Another way to produce the same link is:

<img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_LINK). 'media/subfolder/image.png'; ?>" />

*note Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_LINK) returns a path of www.yourwebsite.com

Skin Folder Images from Template (phtml) Files

Adding an image from the skin folder:

<img src="<?php echo $this->getSkinUrl('images/image.png'); ?>" alt="image alt text" />

*note $this->getSkinUrl returns a path of www.yourwebsite.com/skin/frontend/PACKAGE/THEME

CMS Pages

Media Images from CMS Page

Adding an image from the media folder:

{{media url='subfolder/image.png'}}

*note {{media url=”}} returns a path of www.yourwebsite.com/media

Skin Images from CMS Page

Adding an image from the skin folder:

{{skin url='images/image.png'}}

*note {{skin url=”}} returns a path of www.yourwebsite.com/skin/frontend/PACKAGE/THEME

Echo/Display Paths

If you need to verify either the media or skin paths you can echo/display them out using:

From Template Files

Echo Media Folder Path

<?php echo $this->getMediaUrl(); ?>

OR

<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA); ?>

Echo Skin Folder Path

<?php echo $this->getSkinUrl(); ?>

From CMS Pages

Display Media Folder Path

{{media url=''}}

Display Skin Folder Path

{{skin url=''}}