Mr Teas - Use Full Size Images Instead of Thumbnails

Owned by Jonathan Tew
Last updated: Sept 17, 2015 by John Anderson (Unlicensed)Version comment
6 min read

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 tab of your StoreFront.

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

Now 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
            #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.

After saving the template_item.vm, save the changes to the Home Page.  Then scroll down to the Shop page and click the edit pencil as shown below.

Now click the edit pencil next to the page template template_catalog.vm as shown below.

Scroll down the template and click on #parse("/snippets/group_item_list.vm") as shown below.

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

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')}" width="220" height="220" alt="$item.getTitle()" />
          #end

and add the block of code:

Code to Add
          #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')}" width="220" height="220" alt="$item.getTitle()" />
          #end

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