More than one image in mobile skin?

[Ms Holly]

Is there a way to show more than one image on the mobile skin product display?

Thanks

[bsmither]

Certainly! We would just have to put back in the "Gallery" section, at a place on the page that makes sense on a small-ish screen for a mobile.

[bsmither]

In the mobile template file content.product.php, find:

<div class="image">
{if $PRODUCT.magnify}
  <a href="{$PRODUCT.source}" title="{$PRODUCT.name}" rel="">
  <img src="{$PRODUCT.medium}" alt="{$PRODUCT.name}" id="preview" />
  </a>
{else}
  <img src="{$PRODUCT.medium}" alt="{$PRODUCT.name}" id="preview" />
{/if}
</div>

On a line above it, add {* and on a line below it add: *}. To Smarty, the template rendering engine, this range of statements is now a "comment" and will not be included in the rendered HTML.

 

Now, just above the newly added top line, add this:

<div id="gallery">
  <div class="image">
{if $PRODUCT.magnify}
    <a href="{$PRODUCT.source}" class="magnify" title="{$PRODUCT.name}" rel="">
    <img src="{$PRODUCT.medium}" alt="{$PRODUCT.name}" id="preview" />
    </a>
    <p class="hover_zoom">{$LANG.catalogue.hover_zoom}</p>
{else}
    <img src="{$PRODUCT.medium}" alt="{$PRODUCT.name}" id="preview" />
{/if}
  </div>
{if $GALLERY}
  <div id="gallery_select">
  {foreach from=$GALLERY item=image}
    <a href="{$image.large}" id="image_{$image.id}" class="colorbox gallery" rel="gallery"><img src="{$image.gallery}" alt="{$LANG.catalogue.click_enlarge}" /></a>
  {/foreach}
  </div>
  <script type="text/javascript">var gallery_json = {$GALLERY_JSON}</script>
{/if}
</div>

This the same code (sort of) from the Kurouto skin.

 

Any extra images associated with this product will now be shown as a line of images below the main image. There is no CSS to tell the browser where to put these extra images. It would be better if the extra images were stacked along the right edge of the screen.

 

We need to figure out the CSS to do this.
 

[bsmither]

In the the common.css file, find:

div.image { text-align:center}

and wrap it in CSS comments:

/* div.image { text-align:center} */

We will grab the CSS from the Kurouto skin and add it after:

#gallery {
    width: 360px;
    height: 300px;
}
#gallery div.image {
    float: left;
    height: 270px;
    width: 270px;
}
#gallery_select {
    float: left;
    text-align: center;
    width: 60px;
}
#gallery_select > a {
    display: block;
    margin-bottom: 2px;
}

On the #gallery above, remove the width so that the whole area can be as wide as the screen width. And on the #gallery_select above, make it float right so that the small images are against the right side of the screen.

 

You have room for about a total of six pictures that are associated with the product.