Magento: Display a product image within Static Pages and Blocks

In this particular instance I needed to add product thumbnails for reference on a front page.

First create a new .phtml file with the following under catalog/product/view/your_new_page.phtml

$productId = $this->getProduct_id();
$_product = Mage::getModel('catalog/product')->load($productId); //load the product
<img src="<? echo Mage::helper('catalog/image')->init($_product, 'thumbnail')->resize(75, 75); ?>" alt="<?php echo $this->htmlEscape($_product['name']); ?>" border="0" width="75" />

Now simply add the following to your CMS Page or Block and adjust the product ID to the product Image you wish to view:

{{block type="catalog/product_new" product_id="1" template="catalog/product/view/your_new_page.phtml"}}

Possibly Related Posts:

  • Pingback: Several Popular Technology Related Product Reviews -Wii Game Central()

  • Hans Kuijpers

    Hi Jared,
    Thank you for this tutorial. I’ve used it to create a video tutorial from it.

  • admin


    Thanks for creating a video tutorial for this.

  • Nayan

    Thanks For sharing

  • Indies Tester

    How to add image in the admin panel interface?nu00a0

  • Steve

    How do you modify the code to make the product image a link to the product page?

  • molotovbliss

    <a href="getProductUrl() ?>"> ...

  • molotovbliss

    <a href="<?php echo $_product->getProductUrl() ?>"> … </a>

  • Steve

    Thanks so much molotovbliss!  

    Have another question regarding this code.  I noticed that this code is cached after the first time its executed so I can’t really reuse it in other places for other products.  Can you or anyone else help me to make it so magento does not cache it?  Or else the alternative is to create this phtml file for each different product image I need to display, which is really really awful!

    Here’s my code for everyone to see as reference (also added width and height configuration):getProduct_id();$width = $this->getWidth();$height = $this->getHeight();$_product = Mage::getModel(‘catalog/product’)->load($productId); //load the product?><a href="getProductUrl(); ?>”><img src="init($_product, ‘thumbnail’)->resize($width, $height); ?>” alt=”htmlEscape($_product[‘name’]); ?>” border=”0″/>

  • Mercy Tapscott

    For anyone who wants to use multiple product images on a page, instead of this:
    {{block type=”catalog/product_new” product_id=”1″ template=”catalog/product/view/your_new_page.phtml”}}

    you need to take the “_new” part off the block type, like so: {{block type=”catalog/product” product_id=”1″ template=”catalog/product/view/your_new_page.phtml”}}