Jump to content

[SOLVED] How to add sequence numbers for pictures of one product?


Recommended Posts

How to add sequence numbers for pictures of one product?


For some products, there is a lot of pictures. To make it easier to communicate with customers, I want to add a number of pictures in the name that appears below the picture.


01 Name of pictures, 02 Name of pictures, 03 Name of pictures, 04 Name of pictures, 05 Name of pictures etc.


Need to make changes to the template to display the images. Please tell me what I need to change in the template.

Edited by Dennyshop (see edit history)
Link to comment
Share on other sites

Hi Denny,



Maybe to this:


edit file themes/<your theme folder>/product.tpl (Make backup!!)


Find this code (Code sample   (Maybe search on the page for thumbs_list) (on Win: Ctrl-F, Mac: Cmd-F)


<div id="thumbs_list">
  <ul id="thumbs_list_frame">
    {if isset($images)}
      {foreach from=$images item=image name=thumbnails}
        {assign var=imageIds value="`$product->id`-`$image.id_image`"}
        {if !empty($image.legend)}
          {assign var=imageTitle value=$image.legend|escape:'html':'UTF-8'}
          {assign var=imageTitle value=$product->name|escape:'html':'UTF-8'}
        <li id="thumbnail_{$image.id_image}"{if $smarty.foreach.thumbnails.last} class="last"{/if}>
          <a{if $jqZoomEnabled && $have_image && !$content_only} href="javascript:void(0);" rel="{literal}[spam-filter]/literal}gallery: 'gal1', smallimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')|escape:'html':'UTF-8'}',largeimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}'{literal[spam-filter]{/literal}"{else} href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}" data-fancybox-group="other-views" class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"{/if} title="{$imageTitle}">
            <img class="img-responsive" id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'cart_default')|escape:'html':'UTF-8'}" alt="{$imageTitle}" title="{$imageTitle}" height="{$cartSize.height}" width="{$cartSize.width}" itemprop="image" />
            <span class = "img_order_no">{$smarty.foreach.thumbnails.iteration}</span>
</div> <!-- end thumbs_list -->

Just after the <img> tag, and just before the closing </a> tag, add the red line as indicated.




Then edit file:

themes/<your theme folder>/css/product.css,  (Make backup!)


and add to the end of the file the following code:


#thumbs_list span.img_order_no {
    position: absolute;
    top: 10px;
    left: 4px;
    color: #866D00;
#thumbs_list li a {
    position: relative;






Hope this helps,






  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...