Serving a different image for each page in CMSMS

In one of the sites I’m working on, there is a large featured image that is different for each product page, but is the same for the rest of the pages on the site.

Heres how I did it.

1. In each page where you need a different featured image, go to the options tab, and set the Image variable

2. This variables is accessible in the menu manager as $node->image. To use them in a template, you can use the tag {page_image}. However, I needed to be able to check if there was an image because if there is no image set, I wanted to be able to have a default image. Since {page_image} is a tag and not a variable, you can’t just do isset(page_image). Instead, you first need to assign it’s output to an image.

You can do that like this:

{capture name="is_page" assign='is_page_image'}{page_image}{/capture}

3. Now that we have a variable, we can check if the page we’re on has an image, and then display the image. If it doesn’t, we can display our default image.

{if ($is_page_image ne '')}
<a href="#"><img src="uploads/images/{page_image}" alt="{title}" width="870" height="382" /></a>
{else}
<a href="#"><img src="images/img-ad.jpg" alt="default image description" width="870" height="382" /></a>
{/if}

4. Done! Now on each page, the page image is displayed, and if there isn’t one, a default image is displayed.

If you enjoyed this post, make sure you subscribe to my RSS feed!


Related posts:

Twitter Digg Delicious Stumbleupon Technorati Facebook Email

3 Responses to “Serving a different image for each page in CMSMS”

  1. I also found a module ImagePicker that does this, though you don’t have the flexibility of setting the alt tags as far as I can tell.

  2. Hey, thanks for useful code. I optimized it a bit.

    {capture assign=’page_img’}{page_image}{/capture}

    {if $page_img == “”}
    {assign var=’img_url’ value=’default.jpg’}
    {else}
    {assign var=’img_url’ value=`$page_img`}
    {/if}