1 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Tutoriel pour le Plugin Diaporama
Développeur du plugin : Jeanmi Site web : http://www.jmmis.com/
Plan du tutoriel
But de ce tutoriel : Le plugin Diaporama permet la présentation des photos sur votre site. Il offre de nombreuses possibilités de
configuration. Ce tutoriel simplifié a pour but de vous guider pour accéder à sa prise en main rapide.
Sur le site de Jeanmi, vous trouverez toute la description complète et détaillée des larges possibilités que vous propose Diaporama.
Remarque importante avant de commencer : La démarche décrite dans le paragraphe 2 sera à exécuter pour un site GuppyEcole4.6.14
(ou un autre Guppy) qui ne contient pas le plugin Diaporama. En revanche, pour les packs clé en main Nature, Neige ou Mer, le plugin
diaporama y est déjà intégré ! Pour les utilisateurs de ces derniers, rendez-vous directement au paragraphe 3.
1. Fonctionnalités du plugin Diaporama et remarque sur la librairie GD2
2. Télécharger et installer Diaporama.
a. Télécharger
b. Décompresser l’archive et extraire son contenu
c. Installer par FTP
3. Paramétrer Diaporama : 2 méthodes présentées ici. 3.1 .Méthode simple par l’interface de Guppy
3.1.a. Créer les répertoires dans votre site pour stocker les images pour le
diaporama
3.1.b. Configurer le plugin pour tous les diaporamas
menu et options
icône et accueil
accès réservé aux membres
3.1.c . Créer un nouveau diaporama et le configurer : nom du diaporama, nom
des répertoires, taille des vignettes. Les boites latérales et les boites pour un
affichage en surimpression
3.1.d. Télécharger les photos sur le site Jusqu’à 5 photos à la fois à partir de
l’interface du plugin Diaporama dans l’admin
3.2 . Méthode avancée par FTP
3.2.a. Créer les répertoires pour stocker les images pour le diaporama dans
votre site
3.2.b. Télécharger en grand nombre par FTP
3.2.c. Générer les vignettes
3.3 Avantages et inconvénients de chaque méthode
4 Commenter le diaporama
Remplir ou modifier des commentaires
5 Regarder le diaporama
2 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
1. Quelles fonctionnalités apporte le plugin Diaporama ?
Le plugin Diaporama permet de proposer aux visiteurs de votre site une présentation des photos commentées
en surimpression et en plein écran, de manière confortable, ludique et fonctionnelle (4 présentations possibles :
popup, LightBox , Lytebox ou Jquery.LightBox).
Il est possible de créer plusieurs diaporamas.
La page d’accueil diaporama :
Sur la page d’accueil diaporama, les diaporamas sont classés par catégorie dans une page centrale du site,
affichant pour chacun d’eux un aperçu du contenu, sous forme de micro-vignettes (générées par le plugin) :
Un menu en boite latérale regroupe également ces catégories, si on le souhaite :
La page du diaporama
En un clic sur un titre de diaporama, le visiteur arrive sur la page
du diaporama ainsi choisi.
Sur cette page, la collection de photos s’affiche sous la forme de
photos en taille réduite ou vignettes que le plugin génère sur
simple commande.
Lorsque le visiteur clique sur une des vignettes, le diaporama s’affiche en surimpression. Voir image ci-dessous.
3 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Exemple de présentation du diaporama en surimpression (configuration avec la boite « Lytebox ») :
« Boite slideShow latérale »
Il est possible de rajouter une boite « Slideshow » latérale dans laquelle les vignettes
défilent en permanence.
Un simple clic dans cette boite et on arrive sur la page diaporama.
Icône dans le menu du haut : L’accès au diaporama se fait aussi si on le souhaite, par une icône dans la barre de
menu du haut ou latéral.
Remarque sur la librairie GD2 relative à la création des vignettes et micro-
vignettes :
Le support de la librairie GD2 doit être présent. Le plugin pourra cependant
fonctionner, mais il ne pourra pas créer automatiquement les vignettes
associées aux photos. Le support de cette librairie n’est pas assuré par tous les
hébergeurs. Au bas de chaque page d’administration du plugin, un message vous
avertit si la librairie GD2 est bien disponible.
4 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Si ce support n’est pas présent, il faudra alors créer les vignettes sur votre ordi avec un logiciel de retouche
(ex Photofiltre gratuit) à la bonne taille, ex : 100 px de large et les télécharger dans le dossier dédié dans votre
site.
Retour sommaire
2. Télécharger et installer Diaporama
a) Télécharger
RDV sur le site de Jeanmi : http://www.jmmis.com/download.php?lng=fr
Cliquez sur Plugin Diaporama, puis sur la disquette pour lancer le téléchargement.
b) Décompresser l’archive du plugin puis extraire son contenu.
Décompresser :
Le fichier téléchargé porte l’extension .zip, c’est une archive compressée. Il vous faut la décompresser
avec un logiciel de décompression (ex : winZip, ou 7 Zip, ou l’utilitaire de décompression de Windows).
Rendez-vous dans le dossier dans lequel vous avez téléchargé Plugin Diaporama. Double-cliquez sur
l’archive nommée : plg_diaporama_4631.zip
Suivant l’utilitaire présent sur votre ordinateur, une fenêtre s’ouvre, vous voyez alors le contenu de
l’archive : 4 répertoires et de 2 fichiers « lisez-moi ». Le fichier lisezmoi.txt contient la
documentation en français sur le plugin, l’autre .txt est en anglais.
Extraire l’ensemble des répertoires et des fichiers : choisissez dans votre logiciel de
décompression le bouton « Extraire », ou « Extraire vers », ou « Extract to ». Une fenêtre s’ouvre,
choisissez un dossier de destination.
Par exemple : mes documents\Guppy_mon_site\plugin_diaporama. Cliquez sur OK. Votre plugin
diaporama est stocké sur votre disque dur prêt à être envoyé chez votre hébergeur à l’aide d’un logiciel
FTP.
c) Installer par FTP
Pour installer le plugin sur votre site, vous devez avoir
installé sur votre ordinateur un logiciel FTP (File Transfert
Protocol). Dans cet exemple, il s’agit de FileZilla : http://www.filezilla.fr
Il suffit de transférer les 4 répertoires admin, data, inc et plugins chez votre hébergeur.
Pour savoir comment configurer et utiliser FileZilla,
reportez-vous à notre tutoriel « Comment installer
votre site en ligne ? » téléchargeable ici sur
GuppYed.org :
http://guppyed.org/file/tuto_mettre_site_en_ligne.p
df
ou sur FreeGuppy.org : www.freeuppy.org
5 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Lancer la connexion avec FileZilla :
Vérification de l’installation du plugin.
Accéder à l’administration de votre site. Regardez vers le bas de la page dans la zone des plugins : une
nouvelle icône correspondant au plugin diaporama s’est affichée. Vous cliquerez dessus pour accéder
à l’administration et à la configuration du plugin.
Glisser-déposez le dossier admin,
puis le dossier data, puis inc et
enfin plugin. Le contenu du dossier
admin du plugin s’insérera dans le
dossier admin présent sur le site, de
même pour les autres dossiers.
… Ici !
De là, vers …
6 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Retour sommaire
3. Paramétrer Diaporama
Pour pouvoir fonctionner, le plugin doit « aller chercher » vos photos dans un répertoire précis de votre site
pour pouvoir les afficher sur l’écran du visiteur. Certes, il existe un répertoire « photo » dans tous les sites
Guppy, dont le vôtre, cependant je vous
conseille d’en dédier un pour tous les
diaporamas à l’intérieur duquel sera chaque dossier
de chaque diaporama. Vous allez donc les créer,
au choix soit, par l’interface de Guppy –méthode simple- soit en utilisant votre logiciel FTP FileZilla –méthode
avancée. Les 2méthodes sont décrites dans ce tuto.
Tout d’abord, posons l’organisation des dossiers en question :
Imaginons par exemple, que nous souhaitons créer un diaporama pour présenter les dessins des élèves de CP
illustrant des poésies et un autre pour les photos de la sortie en montagne.
Nous allons créer un répertoire pour tous les diaporamas à la racine de votre site que nous appellerons
diaporama et à l’intérieur duquel nous créerons : diaporama_poesie_cp, et diaporama_sortie_montagne ainsi
que 2 autres sous-dossiers à l’intérieur de ces derniers : un pour les photos que nous appellerons photos et un
pour que le plugin y stocke ses vignettes créées associées aux photos, que nous appellerons vignettes.
Voilà représentée en image l’arborescence que nous allons créer dans votre site :
Retour sommaire
Conseil : Choisissez de préférence un nom évocateur pour
votre dossier, surtout si vous avez plusieurs diaporamas, donc
plusieurs dossiers correspondants par la suite. Il vaut mieux
être organisé !
7 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
3.1 Méthode simple par l’interface de Guppy
3.1.a. Créer les répertoires dans votre site pour stocker les images pour le
diaporama
Connectez-vous dans l’admin de votre site >> cliquez sur l’icône Fichiers :
Vous arrivez sur la page de gestion des fichiers :
On veut aller à la racine du site :
En bas de la page de gestion, repérez cette zone pour créer de nouveaux dossiers ou appelés aussi répertoires
dans votre site :
Création du dossier diaporama
Entrez un nom de répertoire : dans notre exemple : diaporama
Cliquez sur le menu
déroulant et choisissez :
racine
Le menu est positionné sur file.
Vous voyez ici la liste des dossiers
stockés dans racine qui constituent le
contenu de votre site.
8 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Et cliquez sur Créer.
Le dossier diaporama se positionne dans la liste :
Création du sous-dossier diaporama_poesie_cp
Cliquez sur ce dossier diaporama, il s’ouvre, il est vide bien sûr !
De même que précédemment, créez un nouveau répertoire dans le dossier diaporama :
Cliquez sur Créer.
Le sous-dossier diaporama_poesie_cp vient se positionner dans le dossier diaporama :
9 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Création des 2 sous-sous-répertoires photos et vignettes.
A l’intérieur de diaporama_poesie_cp, il faut maintenant créer 2 sous-dossiers un pour les photos et un
autre pour les vignettes :
Cliquez pour ouvrir diaporama_poesie_cp et créez vos 2 sous répertoires photos et vignettes selon la
même procédure.
Vous obtenez ceci :
Rappel pour compréhension de l’arborescence ainsi créée dans votre site:
Les photos pour le diaporama des CP seront-donc à stocker par téléchargement ici. Nous verrons cela par la
suite.
Partons maintenant dans la configuration du plugin Diaporama.
3.1.b. Configurer le plugin pour tous les diaporamas
Configurer menu et options
Configurer icône et accueil
Configurer l’accès réservé aux membres
Connectez vous dans l’admin de votre site>> Zone en bas « Administration des plugins » >> Diaporama
On a ici le chemin complet créé : on est
dans diaporama, sous répertoire
diaporama_poesie_cp
On a ici le contenu de
diaporama_poesie_cp : les 2
sous-sous-répertoires, un pour
les photos du diaporama et un
autre pour les vignettes. Ouvrir
Renommer un dossier ou un fichier
Supprimer un dossier ou un fichier ATTENTION
à cette action !!!
1.
2. Cliquez ici pour
accéder au dossier
parent
A quelle adresse seront les images ???
Adresses des images pour configurer le plugin diaporama, à inscrire dans l’admin config de Diaporama (configuration que
nous verrons ensuite)
Le dossier de destination des photos aura l’adresse suivante : diaporama/diaporama_poesie_cp/photos
(sans / devant)
L’adresse du dossier de destination des vignettes sera : diaporama/diaporama_poesie_cp/vignettes
(sans / devant)
10 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Vous arrivez sur la page d’administration du plugin :
Le plugin vous indique : « Aucun diaporama à gérer »
Normal, puisque nous n’en avons pas encore créé !
Configurer menu et options
Cliquez sur : Configurer menu et options
Vous arrivez sur cette page pleine de zones de saisie et de cases à cocher.
Les paramètres de cette page détermineront l’aspect, le fonctionnement, les services du plugin commun à tous
les diaporamas.
Je vous donne là une configuration
mais vous pourrez faire des essais
différents par la suite.
11 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Saisissez et/ou choisissez les éléments suivants pour chaque partie :
Configuration de la boite latérale Menu.
Donnez un nom à cette boite, par exemple : Galerie Pour bénéficier de cet affichage latéral, il ne
faudra pas oublier de sélectionner ensuite dans Admin >> Config Boites>> Boites latérales : la
boite Diaporama : boite menu !!!!
Configuration de la boite latérale « Slide Show », celle dans laquelle défilent les vignettes en
permanence sur votre site. Pour bénéficier de cet affichage latéral, il ne faudra pas oublier de
sélectionner ensuite dans Admin >> Config Boites>> Boites latérales : la boite slide Show !!!!
Pour l’instant, vous ne pourrez choisir que les vignettes de « diaporama choisi au hasard », puisque vous n’en
avez créé aucun. Vous aurez ensuite le choix, soit de choisir au hasard, soit de choisir un diaporama en
particulier.
Pour la taille de la boite, laissez à 160.
Choisissez un nombre maximal de vignettes, ici 20.
Laissez « Choix du titre de la boite Slide Show » à Titre du diaporama affiché.
Vous pouvez saisir une info bulle pour la boite, ici, « Nos œuvres, nos sorties ».
Configuration des options générales des pages Diaporama
Choisissez les cases à cocher en fonction de ce que vous souhaitez voir afficher.
Dans notre exemple, on ne souhaite que l’affichage du compteur de visites.
12 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
A noter : Si vous souhaitez réserver les diaporamas aux membres uniquement, il est nécessaire de l’avoir paramétré dans
l’Admin du site. Admin>>Gestion zone membres >>Config zone membres >>Cochez la case en haut «Gestion en zone
membres », puis enregistrez. Ensuite, affichez sur votre site, la boite permettant aux membres de s’inscrire !Admin>>Config
boites>> Colonnes boites gauche ou droite>> Sélectionnez « Boite préférences ».
Configurer l’accès réservé aux membres
Configuration de la gestion « Membres »
Cette dernière zone conditionne l’accès réservé aux membres ou au contraire visible par tous.
Dans notre exemple, nous laissons la possibilité à tous de voir les diaporamas.
Mais dans l’inverse, choisissez l’option déroulante : « Accès libre pour les seuls membres » cela
conditionnera l’accès réservé pour TOUS les diaporamas.
Ou, autre choix d’option déroulante : « Accès défini diaporama par diaporama » cela conditionnera
l’accès réservé pour tel ou tel diaporama en particulier dont vous aurez défini ensuite la restriction
membres.
Cliquez enfin sur le bouton
Retour sommaire
Configurer l’icône et l’accueil.
Cliquez sur : Retour diaporama
Puis :
Cliquez sur : Configurer l’icône et l’accueil
Mettre une icône Diaporama dans la barre de menu du haut ou menu latéral.
Sur cette page, vous pouvez décider de mettre une icône dans la barre de menu.
Repérez en haut de la page :
Accès par la barre d'icônes : Ajouter dans la barre d'icônes
13 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Cliquez sur la phrase en bleu pour faire apparaître l’icône.
Voilà ce que ça donne :
Pour changer le texte de l’icône dans le
menu qui par défaut est Diaporama, saisissez
dans la zone prévue « Texte sous l’icône »,
par exemple : Galerie photos, puis cliquez sur
enregistrer :
Quant à l’image œil dont le nom est : diaporama.gif, elle est stockée dans
plugins/diaporama/img
Vous pouvez la remplacer par une image de votre choix mais de même taille
(32px x 32px) et qui aura le même nom.
Ce que j’ai fait ci-dessous :
Continuons la configuration de la page icône et accueil de tous les diaporamas (vous pouvez suivre l’exemple
donné ici et, faire plus tard des modifications à votre convenance) :
Paramètres de la page d’accueil de tous les diaporamas :
Saisissez le titre de la page centrale : Menu des diaporamas
Laissez à 3 micro-vignettes et taille à 50 et nombre diaporama à 0.
14 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Lien de retour vers la page d’accueil de tous les diaporamas :
Choisissez la position du lien retour et donnez-lui un nom, ici en exemple : Retour menu diaporama
Note sur les pages d’accueil et de diaporama : vous pouvez choisir de saisir une note qui
apparaitra en haut (ou en bas) de la page d’accueil des diaporamas ou/et dans les diaporamas,
ou pas de note du tout. Dans cet exemple : photos prises par les enseignants de l’école.
Mode d’affichage des boites latérales.
Cette partie concerne les boites latérales déjà présentes sur votre site Guppyecole qui se
présentent en 2 colonnes : les boites articles, menu, boites libres, fiches, compteur… Il est
possible de ne pas les afficher du tout lorsque les visiteurs seront sur la page d’accueil
diaporama ou de les afficher en une seule colonne, ou qu’une partie seulement…
Dans cet exemple, nous choisissons pour la page d’accueil de tous les diaporamas un affichage
avec toutes les colonnes du même côté à gauche. Idem pour mode affichage en page
diaporama.
Vous cliquez enfin sur Enregistrer la config
Nous allons maintenant créer un nouveau diaporama.
Retour sommaire
15 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
3.1.c . Créer un nouveau diaporama et le configurer :
nom du diaporama, nom des répertoires, taille des vignettes.
Les boites latérales et les boites relatives à l’affichage en surimpression
Cliquez sur : Retour diaporama
Puis sur : Créer un nouveau diaporama
Dans la page qui s’affiche, nous allons entrer les paramètres pour le diaporama que nous souhaitons créer,
rappelez-vous : diaporama poésie CP
Paramétrage obligatoire.
Attention ! ces quatre paramètres doivent être obligatoirement remplis pour que le diaporama
puisse fonctionner !
Vous devrez ici saisir le chemin du répertoire des vignettes et de celui des photos. Pour rappel :
diaporama/diaporama_poesie_cp/vignettes
diaporama/diaporama_poesie_cp/photos
Saisissez un titre et un nom de catégorie :
Paramétrage du sous-titre :
Si vous souhaitez un sous-titre, cochez la case et saisissez un sous-titre, ex : « Tous les dessins
des CP »
Paramétrage du tableau (dimensions et contenus) :
Entrez la largeur souhaitée des vignettes et le nombre de colonnes du tableau, dans cet
exemple, 120 et 3 colonnes sur 3 lignes.
Cochez les cases relatives à l’affichage du commentaire
Remplissage de l’attribut Alt : choisir « rempli avec le commentaire ».
16 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Choix du mode d’agrandissement des vignettes :
Il s’agit de choisir le mode d’affichage des photos en surimpression. Dans cet exemple : Par
l’utilisation de LyteBox.
Paramétrage de la fenêtre Popup : ne remplissez rien ici, car vous n’avez pas sélectionné « Par
ouverture d’une fenêtre Popup » dans la partie précédente.
Paramétrage du tableau (couleurs et encadrements), laissez les valeurs par défaut :
17 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Paramétrage de la gestion de la zone membres : dans cet exemple on veut que tous les visiteurs
puissent accéder au diaporama. NE cochez donc pas la case.
Si vous souhaitez à l’inverse, que le diaporama ne soit visible qu’aux membres inscrits, cochez la
case. Il est nécessaire pour cela, d’avoir paramétré la zone membres dans l’admin de GuppyEcole
et d’avoir affiché sur le site la boite préférences, comme déjà expliqué plus haut.
Cliquez enfin sur « Enregistrer la config ».
Votre nouveau diaporama est paramétré.
Cliquez sur « retour diaporama », vous voyez votre diaporama bien inscrit dans la liste :
Voyons maintenant comment choisir et télécharger les photos de ce diaporama.
Retour sommaire
18 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Choix des images. Remarque sur l’extension et la taille des images : Vos
images devront être enregistrées en .jpg ou en .png. Veillez à ce qu’elles ne
soient pas d’une taille démesurée ! Pensez que le visiteur verra les images en
plein écran sur son ordi, plus les images sont grandes avec une forte
résolution, plus elles sont « lourdes » et plus elles mettront du temps à
s’afficher et moins elles contiendront dans l’écran ! CQFD. Une taille
« standard » : < ou = à 800px par 600px.
3.1.d. Télécharger les photos sur le site Jusqu’à 5 photos à la fois à partir de
l’interface du plugin Diaporama dans l’admin
Sur la ligne poésie, vous voyez 3 actions possibles
et 4 commandes possibles représentées par des
icônes. Passez la souris sur chacune et l’infobulle
vous informe de quoi il s’agit.
Cliquez sur l’icône « Charger les images et créer les vignettes du diaporama » :
Vous arrivez sur cette page de téléchargements des images, vous pouvez télécharger 5 images à la fois au
maximum :
En haut de cette page, pour rappel :
les répertoires de destination des
images (des photos) et des vignettes
que vous avez créés puis auparavant,
ainsi que la taille de la dimension des
vignettes : 120
Les options de téléchargement des
images : cochez chargement avec
création des vignettes (nécessité
d’avoir le support GD2 comme
expliqué plus haut)
Cliquez sur Parcourir pour télécharger
chaque image ou photo et retrouvez le
chemin de ces photos sur le disque dur
de votre ordi. Vous savez bien où vous
les avez rangées quand-même !
Enfin, cliquez sur « Lancer les
téléchargements »
19 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
La page se charge et un message vous indique que tout s’est bien passé :
Si vous souhaitez charger d’autres images, cliquez sur « Retour en page de chargement» et renouvelez
l’opération.
Pour remplir les commentaires de vos photos, cliquez sur « Retour diaporama », puis sur l’icône : et
reportez-vous à la partie 4 de ce tuto.
Retour sommaire
3.2 . Méthode avancée par FTP
3.2.a. Créer les répertoires pour stocker les images pour le diaporama dans votre
site
Cette méthode peut paraître aux novices plus compliquée ou risquée, cependant, il me
semble nécessaire que vous appreniez à utiliser FileZilla. Vous aurez besoin d’utiliser
FileZilla tôt ou tard pour effecteur des transferts sur votre site, installer de nouveaux
plugins, faire des sauvegardes, alors autant vous initier à son utilisation.
Lancer FileZilla et connectez-vous sur votre site.
FileZilla se présente 2 parties principales droite (chez l’hébergeur) et gauche (dans votre
ordi) permettant d’explorer les contenus des dossiers comme votre explorateur de
dossiers dans votre ordi.
Dans la partie de droite, la liste de tous vos répertoires ou dossiers et fichiers qui
constituent tout votre site est affichée. img1.
20 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Création du nouveau dossier diaporama :
Positionnez votre curseur de souris dans une zone blanche Voir img2.
Cliquez avec le bouton de droite de votre souris à cet endroit puis choisissez dans le menu
contextuel : créer un dossier. Img2
Img2
Une petite boite s’ouvre :
Tapez dans la zone de saisie le
nom de dossier pour tous les
diaporamas, puis cliquez sur OK.
Dans notre exemple : diaporama
Le nouveau dossier diaporama, s’insère dans la liste des répertoires sur le site :
img1
Cliquez avec le bouton de droite de la souris. Un menu contextuel apparait.
Choisissez Créer un dossier
21 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Création d’un sous-dossier diaporama_poesie_cp
Dans le dossier diaporama, nous allons créer le dossier spécifique au diaporama :
diaporama_poesie_cp
Double-cliquez sur le dossier diaporama pour l’ouvrir : img3
Img 3
Saisissez diaporama_poesie_cp puis cliquez sur OK.
Le dossier se positionne dans le dossier diaporama :
On est bien dans le dossier diaporama.
FileZilla vous indique que le dossier diaporama est vide.
Cliquez avec le bouton de droite dans cette zone vide : suivant la
même procédure que précédemment : menu contextuel, créer un
nouveau dossier
22 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Création des 2 sous-sous-dossiers photos et vignettes
Puis dans ce dernier dossier diaporama_poesie_cp : création de 2 autres sous-dossiers photos et
vignettes toujours avec la même procédure.
Double_cliquez sur diaporama_poesie_cp pour l’ouvrir à son tour, puis bouton de droite dans la
zone vide, créer un dossier, petite boite.
Le sous-dossier photos se positionne dans diaporama_poesie_cp :
Créez dans le dossier diaporama_poesie_cp un second sous-répertoire : vignettes selon la même
procédure que précédemment pour photos.
On est bien dans le dossier diaporama.
Dossier qu’on vient de créer.
On est dans le dossier
diaporama_poesie_cp, lui-même dans le
dossier diaporama.
Saisissez dans la zone qui se sera mise en
surbrillance : photos
Cliquez sur OK.
23 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Voilà l’arborescence créée dans le site pour stocker le diaporama poésie des CP :
Astuce pour simplifier l’utilisation du FTP : il est aussi possible de créer cette arborescence en local sur votre
ordi, puis de transférer cette arborescence complète sur votre site.
Vous pourrez choisir la procédure qui vous conviendra le mieux, création en ligne ou en local.
Exercice !!! Créez le dossier diaporama_sortie_montagne avec ses 2 sous-répertoires photos et vignettes
suivant la même procédure que pour le dossier diaporama_poesie_cp
Au final, vous devez obtenir ceci :
Bravo ! Vous avez réussi !!!
Nous allons maintenant voir comment télécharger des photos sur votre site en utilisant le FTP.
Retour sommaire
Vous êtes bien dans le dossier
diaporama.
Qui contient 2 autres dossiers.
Un pour les poésies des cp
Et un pour la sortie montagne.
Et dans chacun d’eux, il y a bien les 2
sous-dossiers photos et vignettes.
24 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
2. Descendez dans l’arborescence de votre ordi pour
retrouver le dossier de stockage de vos images à
télécharger. Double-cliquez sur le dossier pour l’ouvrir
et voir son contenu en dessous.
3.2.b. Télécharger les photos en grand nombre par FTP
File Zilla est lancé et la connexion à votre site est ouverte.
1. Dans la partie de droite, sur le site, chez votre
hébergeur, ouvrez par double clic le répertoire
diaporama, puis diaporama_poesie_CP.
A l’intérieur les 2 sous-dossiers : photos et vignettes.
Visibles dans la partie du haut et en dessous dans la
zone de téléchargements.
De là, vers …
…Ici !
3. Sélectionnez l’ensemble de toutes les
images dans le dossier de votre ordi, puis
effectuez un glissé-déposé dans le dossier
photos du diaporama poésie CP
(diaporama/diaporama_poesie_cp/photos ).
Le téléchargement se lance.
25 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Lorsque le téléchargement est terminé, vous double-cliquez ensuite sur le dossier photos pour
l’ouvrir et vous constatez que les images sont bien téléchargées sur votre site :
Retour sommaire
3.2.c. Générer les vignettes
Avec cette méthode, les vignettes ne sont pas créées par le plugin. Il faut le faire maintenant.
Allez dans Admin>>Diaporama>> Sur la ligne correspondante au diaporama, cliquez sur « Gérer les
images du diaporama »
Sur cette page, vous voyez la liste de toutes les images que vous venez de télécharger qui seront
réduites en vignettes. La colonne vignettes est pour l’instant vide. En face chaque image : une case à
cocher vide, une croix rouge pour supprimer, puis une case déjà cochée par défaut et une icône image
pour créer la vignette. On veut créer toutes les vignettes, il faut que tout soit coché :
Cliquez sur le bouton « Valider les actions ».
26 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Les vignettes sont maintenant créées. La colonne vignettes est complétée.
A noter : pour des actions en bloc, des boutons sont prévus : pour supprimer toutes les vignettes ou
pour toutes les (re)générer d’un coup.
Retour sommaire
3.3 Avantages et inconvénients de chaque méthode
Avantages de la méthode simple par l’interface de Guppy :
Utiliser une interface intuitive et se l’approprier facilement.
Moins de crainte par l’utilisateur débutant de faire des erreurs de manip dans l’admin « Fichiers ». En effet, s’il
clique par mégarde sur l’icône « Supprimer », Guppy affiche un message en surimpression, l’avertissant que la
suppression est irréversible. Il est toujours temps de ne pas poursuivre dès cet avertissement.
Les vignettes correspondantes aux photos téléchargées peuvent être créées automatiquement par le plugin si
configuré ainsi et si présence du support GD2.
Inconvénients :
Les manip sont plus longues qu’avec le FTP : la page doit se recharger à chaque manip, ex : pour remonter au
dossier parent ou aller dans un autre dossier du site...
Non visibilité globale de l’arborescence des dossiers du site.
Impossibilité de charger plus de 5 photos à la fois par l’interface du plugin dans votre dossier diaporama.
Avantages de la méthode avancée par FTP :
Voir l’arborescence globale des dossiers du site et explorer leur contenu comme dans un explorateur de dossiers
dans votre ordi.
Transférer ou supprimer en grand nombre et rapidement les photos dans les dossiers du site.
S’initier et s’entraîner à l’utilisation du FTP.
27 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Inconvénients :
La nécessité de paramétrer son logiciel avec les login et mot de passe de connexion du site. Ceux envoyés par
l’hébergeur. Pour vous aider, consultez notre tutoriel « Comment mettre son site en ligne », ici
Pour les novices : la crainte de faire des erreurs, des suppressions irrémédiables ! Avec une petite et rapide
expérience, cet « inconvénient » n’en sera plus un pour vous !
Les vignettes ne se générant pas en même temps que le téléchargement, il faut penser aussi à les générer dans
l’admin du plugin. Vous pouvez aussi créer sur votre ordi les images réduites de la même taille que celle
configurée pour les vignettes dans les paramètres du diaporama, puis les télécharger sur le site ensuite.
Voyons comment rédiger les commentaires de chaque image dans le diaporama.
Retour sommaire
4. Commenter le diaporama : Remplir ou modifier des commentaires
Les couples images et vignettes étant créés, vous pouvez maintenant remplir un commentaire pour chaque
photo qui s’affichera lors du diaporama.
Cliquer sur « Retour diaporama ».
Sur la ligne du diaporama, cliquez sur « Modifier les commentaires de ce diaporama ».
Une nouvelle page s’affiche avec des zones de saisie pour chaque photo.
Remplissez vos commentaires. Chaque photo doit avoir son commentaire. Puis cliquez sur « Enregistrer la
config ».
28 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Vous pourrez ensuite autant de fois que nécessaire, revenir sur cette page pour modifier vos commentaires.
Retour sommaire
5. Regarder le diaporama :
Vous pouvez maintenant ainsi que vos visiteurs, admirer votre diaporama !
Cliquez sur l’icône diaporama dans le menu du haut ou latéral de votre site.
Vous arrivez sur la page d’accueil de tous les diaporamas. Pour l’instant, il n’y en a qu’un !
Cliquez sur le titre du diaporama, vous arrivez sur la page d’accueil du diaporama Poésie CP.
Si vous cliquez sur une des vignettes, l’image correspondante s’affiche en surimpression et le
diaporama se lancera à partir de cette image.
Vous pouvez voir chaque commentaire affiché sous l’image, comme nous l’avions configuré plus haut,
il est donc indispensable que chaque image ait son commentaire.
29 Tutoriel réalisé par Lavachequireve site web : www.lavachequireve.fr pour guppyED le 2 Juin 2011
Pour lancer le diaporama en surimpression, cliquez sur une des vignettes et ouvrez vos mirettes
Les images défilent en diaporama toutes accompagnées de leur commentaire. Vous avez à disposition
des boutons : Pause, puis jouer le diaporama ( play), ainsi que précédent (previous en anglais), suivant
(next) et fermeture (close).
A vous maintenant !
Vous pouvez rajouter autant d’images que vous le souhaitez dans un diaporama et en créer de
nouveaux, modifiez la config de chaque diaporama....
Visitez le site du créateur du plugin pour trouver d’autres documentations et un forum d’aide sur
Diaporama : http://www.jmmis.com/
Merci à Jean Mi pour le suivi assuré au cours de la rédaction de ce tutoriel.
Bon diaporama !
Retour sommaire
Top Related