Jump to content
Sign in to follow this  
vidmarc

Product page: Moving additional images to underneath the cart button

Recommended Posts

Also, some of the "Specification" info would be better suited here, too.

Is this possible? Currently the area is very empty as we have no need for additional options.

 

 

Share this post


Link to post
Share on other sites

This is for Foundation. We will need to tweak the edits to match your skin.

In content.product.php, switch to using the horizontal_gallery:

{*
   Change include below to 'templates/element.product.(horizontal|vertical)_gallery.php'
   for horizontal gallery and vice versa.
*}
{include file='templates/element.product.horizontal_gallery.php'}

The above sets up the layout so that there is no space consumed on the sides of the main image.

The following edit moves the gallery from under the main image to a place under the "Add to basket" button.

In element.product.horizontal_gallery.php:

Move the following from where it is now:

      {if $GALLERY}
      <ul class="clearing-thumbs small-block-grid-3 medium-block-grid-5 marg-top" data-clearing>
         {foreach from=$GALLERY item=image}
         <li{if $image@total lt 2} style="display:none"{/if}><a href="{$image.source}" class="th"><img src="{$image.small}" data-image-swap="{$image.medium}" data-caption="{$PRODUCT.name}{if !empty($image.description)}: {/if}{$image.description}" class="image-gallery" alt="{$LANG.catalogue.click_enlarge}"></a></li>
         {/foreach}
      </ul>
      {/if}

to a position in the code as indicated:

      {include file='templates/element.product.options.php'}
      {include file='templates/element.product.review_score.php'}
      {include file='templates/element.product.call_to_action.php'}

      {if $GALLERY}
      <ul class="clearing-thumbs small-block-grid-3 medium-block-grid-5 marg-top" data-clearing>
         {foreach from=$GALLERY item=image}
         <li{if $image@total lt 2} style="display:none"{/if}><a href="{$image.source}" class="th"><img src="{$image.small}" data-image-swap="{$image.medium}" data-caption="{$PRODUCT.name}{if !empty($image.description)}: {/if}{$image.description}" class="image-gallery" alt="{$LANG.catalogue.click_enlarge}"></a></li>
         {/foreach}
      </ul>
      {/if}

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...