Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox
EN CHANTIER
Cette page n'est pas terminée et est en cours d'écriture.

(Vous pouvez laisser cette balise le temps de rédiger votre tutoriel. Ainsi les lecteurs seront-ils avertis que le tutoriel n'est pas terminé. Vous pourrez enlever cette balise quand vous aurez fini.)

Créer une galerie d'images sous Silex

Par koala_silex (koala_silex), le 16 novembre 2011

Que ça soit pour un site perso ou un site pro, il peut être utile voire essentiel d'ajouter une galerie d'images à votre site.

Sachez qu'avec Silex vous pouvez procéder de 2 façons :

  • en utilisant le plugin “simple gallery”
  • en utilisant les composants Oof

Chacune ayant ses avantages, nous verrons dans ce tutoriel les 2 façons de procéder.

Pour ce faire, nous allons utiliser les photos suivantes que vous pouvez télécharger ici

Prérequis

Pour pouvoir suivre ce tutoriel vous devez :

  • avoir installé votre Silex server (en ligne ou en local peu importe)
  • avoir crée votre publication
  • être en mode édition

Bon Tuto !

Avec le plugin "Simple Gallery"

Prérequis

Il vous faut :

  • installer le plugin “Simple Gallery” sur votre Silex server
  • activer le plugin “Simple Gallery” pour votre publication

Installer vos images

Pour installer vos images :

  • allez dans le répertoire “media” de votre silex server
  • mettez les photos dans le dossier de votre publication
Si vous n'avez pas encore de dossier pour votre publication dans le répertoire “media” de votre silex server, créez en un (clic droit / nouveau dossier). Nommez le de préférence comme votre publication (question d'organisation)

Importer le plugin "Simple Gallery" dans votre publication

  • Mettez vous sur votre publication en mode édition et ouvrez le wysiwyg.
  • Sélectionnez le calque où vous voulez importer votre galerie.
  • Cliquez sur “ajouter un composant”, sélectionnez “Galerie” et cliquez sur “importer”.

  • La galerie apparaît dans votre publication avec ses images par défaut

Paramétrer votre galerie

Bien entendu, comme pour n'importe quel composant, vous pouvez modifier la taille (largeur et/ou hauteur) et la position (x et/ou y) de votre galerie d'images.

Sélectionnez simplement votre composant “SimpleGallery” pour ouvrir l'éditeur de propriétés.

A noter : dans le cadre de ce tutoriel nous laisserons les paramètres par défaut.

Nous allons ensuite ajouter nos photos.

Pour cela cliquez sur “éditer” au niveau du paramètre “images”

Ceci apparait :

Il vous suffit de mettre l'URL qui mène à vos photos.

Ici il s'agit (voir capture de <installer vos images>) de :

media/ma_publication/photos/image1.JPG

media/ma_publication/photos/image2.JPG

media/ma_publication/photos/image3.JPG

Pour ajouter la 4ème photo, cliquez sur le + en bas de l'éditeur

media/ma_publication/photos/image4.JPG

Cliquez sur valider et le tour est joué !
Vous pouvez mettre autant de photos que vous voulez. Pour cela il vous suffit simplement de cliquer sur le + en bas de l'éditeur pour ajouter autant de lignes que nécessaire.

Les formats reconnus sont les suivants : .jpg ; .jpeg ; .png ; .gif et .swf

Sachez que vous pouvez mettre des URLs extérieurs à votre Silex server. Par exemple : http://www.google.fr/images/logos/ps_logo.png

Chapitre 2

Ici le texte du Chapitre 2

Paragraphe 1

Ici le texte du paragraphe 1 du chapitre 2

Paragraphe 2

Ici le texte du paragraphe 2 du chapitre 2

Conclusion

Ici une conclusion.

Les sources

Vous pouvez proposer au téléchargement tout document qui serait bienvenue pour le lecteur, par exemple le fichier .psd photoshop, le .fla pour flash, etc

Mais vous pouvez aussi proposer ces téléchargements tout au long du tutoriel, et pas seulement à la fin.

En savoir plus

Ici des liens intéressants en rapport avec cet article, des documentations, d'autres tutoriels, etc