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

Version 1 Next »

In the Mr. Teas theme, all the product images are thumbnails of one size or another unless the lightbox is shown with the full size image.  Sometimes the creation of the thumbnail can degrade the picture quality.  This tutorial will walk you through the process of changing the templates to use the full size images.  

First click on the pages table of your StoreFront.

Now click on the pencil icon to edit the Home page.

How click on the pencil icon for the Page template as shown below.  

On template_home.vm we want to comment out the block of code on approximately line 154:

Code to Comment Out
                #if($item.getDefaultMultimedia('Image') && $item.getDefaultMultimedia('Image').getThumbnail(220, 220, true, $PNGThumbnails))
  		            <img src="${baseThumbnailUrl}${item.getDefaultMultimedia('Image').getThumbnail(220, 220, true, $PNGThumbnails)}" class="UC-default-item-multimedia" width="220" height="220" alt="$item.getTitle()" />
                #else
                  <img src="${baseThemeUrl}${theme.attr('Item No Image Available Image URL')}" class="UC-default-item-multimedia" width="220" height="220" alt="$item.getTitle()" />
                #end

 

and add the block of code:

Code to Add
				## New code to output the full image.
                #if($item.getDefaultMultimedia('Image'))
  		            <img src="${item.getDefaultMultimedia('Image').getViewSsl()}" class="UC-default-item-multimedia" width="220" height="220" alt="$item.getTitle()" />
                #else
                  <img src="${baseThemeUrl}${theme.attr('Item No Image Available Image URL')}" class="UC-default-item-multimedia" width="220" height="220" alt="$item.getTitle()" />
                #end

You can see this change made below.  Make sure to hit Save after editing the template.

Now click on the Items tab and then click the pencil next to the item template as shown below.

 

On template_item.vm we want to comment out the block of code on approximately line 54:

Code to Comment Out
 This code output product thumbnail images
            #if(!$img.isExcludeFromGallery() && $formatHelper.notNull($img.getCode()) != 'featured')
              #if($img.getThumbnail(100, 100, false, $PNGThumbnails) && $img.getThumbnail(360, 360, false, $PNGThumbnails)) ## if this check fails, the thumbnail creation probably failed.
                <li class="#if($outOfStock)out-of-stock#{end} product-image" #if($velocityCount > 1) style="display:none;" #end >
                  <a href="$img.getViewSsl()">
                    <strong>$formatHelper.notNull($img.getDescription())</strong>
                    <span class="link">View</span>
                      <img src="${baseThumbnailUrl}${img.getThumbnail(100, 100, false, $PNGThumbnails)}" data-large="${baseThumbnailUrl}${img.getThumbnail(360, 360, false, $PNGThumbnails)}" width="100" height="100" alt="$formatHelper.notNull($img.getDescription())" />
                    #if($outOfStock)
                      <sub>
                        <em>Out of stock</em>
                      </sub>
                    #end
                  </a>
                </li>
              #end
            #end

and add the block of code:

Code to Add
            #if(!$img.isExcludeFromGallery() && $formatHelper.notNull($img.getCode()) != 'featured')
              <li class="#if($outOfStock)out-of-stock#{end} product-image" #if($velocityCount > 1) style="display:none;" #end >
                <a href="$img.getViewSsl()">
                  <strong>$formatHelper.notNull($img.getDescription())</strong>
                  <span class="link">View</span>
                    <img src="${baseThumbnailUrl}${img.getThumbnail(100, 100, false, $PNGThumbnails)}" data-large="${img.getViewSsl()}" width="100" height="100" alt="$formatHelper.notNull($img.getDescription())" />
                  #if($outOfStock)
                    <sub>
                      <em>Out of stock</em>
                    </sub>
                  #end
                </a>
              </li>
            #end

You can see this change made below.  Make sure to hit Save after editing the template.

  • No labels