Trying to add all the product images to product-list (in this case, homepagetabs.tpl)

[Sivo]

I am trying to display all the images "thumbnails" from a product.tpl into my home page products (homepagetabs.tpl > same as product.tpl).

 

Copying the following code shows the features:

<div class="features">
    {foreach from=$product.features item=feature}
        <div>
            <span>{$feature.name}: {$feature.value}</span>
        </div>
    {/foreach}
</div>

So dumb of me (as a dreamer) I thought that replicating the code and modifying it, were going to work:

<div class="features">
         {foreach from=$images item=image name=thumbnails}
        <div>
          <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" />
        </div>
    {/foreach}
</div>

In the other hand, I also thought about copying the exact code from "product.tpl" into "homepagetabs.tpl".

{if isset($images) && count($images) > 0}
                <!-- thumbnails -->
                <div id="views_block" class="clearfix {if isset($images) && count($images) < 2}hidden{/if}">
                    {if isset($images) && count($images) > 4}
                        <span class="view_scroll_spacer">
                            <a id="view_scroll_left" class="" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">
                                {l s='Previous'}
                            </a>
                        </span>
                    {/if}
                    <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" />
                                    </a>
                                </li>
                            {/foreach}
                        {/if}
                        </ul>
                    </div> <!-- end thumbs_list -->
                    {if isset($images) && count($images) > 4}
                        <a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">
                            {l s='Next'}
                        </a>
                    {/if}
                </div> <!-- end views-block -->
                <!-- end thumbnails -->
            {/if}

Wich one of course does not work.

 

Anyone knows why it does not?

 

Also I am trying to create a function to call the images on "homepagetabs.tpl", but as soon as I am not a programmer, I just lost the hope with trying it.

 

In the other hand, I found this module, wich could work fine for my purpose:

http://addons.prestashop.com/es/diaporamas-prestashop-modulos/15136-rollover-pro-multiple-pictures-.html

 

Does anyone knows if the "blue squares" on the module could be images? Because I am interested on showing the images.

 

Thank you for your time!

 

 

[vekia]

hello

you can achieve it easily with some custom code in front controller (for example in front controller)

 

then you will be able to do foreach loop on:

 

FrontController:getPictures($product.id)

    public static function getPictures($id_product){
        $id_image = Db::getInstance()->ExecuteS('SELECT `id_image` FROM `'._DB_PREFIX_.'image` WHERE `id_product` = '.(int)($id_product) . ' ORDER BY position ASC LIMIT 0, 10');
        $toReturn = array();
        if(!$id_image)
           return;
        else
           foreach($id_image as $image)
              $toReturn[] = $id_product . '-' . $image['id_image'];
        return $toReturn;
    } 

[breda_Mcg]

Hi,

Did this solution work for you? Can you post a screengrab to show what it looks like?

Thanks,

Breda

[vekia]

i use it in several modules to display product pictures on certain pages.

at the moment i haven't got any screen related to product listing pages (category pages)

 

for example, on cms pages it works.