SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 279 visiteurs en ce moment

Accueil > Affichage multimédia > Galeries et diaporamas > Galleria > Galleria guide complet

Galleria guide complet

5 mai 2012 – par emthanh – 19 commentaires

12 votes

Ce guide va vous aider à installer pas à pas le plugin Galleria.

Ce plugin vous permet d’ajouter des galeries d’images à vos articles ou à vos squelettes.

Galleria est une librairie javascript qui permet de créer une galerie d’image à partir d’une page HTML.Ce plugin est l’intégration de Galleria à SPIP.

L’utilisation du plugin se fait par l’utilisation d’un modèle SPIP. Un modèle SPIP est une balise , ici nommée galleria , qui peut être ajoutée dans le texte d’un article. C’est donc un moyen souple d’édition de galeries.

L’ajout de galerie peut aussi se faire d’une façon plus classique dans un squelette.

Installation du plugin

Il y a 2 moyens d’installer un plugin SPIP , par fichier zip ou en ligne.
-  Pour installer un plugin par son fichier zip, vous devez récupérer l’archive ZIP et la décompresser dans l’arborescence SPIP, sous le dossier ./plugins
On a alors l’arborescence suivante :

 config
 ecrire
 extensions
 images
 IMG
 local
 plugins->galleria
 prive
 ...

Vous devez ensuite activer le plugin dans l’espace privé ; dans le menu Configuration->Gestion des plugins->Liste des plugins
Vérifiez que le plugins est activé dans le menu
Configuration->Gestion des plugins->Plugins actifs

-  Installation automatique , SPIP charge pour vous le plugin et l’installe à partir d’internet [1]. Dans le menu
Configuration->Gestion des plugins->Ajouter des plugins , trouvez Galleria dans la liste et cliquez sur télécharger. Le plugin est automatiquement télécharger ,installer et activer.
Cette installation est plus simple et vous permettra d’avoir toujours la dernière version du plugin.

Le premier essai

Le plugin est actif , il ne vous reste qu’à créer un article , ajouter des images à cet article. Puis dans le texte de cet article ajoutez la balise <galleriaXX> , ou XX est le numéro de l’article

<galleria12>

enregistrez votre article publiez le , vous aurez une galerie d’images avec les images de l’article 12.

Le numéro de l’article est inscrit en haut à gauche

Utilisation des options

L’utilisation des options se fait par le biais des paramètres d’un modèle.
Pour utiliser l’option lightbox de Galleria modifiez l’article que vous venez de créer par

<galleria12|lightbox=true>

puis visionnez le résultat . Rien de différent pour l’instant , mais cliquez sur l’image affichée. Celle-ci doit s’ouvrir en plein écran.

Vous pouvez aussi mixer les options

<galleria12|lightbox=true|transition=fade>

Une galerie avec l’effet lightbox et une transition en fondu.

liste des options standards Galleria
-  width la largeur de la galerie d’images
-  height la hauteur
-  lightbox :true activation de l’effet lightbox , image en plein écran
-  transition :[fade|flash|pulse|slide|fadeslide|doorslide] la transition entre les images
-  theme : le nom d’un thème Galleria voir les thèmes Galleria
-  pagesize : le nombre d’image par page une option pour ce plugin SPIP seulement

Il existe un très grand nombre d’autres options , veuillez vous référez au site de Galleria

Utiliser le modèle dans un squelette

Un modele SPIP peut aussi être inclus dans un squelette.
Ici la balise et le code équivalent dans le squelette.

