Gallery (Module)

De Cms Made Simple France
Aller à : navigation, rechercher


Module Gallery

Fiche Technique

Dépendances

Le module ne possède aucune dépendance.

Tags

Galeries Photos Slider Carousel

Présentation rapide du module

Le module Gallery est le digne successeur du module Album. Il propose une manière souple et rapide de présenter des photos sur le site internet. Son utilisation est à la fois simple et redoutablement efficace.

Côté préparation du design, on retrouve le concept de gabarit de présentation totalement personnalisable avec en plus la possibilité de préciser le code CSS qui sera injecté dans la page évitant ainsi de surcharger inutilement les feuilles de style communes au reste du site internet. De très nombreux exemples sont disponibles, incluant un bon nombre d'outils de présentation tel que le très célèbre lightbox ce qui permet sans devoir coder une ligne de propulser sa galerie photo comme un pro. Pour ceux et celles qui souhaitent au contraire rentrer dans le détail, il leur reste à manipuler les variables smarty mises à disposition par le module.

Côté préparation des photos le module propose une hiérarchie depuis le répertoire /uploads/Gallery ce qui permet de gérer des galeries parentes/enfants/petits-enfants en toute simplicité que ce soit via le gestionnaire de fichier ou par FTP (plus approprié en cas de grande quantité de photos). Le module propose également son propre système d'ajout de photo en flash qui permet d'uploader de nombreuses photos en une seule manipulation et sans recharger la page, cette option est d'ailleurs préconisée pour ajouter une petite dizaine de photos légères. Toujours dans les options du module, vous pourrez spécifier la dimension maxi des photos qui seront ajouté avec le petit outils flash (ne fonctionnera pas si vous passez par FTP / gestionnaire de fichier). C'est très intéressant pour les personnes ne souhaitant pas ou ne sachant pas re-dimensionner leur images elles même. Chaque galerie photo peut être associée à un gabarit de présentation différent, ce qui permet de proposer un site haut en couleur et original pour chaque galerie. Enfin dernier point : les galeries peuvent être triées par différents critères tels que le nom de fichier,la date de mise à jour du fichier, ...

Côté affichage les options d'appel du module sont très nombreuses et permettront de gérer plusieurs galeries présentées différemment sur une seule et même page (pratique pour les pages de présentation de site généralement plus chargées que le reste du site internet. Point important : les miniatures sont générées à la volée et évite ainsi de devoir perdre du temps à les générer en local.

Les paramètres d'appel

Issus de la documentation Anglaise (+ fiable)

