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

[Dennyshop]

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 April 11, 2015 by Dennyshop (see edit history)

[PascalVG]

Hi Denny,

 

 

Maybe to this:

 

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

 

Find this code (Code sample 1.6.0.14)   (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'}

        {else}

          {assign var=imageTitle value=$product->name|escape:'html':'UTF-8'}

        {/if}

        <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>

          </a>

        </li>

      {/foreach}

    {/if}

  </ul>

</div> <!-- end thumbs_list -->

 

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

 

Save.

 

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;

}

 

Result:

 

 

Hope this helps,

pascal

 

 

 

 

[Dennyshop]

The perfect solution! Thank you very much.

[PascalVG]

:-)

 

Happy selling,

pascal