Éviter les icones sous forme de balise img

Piwigo jusqu’à présent propose des icones sous la forme de balises <img …>, c’est pourtant ce qu’il conviendrait d’éviter pour plusieurs raisons.

Pourquoi est-ce une erreur?

1 – En cas d’erreur lors du transfert de l’image, la balise est affichée sous forme d’une petite croix rouge par la majorité des navigateurs.
2 – Les moteurs de référencement cherchent à référencer les images, or trouver des petites images identiques sur des milliers de sites conduit immanquablement à appliquer une décote sur l’intérêt de nos sites.

Quelle est la portée de cette erreur?
Les templates du thème par défaut devraient être une fois encore révisés, car ceux-ci entrainent dans la même erreur les autres thèmes et leurs templates, sans compter les plugins qui ajoutent d’autres templates répétant tous ou presque cette même erreur.
Au moins une vingtaine de fichiers sont concernés, il vous suffit d’effectuer une recherche de class="button" ou de "icon" ou encore de "navButton" dans le répertoire themes/default/template/ pour vous en convaincre.

Comment l’équipe Piwigo pourrait-elle résoudre proprement cette erreur?
Un exemple simple :

<img src="{$ROOT_URL}{$themeconf.icon_dir}/delete.png" class="button" alt="[delete]">

En :

<span class="button {$themeconf.button} {$button.status}">{$button.name|translate}</span>

En tenant compte du billet suivant : Afficher une image au lieu d »un texte (en CSS) et les quelques idées suivantes :
– L’élément déclencheur pourrait être : class="button",
– le {$themeconf.button} permettrait de passer la font en 0/0, ce qui permet d’avoir des thèmes avec icones et d’autres avec textes, sans que les plugins aient à se poser des questions métaphysiques s’ils doivent/peuvent ajouter des boutons ou pas en fonction du thème.
– Quant au {$button.status}, il assurerait un décalage de l’image en fonction de :hover, :active, etc… Une technique déjà employée pour l’évaluation (rating) des images mais qui demande une révision de toutes les icones actuel(le)s ce qui pourrait fortement contrarier les créateurs de thèmes.

A titre individuel, pourrions-nous déjà anticiper un tel changement ?
Oui, c’est réalisable avec un thème personnel, en concentrant nos efforts ne serait-ce que sur trois templates :

  • index.tpl
  • picture.tpl
  • picture_nav_buttons.tpl

Soit des templates pour lesquels vous devrez vous limiter à :

<span class="button nom_du_bouton">{'nom du bouton'|translate}</span>

Exemple du niveau de complexité du changement :

{if isset($last)}
  <a class="navButton" href="{$last.U_IMG}" title="{'Last'|@translate} : {$last.TITLE}" rel="last"><img src="{$ROOT_URL}{$themeconf.icon_dir}/last.png" class="button" alt="{'Last'|@translate}"></a>
{else}
  <a class="navButton"><img src="{$ROOT_URL}{$themeconf.icon_dir}/last_unactive.png" class="button" alt=""></a>
{/if}

en :

{if isset($last)}
  <a class="navButton icon_last" href="{$last.U_IMG}" title="{'Last'|@translate} : {$last.TITLE}" rel="last">{'Last'|@translate}></a>
{else}
  <a class="navButton icon_last_unactive"></a>
{/if}

Un changement qui doit être accompagné dans votre theme.css de :

.navButton {
  display:block;
  font:bold 0pt/0px Arial;
  height:24px;
  margin: 2px 12px; /* pour maintenir l'espacement entre les icones - A ajuster */
  outline:0px;
  width:24px;
}
.icon_last {
  background:url(../default/icon/last.png) no-repeat scroll 0 0 transparent;
}
.icon_last_unactive {
  background:url(../default/icon/last_unactive.png) no-repeat scroll 0 0 transparent;
}

En guise d’épilogue, et pour ne pas focaliser sur Piwigo lequel présente de nombreux avantages, j’attirerai votre attention sur d’autres applications. Par exemple Contao, lequel n’utilise pas un moteur de template et présente la même erreur. Par contre, Gallery 3, zenphoto, WordPress ou Dotclear ne semblent pas concernés sauf si un thème externe ne respecte pas leurs standards.
Dernier point, quelque soit l’application, les pages d’administration peuvent utiliser des balises img car les moteurs de recherche n’accèdent pas dans ces pages.

Conclusion : Si vous devez changer de thème ou faire votre thème personnel, quelque soit votre application évitez les icones basées sur des balises img.

5 thoughts on “Éviter les icones sous forme de balise img

  1. Je ne comprends ta remarque concernant Contao … qui ne fournit QUE des pages d’administration : tout le front-office étant à réaliser par le webmaster, libre à lui de définir ses images et boutons comme il l’entend ; Contao n’impose rien !

    1. 1 – Démo de Contao : http://demo.contao.org/contao/
      2 – Après identifcation, cliquez sur « Front end preview »

      <!-- indexer::stop -->
      <div class="pdf_link">
        <a href="home.html" rel="nofollow" title="Print this page" onclick="window.print(); return false;"><img src="system/modules/frontend/html/print.gif" width="16" height="16" alt="" /></a>
        <a href="home.html?pdf=1" rel="nofollow" title="Print article as PDF"><img src="system/modules/frontend/html/pdf.gif" width="16" height="16" alt="" /></a>
        <a href="share.php?p=facebook&amp;u=http%3A%2F%2Fdemo.contao.org%2Findex.php&amp;t=Welcome%20to%20Music%20Academy" rel="nofollow" title="Share on Facebook" onclick="window.open(this.href, '', 'width=760,height=570,modal=yes,left=100,top=50,location=no,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;"><img src="system/modules/frontend/html/facebook.gif" width="16" height="16" alt="" /></a>
        <a href="share.php?p=twitter&amp;u=http%3A%2F%2Fdemo.contao.org%2Findex.php&amp;t=Welcome%20to%20Music%20Academy" rel="nofollow" title="Share on Twitter" onclick="window.open(this.href, '', 'width=800,height=600,modal=yes,left=100,top=50,location=no,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); return false;"><img src="system/modules/frontend/html/twitter.gif" width="16" height="16" alt="" /></a>
      </div>
      <!-- indexer::continue -->

      La démo ne donne pas le bon exemple, non ?

  2. Je m’attendais un peu à la réponse 😉

    La démo n’est qu’une démo … elle sert juste à montrer la mise en oeuvre des différents modules ; ce n’est pas un site « réel », et elle n’est pas forcément un exemple à suivre.

    1. Nous sommes d’accord sur ce point.
      Retenons donc le principe de ne pas utiliser de balise img pour placer des icones.

      1. A savoir : Piwigo est corrigé à partir de la version 2.2.0 mais les plugins et anciens thèmes peuvent encore utiliser des balises img à tort.

Comments are closed.