Ms Holly Posted February 16, 2014 Share Posted February 16, 2014 Is there a way to show more than one image on the mobile skin product display? Thanks Quote Link to comment Share on other sites More sharing options...
bsmither Posted February 16, 2014 Share Posted February 16, 2014 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. Quote Link to comment Share on other sites More sharing options...
bsmither Posted February 16, 2014 Share Posted February 16, 2014 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. Quote Link to comment Share on other sites More sharing options...
bsmither Posted February 16, 2014 Share Posted February 16, 2014 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.