Balises ALT et TITLE des images produits

[Xelp59]

Bonjour,

Sur mon Prestashop, actuellement j'aimerais améliorer un peu les balises ALT et TITLE.

Quand on passe la sourie sur les images miniatures, on a donc un ALT et un TITLE, puis l'image en grand change si on se déplace d'une image à l'autre, sans avoir a cliquer. Afin de faire varier un peu le titre des thumb, j'utilise la variable $smarty.foreach.thumbnails.iteration

 

Comme ceci : 

{foreach from=$images item=image name=thumbnails}
    {assign var=imageIds value="`$product->id`-`$image.id_image`" }
        {assign var=imageTitlte value=$product->name|escape:'htmlall':'UTF-8'}
        <li id="thumbnail_{$image.id_image}">
            <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')|escape:'html'}" rel="other-views" class="thickbox2{if $smarty.foreach.thumbnails.first} shown{/if}" title="{$image.legend|htmlspecialchars}">
                <img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'pos_medium')|escape:'html'}"
                     alt="{$imageTitlte} - image {$smarty.foreach.thumbnails.iteration}"
                     title="{$imageTitlte} - image {$smarty.foreach.thumbnails.iteration}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
            </a>
        </li>
{/foreach}

Aussi, j'ai un peu modifié le product.js

if (domAAroundImgThumb.attr('href'))
    {
        var new_src = domAAroundImgThumb.attr('href').replace('thickbox', 'large');
        var new_title = domAAroundImgThumb.attr('title');
        var new_href = domAAroundImgThumb.attr('href');
        if ($('#bigpic').attr('src') != new_src)
        {
            $('#bigpic').attr({
                'src' : new_src,
                'alt' : new_title,
                'title' : new_title
            }).load(function(){
                if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
                    $(this).attr('rel', new_href);
            });
        }
        $('#views_block li a').removeClass('shown');
        $(domAAroundImgThumb).addClass('shown');
    } 

Maintenant, comment puis je récupérer les variables passées à java dans la partie "bigpic" ?

<img id="bigpic" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'pos_large')|escape:'html'}"{if $jqZoomEnabled && $have_image} class="jqzoom"{/if}
title="title"
alt="alt"/>

Par avance, merci

 

 

 

[Johann]

Non, mais il (le title) n'a aucun intérêt en seo

[Xelp59]

Merci pour vos réponses
Et pour la balise ALT ?

[Johann]

La balise alt est LA balise importante pour référencer ses images. Ce qui compte aussi, c'est le contexte. Mais en aucun cas par exemple le nom (physique) du fichier (comme on le lit trop souvent).

Démo par l'absurde avec cet exemple que je donne en formation : recherchez "pizza aux anchois" sur Google Images. Trouvez l'intrus (pas dur), et examinez le contexte et les balises de l'image

 

[Xelp59]

En effet, tu as raison, il faut travailler avec le nom du produit ou quelque chose qui a a voir avec le produit directement et pas le nom de l'image afin que les images soient référencées correctement. J'adore ton exemple ! 

J'utilise dans les thumbnails : 

{$product->name|htmlspecialchars} - image {$imgThumbIndex++}

Edited November 15, 2016 by Xelp59 (see edit history)