Le Journal du Blog
Le blog des blogueurs
Le blog des blogueurs
Note de l’équipe du Journal du Blog : Dans le cadre de notre concours d’articles, Noémi vous propose de créer une superbe galerie Flickr pour votre blog.
Pour impressionner vos lecteurs, rien de tel qu’une petite galerie de vos photos Flickr. Mais pas une simple galerie puisqu’il s’agit d’une galerie à base du plugin Fancybox.
Cette galerie peut être ajoutée sur n’importe quel blog pour peu que vous ayez accès au code source. Nous verrons ensuite comment la rendre dynamique pour l’insérer sur votre blog WordPress.
Exemple :
Avant toute chose, vous aurez besoin de télécharger la dernière version de Fancybox, le plugin jQuery façon Lightbox ainsi que le pngFix pour éviter les bugs sur Internet Explorer 6. Enfin, téléchargez le plugin WordPress FlickrRSS.
Nous allons maintenant voir comment mettre en place tous ces éléments pour arriver au résultat voulu.
Pour construite notre superbe galerie de photos Flickr, nous allons utiliser un tutoriel proposé par Web Designer Wall : CSS Decorative Gallery.
Il s’agit avant tout de construire une structure basique en HTML :
[sourcecode language='html']
[/sourcecode]
Voici le code à rajouter dans votre feuille de style (style.css sous WordPress) :
[sourcecode language='css']
body {
font-family: Georgia,sans-serif;
font-size: 14px;
color: #333;
text-align: center;
padding: 20px;
}
.flickr_gallery {
margin: 40px auto 5px;
width: 415px;
}
.flickr_thumb {
background: transparent url(imgs/polaroid.jpg) no-repeat scroll 50% 0;
display: inline;
float: left;
height: 125px;
margin: 15px 10px;
text-align: center;
width: 116px;
position: relative;
}
.flickr_thumb a {
display: block;
height: 100px;
position: relative;
width: 100px;
margin: 8px;
background-position: 50% 50%;
}
.flickr_thumb span {
background: transparent url(imgs/tape.png) no-repeat scroll 50% 0;
height: 25px;
left: 20px;
position: absolute;
top: -10px;
width: 77px;
z-index: 10;
}
.clear {
clear: both;
}
[/sourcecode]
Nous allons à présent installer l’effet zoom Fancybox à notre galerie. Pour cela, ajoutez un lien vers la bibliothèque jQuery, le plugin Fancybox et le plugin pngFix juste avant de fermer la balise <body> . (voir dans le fichier footer.php de votre thème WordPress). Ensuite, ajoutez le code pour installer Fancybox :
[sourcecode language='html']
[/sourcecode]
Il faut également ajouter deux attributs au code HTML des miniatures/thumbnails (rel pour regrouper différentes images dans une même galerie et title pour ajouter une description à la photo) :
[sourcecode language='html']
[/sourcecode]
Pensez à faire en sorte que le CSS de votre Fancybox soit déclaré dans <head>, vous pouvez également l’intégrer dans votre CSS principal.
Afin de rendre la galerie dynamique, c’est à dire que les photos se mettent à jour automatiquement, nous allons utiliser le plugin WordPress FlickrRSS. Rendez-vous dans le panneau d’administration pour paramétrer le plugin. Choisissez les photos à afficher puis remplissez le formulaire de la manière suivante :
Before List:
[sourcecode language='html']
Item HTML:
[sourcecode language='html']
[/sourcecode]
After List:
[sourcecode language='html']
[/sourcecode]
Voilà, votre galerie est terminée. Vous pouvez l’utiliser dans vos Widget pour l’ajouter à votre barre latérale ou bien l’ajouter n’importe où sur votre blog avec le code suivant :
[sourcecode language='php']
get_FlickRSS();
?>
[/sourcecode]
Source : Stefano Verna
Sakacoco (3 years ago)
Si je peux me permettre, pour la fin, ça serait plutôt <?php get_FlickrRSS(); ?> non ?
Romain (3 years ago)
Exact, ça doit être une erreur de copié/collé ^^
Seb (3 years ago)
Heu, en gros, si on est pas administrateur de son blog, comme sous blogspot, on peut se brosser ?
Aurelien (3 years ago)
@Seb : tu peux rajouter des widgets sous Blogger, et faire pas mal de modifications. Pour mettre une galerie Flickr sous Blogger, tu peux créer ton propre widget à l’aide de FlickrSLiDR, qui te permettra d’avoir facilement le code à mettre dans ta barre latérale.
A ce sujet, je répertorie des tutoriaux de Blogger, ce qui peut t’intéresser, la liste sera d’ailleurs très prochainement éditée
Zara (3 years ago)
Très chouette le rendu !
Mes favoris de la semaine #41 (3 years ago)
[...] Une superbe galerie Flickr pour votre blog. Via Le Journal du Blog [...]
Les articles du Concours du Journal du Blog : Le Journal du Blog (3 years ago)
[...] Une superbe galerie Flickr pour votre blog [...]
Raph (3 years ago)
Désolé de revenir sur cet article 6 mois après, mais j’essaye de mettre en place la galerie et franchement je galère (grave).
Certes, je suis un peu une quiche en html/php/css &co mais, ça ne me parait pas clair, notamment où je copie les différents code.
Par exemple : »Ensuite, ajoutez le code pour installer Fancybox : », moi je veux bien, mais où…
Si vous pouviez m’éclairer sur plus en détails sur où copier chacun des codes (sachant que je suis sous wordpress).
Merci !
Nytsee (2 years ago)
on peu tout simplement utiliser la fameuse bibliothèque d’image lightbox.
on met les fichiers js et css a la racine du blog et on rajout ds la balise head de la page index du blog le code qui fait appelle aux elements de cette bibliothéque
par ex:
et c’est ainsi de suite pour les fichiers js..
mt ds [administration] du blog on fait nouveau article on change le mode en HTML
c’est statique mais pratique
Nytsee (2 years ago)
mes explicatios sont sous forme des codes html alors ils sont complétement effacés c’est logique sinon…………!
La liste des plugins Wordpress de Journal du blog | Pascal MIETLICKI (6 months ago)
[...] SyntaxHighlighter 1.1.1 » Matt, Viper007Bond, and mdawaffe (url) Pour afficher du code dans vos articles. Voir par exemple l’article pour afficher une galerie Flickr. [...]