<galleria12>
[(#MODELE{galleria}{id_article})]

<galleria12|lightbox=true>
[(#MODELE{galleria}{id_article,lightbox=true})]

<galleria12|lightbox=true|transition=fade>
[(#MODELE{galleria}{id_article,lightbox=true,transition=fade})]

Apparence

PNG - 184.8 ko
ouverture avec lightbox/open with lightbox

Trucs et Astuces

-  Ajouter une galerie avec les images d’un autre article.
Il est possible de publier une galerie dans un article qui contiendra les images d’un autre article.
ex : Si un article10 contient les images :img20 ,img21 ,img22 , en publiant dans un article13 ,la balise <galleria10> , cette galerie contiendra les images :img20 ,img21 ,img22 , même si article13 ne contient pas ces images.

-  Ajouter un titre et une description
Vous pouvez renseigner le titre et la description d’une image liée à un article , qui apparaitront en haut à gauche la galerie

-  Ajouter les images du portfolio version 1.3.2
Utilisez l’option mode=document pour choisir le portfolio comme source de vos images
<galleria22|mode=document>

Références

version 1.3.2
installer un plugin SPIP http://www.spip.net/fr_article3396.html
les modèles SPIP http://www.spip.net/fr_article3454.html
liste des options Galleria http://galleria.io/docs/options/#li...
SPIP minimum 1.9.2 librairie JQuery
version Galleria 1.2.9 site de Galleria
version de développement 2.1.11
svn svn://zone.spip.org/spip-zone/_plug...

Bug connu

Lorsqu’on ajoute plusieurs galerie dans un même article, la galerie ne fonctionne pas correctement. (bug fermé avec la version 1.3.1)

Notes

[1Cela suppose que vous ayez créé un sous-dossier ./plugins/auto

Dernière modification de cette page le 9 mars 2014

Retour en haut de la page

Vos commentaires

  • Le 9 avril 2013 à 09:54, par Sylvain_LD En réponse à : Galleria guide complet

    Bonjour,
    Je voulais utiliser l’option ShowInfo, avec « ShowInfo=true », espérant que le contenu du titre et de la description de la photo apparaissent automatiquement.
    Rien ne se passe excepté que j’ai subitement deux messages d’erreur dans la partie prive de SPIP : « (Fatal error : Could not extract a stage height from the CSS. Traced height : 0px.) » et l’autre avec width.

    J’utilise le plugin ESCAL en V3 et SPIP 3.0.7 chez SpipFactory.
    Merci
    Sylvain

    JPEG - 48.1 ko
    • Le 10 avril 2013 à 10:20, par Aymeric En réponse à : Galleria guide complet

      Bonjour,

      La fonction ShowInfo ne te permettra que de faire disparaître complètement la bulle info, en faisant disparaître le déclencheur ’i’ (donc ShowInfo : false).

      Pour y parvenir il faut modifier le paramètre _toggleInfo directement dans le fichier javascript galleria.classic.min.js présent dans le dossier galleria/themes/classic/galleria.classic.min.js dans le dossier du plugin. En mettant _toggleInfo : false dans ce fichier et en vidant bien les caches tu auras l’effet désiré.

    • Le 10 avril 2013 à 12:51, par Sylvain_LD En réponse à : Galleria guide complet

      Merci,
      ça marche bien, sauf que dans le fichier galleria.classic.min.js, j’ai trouvé « _toggleInfo : !0 »,
      donc j’ai mis « _toggleInfo : 0 »

  • Le 18 mars 2013 à 15:24, par racha En réponse à : Galleria guide complet

    bonjour
    j’ai installer Galleria mais j’ai pas compris ou j’ajoute la balise
    quelqu’un peut m’aider ?
    merci pour vos réponse

    • Le 18 mars 2013 à 23:34, par emthanh En réponse à : Galleria guide complet

      Bonjour.
      Relisez la section 1er essai.
      Cordialement

    • Le 19 mars 2013 à 14:39, par racha En réponse à : Galleria guide complet

      bonjour,
      j’ai lis l’article bien et quant j’écris la balise <galleria12> dans la zone de texte il ma donnée ce erreur

      Erreur non prévue :
      [CKEDITOR.editor] The instance « text_area » already exists.
      j’ai pas compris !!!

  • Le 22 janvier 2013 à 12:46, par Morgane L En réponse à : Galleria guide complet

    Bonjour,

    J’ai suivi votre guide pour créer une galerie photo, quand j’enregistre il me l’affiche correctement avec la galerie photo. Mais quand je vais sur mon site, les photos sont les unes en dessous des autres, quel est le problème ?? Aidez-moi svp

    Merci

    • Le 24 février 2013 à 19:16, par Doville En réponse à : Galleria guide complet

      Bonsoir,

      j’ai eu le même probleme, et j’ai ajouté : #INSERT_HEAD entre la balise

      et

      . Cela permet, d’apres ce que j’ai lu, l’ajout automatique de certains scripts JS

  • Le 10 décembre 2012 à 09:04, par Patriceb75 En réponse à : Galleria guide complet

    Bonjour,
    J’aimerais savoir s’il est possible d’afficher sur la page d’accueil (squelette sommaire.html) un diaporama Galleria avec les images contenues dans un article. Si oui, ou puis-je trouver le code à intégrer ? Merci
    Cordialement
    — 
    Patrice

    • Le 10 décembre 2012 à 10:13, par Patriceb75 En réponse à : Galleria guide complet

      Bonjour,
      Bon j’ai résolu la question précédente (j’étais pas bien réveillé, désolé) mais maintenant, je n’arrive à rien sur la modif de l’habillage CSS du diaporama. Je modifie les styles déclarés dans la feuille ’galleria.classic.css’ (+vider cache+recalcul) et cela n’a aucun effet sur l’affichage ??? J’ai manqué quelques chose ? Merci
      Cordialement
      — 
      Patrice

  • Le 12 novembre 2012 à 21:31, par Gus En réponse à : Galleria guide complet

    Bonjour,

    Je souhaiterais que ne soit affiché que quelques images de l’article et pas toutes avec galeria.

    Comment puis-je faire ?

    Merci d’avance

    • Le 12 novembre 2012 à 23:27, par emthanh En réponse à : Galleria guide complet

      Bonjour,
      Le plugin prend les images dans l’article . Vous pouvez déplacer les images dans le porfolio.
      Il n’y a pas d’autre moyen

  • Le 30 octobre 2012 à 11:01, par Rima En réponse à : Galleria guide complet

    Bonjour,
    J’utilise galleria avec SPIP3 et je souhaiterais que les images apparaissent de la plus récente à la plus ancienne. Y a-t-il une option à activer pour cela ?

    Cordialement.

    • Le 30 octobre 2012 à 21:02, par emthanh En réponse à : Galleria guide complet

      Bonjour,
      On ne peut pas classer les images , l’ordre par défaut est celui des fichiers . Ce comportement convient bien pour importer des images d’un appareil photo qui ont des noms comprenant une date.

      Cordialement

  • Le 22 octobre 2012 à 12:24, par michel80 En réponse à : Galleria guide complet

    Pour l’erreur des diaporamas de + 30 photos, j’ai réduit la taille de 1024 à 800 pixels
    pas de changement donc des erreurs lors de l’affichage de la 2e série,comment pouvons nous modifier la valeur pagesize dans spip 3.0.5 avec squelette eva 4.2.
    Merci pour votre aide
    Michel

    • Le 22 octobre 2012 à 19:38, par emthanh En réponse à : Galleria guide complet

      Bonjour,
      pagesize est une option de galleria.Vous pouvez l’activer . ex :
      <galleria12|pagesize=20>
      Cordialement

  • Le 21 octobre 2012 à 19:50, par michel80 En réponse à : Galleria guide complet

    J’utilise depuis peu Galleria dans un SPIP 3.0.5 et eva 4.2 cela fonctionne bien
    sauf lorsque le diaporama d’un article dépasse 30 photos
    il y a des séparateurs ainsi
    0 | 30 | 60
    L’affichage automatique se déroule parfaitement pour la 1re série pour les suivantes un message d’erreur s’affiche en haut de la grande photo
    Fatal error Could not extract a stage height from the CSS trace height 0px
    pouvez vous m’aider ?
    Michel

    • Le 21 octobre 2012 à 22:16, par emthanh En réponse à : Galleria guide complet

      Bonjour,
      Le fonctionnement que vous décrivez avec les séparateurs est normal.En effet les galeries sont paginée par défaut par 30 images.
      Vous pouvez accédez aux images des pages suivantes en cliquant sur les indexes. Pour des pages 0 | 30 | 60 , on accède aux images 0-29 | 30-59 | 60 +
      Vous pouvez changer ce comportement avec l’option pagesize.

      L’autre erreur est du à une taille trop importante de vos images. Le script Galleria scanne chaque image dans sa plage.
      Vous pouvez soit réduire la taille des images , ou réduire la valeur pagesize de votre galerie.

  • Le 7 septembre 2012 à 14:11, par spipnaute En réponse à : Galleria guide complet

    Bonjour,
    J’ai installé le plugin mais tout ce que j’obtiens à la place ou devrait apparaître la galerie c’est le texte (galleria64) en forme de lien qui m’envoie à la page d’accueil.

    Je travaille avec Spip 2.0.9 . J’ai trois plugins installés : cfg, Menus déroulants Babbibel et Pages. Les biothèques installées sont

    JavaScriptPacker
    ecrire/lib/
    jquery.ui-1.6
    ecrire/lib/
    safehtml
    ecrire/lib/

    Manquerait-il quelque chose à ma config ?

    A l’ide !

Retour en haut de la page

Ça discute par ici

  • Mailsubscribers

    16 janvier 2013 – 274 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes (...)

  • noiZetier v2

    9 novembre 2012 – 36 commentaires

    Le noiZetier offre une interface d’administration permettant d’insérer au choix des éléments modulaires de squelettes (noisettes) et de les ajouter ainsi à ses squelettes. Compatibilité La version 2 du noizetier fonctionne sous SPIP 3. Elle est (...)

  • cirr : plugin « rédacteur restreint »

    29 octobre 2010 – 60 commentaires

    Ce plugin « cirr : rédacteur restreint » permet d’affecter des rubriques aux rédacteurs et modifie les droits afin qu’un rédacteur restreint (ou un administrateur restreint) voit dans l’espace privé uniquement les rubriques qui lui sont affectées (et leur (...)

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

Ça spipe par là