Issus de la traduction Française

  • (optional) lang="en_US" - Paramètre utilisé pour spécifier dans quelle langue afficher le module dans la partie publique. Ce paramètre n'est pas supporté ou utile pour tous les modules.
  • (optional) dir="sub1/sub2" - Paramétrer pour un dossier spécifique, relatif à uploads/images/Gallery/
  • (optional) template="" - Utiliser un gabarit différent enregistré en base de données. Ce gabarit doit exister et être visible dans l'onglet "Gabarits" du panneau d'administration de Gallery, bien qu'il ne soit pas nécessaire d'être mis par défaut. Si ce paramètre n'est pas spécifié, alors le gabarit qui est assigné au dossier sera utilisé, et sinon le gabarit par défaut.
  • (optional) targetpage="" - Page dans laquelle afficher la galerie. Ce peut être un alias de page ou un id. Utilisé pour permettre d'afficher la galerie dans une page avec un gabarit différent.
  • (optional) number="100" - Nombre maximal de vignettes à afficher (par page). Laisser vide affichera toutes les images.
  • (optional) start="1" - Débuter à la énième image. Laissez vide pour débuter à la première.
  • (optional) show="all" - Forcer le types d'images à afficher. Les valeurs possibles sont :
    • 'active' - affiche les images marquées comme actives (défaut)
    • 'inactive' - affiche uniquement les images marquées comme inactives
    • 'all' - affiche toutes les images
  • (optional) action="default" - Remplace l'action par défaut. A utiliser en conjonction avec les paramètres ci-dessus. Les valeurs possibles sont :
    • 'showrandom' - affiche une série de vignettes choisies aléatoirement (s'applique uniquement aux images qui sont stockées dans la base de données, avec un nombre de 6 images par défaut). Utiliser '/*' après le nom de répertoire dans le paramètre dir pour inclure les images des sous-répertoires.
    • 'showlatest' - affiche les images ajoutées récemment (s'applique uniquement aux images qui sont stockées dans la base de données, avec un nombre de 6 images par défaut). Le paramètre dir doit être valorisé, sinon la racine par défaut de Gallery sera utilisée. Les sous-répertoires sont automatiquement ajoutés.
    • 'showlatestdir' - affiche une série de vignettes choisies aléatoirement dans le répertoire le plus récent (s'applique uniquement aux images qui sont stockées dans la base de données, avec un nombre de 6 images par défaut)

Veuillez noter que les images ne sont stockées dans la base de données uniquement lorsque la galerie est visitée dans l'admin.

  • (optional) img="10" - Appelez une image seule avec {Gallery img=123}. Le code html peut être modifié dans l'onglet des gabarits. La taille de la vignette et le système JavaScript peuvent être définis en choisissant un gabarit dans le menu déroulant.

Exemple d'utilisation

Le cas le plus simple est ce code :

{Gallery}

Il affichera l'intégralité de votre galerie photo située logiquement dans le répertoire /uploads/gallery de votre installation. Il affichera donc les images et les sous répertoire selon le gabarit sélectionné comme étant "par défaut".

A noter que si une galerie en particulière est liée à un gabarit différent de celui "par défaut", l'affichage sera forcement différent dès que le visiteur tombera sur cette galerie


{Gallery dir="vacances/PaysBas2009" template="Lightbox"}

Ce code, un peu plus complet déjà, affichera les galeries à partir du répertoire /uploads/gallery/vacances/PaysBas2009 et ne tiendra pas compte du gabarit qui aurait pu être affecté à cette galerie de photo ni même si un gabarit est définit "par défaut" puisque le code spécifie que dans notre affichage c'est le gabarit "Lightbox" qui doit être utilisé.

Truc et Astuce sur le module

Un soucis sur la disposition les vignettes sur le site

Certaines personnes rencontrent un souci sur la disposition des vignettes sur leur sites. Ainsi les vignettes verticales et horizontales n'ayant pas la même longueur, les images se décalent et n'offrent pas de belles présentations uniformes.

Gallery bug01.png exemple de mauvais placement des vignettes

Gallery bug02.png exemple du placement attendu

La solution vient avec la déclaration d'une largeur dans le CSS de la classe : .gallery .img disponible depuis les options de Gallery. Dans la plupart des cas le code est simplement celui ci.

.gallery .img {
    float: left;
    height: auto;
    margin: 10px;
    text-align: center;
    width: 100px; <----- Ce qu'il faut ajouter
}

Pour ceux qui travailleraient avec des vignettes aux dimensions différentes de la taille standard : 96px * 96px, pensez à ajuster cette valeur.

Le bouton 'ajouter des images' est HS

Gallery bug03.jpg exemple d'un bouton tout cassé.

Le bouton contient une applet Flash. Ce n'est pas Galery qui est buguée mais votre navigateur qui plante ou votre ordinateur qui ne contient pas le lecteur flash. Il faut dès lors installer Flash sur votre ordinateur ou tester un autre navigateur.

Faire un roulement toutes les N images

L'objectif est de faire un traitement récurant toutes les N images. Par exemple. Obtenir en sortie un code html ainsi :

<ul>
 <li>Photo 1</li>
 <li>Photo 2</li>
</ul>
<ul>
 <li>Photo 3</li>
 <li>Photo 4</li>
</ul>
<ul>
 <li>Photo 5</li>
</ul>

Le code se passe durant la boucle smarty : entre {foreach) et {/foreach} du gabarit du module Galery.

{foreach from=$images item=image name=foobar}
 {if $smarty.foreach.foobar.index % 2 == 0}
  <ul>
 {/if}

<li><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></li>

 {if $smarty.foreach.foobar.index % 2 == 0}
  </ul>
 {/if}
{/foreach}

C'est l'opérateur modulo (%) qui permet de tourner sur 2 positions. Pour tourner sur 4 positions il suffira de changer "% 2" en "% 4"

Erreur durant l'upload d'image dans le module

Ce sont principalement les utilisateurs d'OVH qui sont touchés par ce bug lorsqu'ils modifient le CHMOD du répertoire ./uploads. En effet le CHMOD 777 est interdit chez OVH. Il faut donc mettre 755.

Éviter les erreurs 404 sur des anciennes galeries

Une galerie renommée, ou supprimée, et c'est une foule d'erreur 404 pour vos visiteurs et pour les bots des moteurs de recherche. Vous pouvez contourner le problème en reroutant toutes les visites pointant une image qui n'existe plus vers une image générique plus gracieuse. Bonus : un code 301 : déplacé définitivement permettra aux moteurs de recherche de se mettre à jour.

Toutes les explications sur ce topic : http://www.cmsmadesimple.fr/forum/viewtopic.php?id=3133


Sys Info.png
Un soucis sur cette page ?
Vous pouvez à tout moment signaler une erreur, un oublis ou une nouveauté sur cette page en cliquant à droite sur le bouton rouge "commentaires"