Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

Introduction

This tutorial shows how to use velocity code and conditional statements within your catalog templates to display an item's multimedia.  This velocity code example is intended to be used with the catalog templates.

Sample Code

 
                #if($item.getMultimedia("Image") && $item.getMultimedia("Image").size() > 0)
                 <a href="$item.getDefaultMultimedia('Image').getViewUrl()" title="$item.getDescription()">
                   <img src="$baseThumbnailUrl$item.getDefaultMultimedia('Image').getThumbnail(240)" alt="$item.getDescription()" width="240" height="240"  />
                 </a>
                #else
                 <img src="$baseUrl/assets/images/200x200_default.jpg" alt="Image coming soon"/>
                #end
 

Breaking Down The Code

Here we are checking the item to see if there are any multimedia files with the code "image".  If this isn't done, we risk throwing an error caused by calling .size() on a null object.  If the condition is true the following code is output:

Condition
 
#if($item.getMultimedia("Image") && $item.getMultimedia("Image").size() > 0)
 

 

This is what is created if the default image is found.

 

Statement One
 
                 <a href="$item.getDefaultMultimedia('Image').getViewUrl()" title="$item.getDescription()">
                   <img src="$baseThumbnailUrl$item.getDefaultMultimedia('Image').getThumbnail(240)" alt="$item.getDescription()" width="240" height="240"  />
                 </a>
 

 

If there is no multimedia uploaded to the item with the code "Image" then the #else condition is true and the following code is output:

Statement two
 
   <img src="$baseUrl/assets/images/200x200_default.jpg" alt="Image coming soon"/>
 

This line displays a default image as a place holder until an image can be upload for the item.

 

  • No labels