How To Add More Than One Image for A Product

Greetings all and welcome to the next installment of Matt's Musings or Episode V: The Images Strike Back. This month we're going to look at the product images and how to easily add more of them to the product page.

I'll start by saying that there are a lot of methods to add multiple images to your product page ranging from using HTML in your product description to third-party modules. What I am going to show is how to add the images using only the built-in Miva Merchant custom product fields, Emporium Plus's Tool Kit module, a little JavaScript and a dash of CSS. The additional product images will need to be sized to match the product's full-size image, we will create the faux thumbnails through that dash of CSS.

• Create a new Custom Product Field in your Utilities section with a code of "addProdImgs" and named "Additional Product Images". This field will contain a comma separated list of the additional product image file names. There will be no need to include the file type, assuming they are all the same (i.e. jpg).
  

  click to enlarge

• In the Product Display Layout of your Product Page, find your product image, add the "name" and "id" attributes with a value of "prod-img" and check the Additional Product Images custom field box.
  

  click to enlarge

• Modify your layout to accommodate your additional product images. Be sure to label the containing element for the additional product images with an ID, we will be referring to this later.

Now we're going to get into the fun part...

• Let's start by surrounding the additional product images containing element with an IF statement based on the custom product field we created earlier. This will hide the container if there are no additional product images.
  

  <mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:addProdImgs"></mvt:if>

• Now we're going to used the vacreate function from within Tool Kit to create an array of all the files listed in the custom product field. In the containing element, add this code:
  

  	
  <mvt:item name="toolkit" param="vacreate|addImages|l.all_settings:product:customfield_values:customfields:addProdImgs|," /><br />
  <mvt:foreach iterator="imgName" array="addImages"><br />
  <img src="graphics/00000001/&mvte:imgName;.jpg" alt="&mvt:product:name;" title="&mvt:product:name;" onclick="MM_swapImage('prod-img','','graphics/00000001/&mvte:imgName;.jpg',1)" /><br />
  </mvt:foreach>
  	
  

A few final touches and we're all done...

• In your CSS file, add these rules:
  

  	
  		#CONTAINER-ID img{cursor:pointer; width:; height:;}
  	
  

  (Assign pixel values to the width and height to make the image look like thumbnails.)

• Before the closing BODY tag on your product page, add this [removed]

  	
  <script type="text/javascript">
  function MM_swapImgRestore(){var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;} //v3.0
  function MM_preloadImages(){var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}} //v3.0
  function MM_findObj(n, d){var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);if(!x && d.getElementById) x=d.getElementById(n); return x;} //v4.01
  function MM_swapImage(){var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}} //v3.0
  </script>