Site web : Plan du tutorielien-avirons-etangsale.ac-reunion.fr/fileadmin/user_upload/avirons... · installé sur votre ordinateur un logiciel FTP (File Transfert Protool). Dans et

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

http://www.lavachequireve.fr/

http://www.guppyed.org/

http://www.jmmis.com/



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.




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.




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



http://www.jmmis.com/download.php?lng=fr

http://www.filezilla.fr/

http://guppyed.org/file/tuto_mettre_site_en_ligne.pdf


www.freeuppy.org


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 …




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é !




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.




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 :




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)




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.




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.




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




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.




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




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 ».




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 :




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




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 »




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.




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




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




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.




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.




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.




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 ».




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.




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 ».





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.




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




Documents

Site web : Plan du tutorielien-avirons-etangsale.ac-reunion.fr/fileadmin/user_upload/avirons... · installé sur votre ordinateur un logiciel FTP (File Transfert Protool). Dans et