« Photographier la Lune avec un compactHabillage Photoblog amélioré pour b2evolution »

18/10/2012

Un diaporama dans un article de b2evolution

  13:11:00, par   , 1008 mots  
Catégories: Atelier

Cet article décrit un plugin de diaporama (slideshow) pour le blog b2evolution v4 (modifié pour b2evo v5 et v6).

See the english version here.

J'ai précédemment développé une version un peu améliorée du Photoblog de b2evolution (explications sur le forum). Les améliorations portent notamment sur la possibilité 1/ utiliser un lien pour afficher soit un index limité à la catégorie (l'album) en cours soit un index complet et 2/ (non disponible pour la version v5/v6) de contrôler le défilement automatique des photos de la catégorie (de l'album). Pour télécharger le Photoblog amélioré : cliquer ici

Le nouveau plugin

J'ai développé pour mon blog b2evolution un plugin affichant dans un article (un post) un diaporama à partir des fichiers contenus dans un même dossier. Une fonction de rendu (rendering) du plugin facilite l'insertion du diaporama dans un article. Le diaporama ci-dessous est paramétré pour présenter une interface en français, de 240 pixels de large et pour changer de photo toutes les 10 secondes. Voir une autre démo dans le photoblog (clic).

|< < o > >|  
> > > > > >
  + -   ?
Diaporama (delai: 15s)

Au départ l'image est rafraîchie toutes les 30 sec
mais on peut passer à la suivante en cliquant
sur la photo ou faire des réglages avec la barre
de navigation cachée en haut de chaques photo.
 
Pour copier une image arrêter le défilement auto [o]
puis utiliser le bouton droit de la souris ...
 
Pour effacer ce texte : cliquer ici !
 

Voici les principales fonctionnalités du plugin:

  • Insertion d'un diaporama n'importe où dans un article à l'aide d'un code simple similaire aux codes de liens Wikipedia. Deux versions sont disponibles : v1 = avec iframe et v2 = sans iframe (NB seule la version 2 a été adaptée aux version 5/6 ou sup)
  • Le code utilisé ici est par exemple :
    code version 1 = § § fr:10:240:photos/vieille_auto&t=1 § §
    code version 2 = { { fr:10:240:photos/vieille_auto&t=1 } }
    NB ne pas mettre d'espace ! Il y en a ici seulement pour la lisibilité.
  • La langue utilisée pour les messages de service est variable. Le code "fr" dans l'exemple signifie "français"; le code "en" (anglais) est aussi disponible et on peut créer - facilement - des fichiers de traduction pour d'autres langues en utilisant les deux modèles fournis.
  • La vitesse du diaporama est réglable. Le code 10 dans l'exemple signifie 10 secondes entre 2 images; les valeurs possibles vont de 1 à 99 secondes; 0 affiche la première image fixe.
  • La taille de la fenêtre image est réglable. Le code 240 fixe la largeur en pixels de l'image affichée. On dispose de valeurs standard optimisées pour respectivement le photoblog (1024, 800, 720, 620) et les blogs de texte avec barre latérale (450); des valeurs intermédiaires sont possibles entre 100 et 999 pixels.
  • Le chemin conduisant aux images (obligatoirement dans le dossier "media/blogs" qui est implicite) est indiqué après la largeur d'image.
  • La dernière partie du code contient des paramètres optionnels : t=1 indique que le diaporama sera dans le corps du post.
  • Une barre de navigation, partiellement cachée hors des changements d'image, est disponible pour arrêter ou démarrer le diaporama et régler sa vitesse ou pour passer d'une photo à une autre manuellement.
  • Version x.0.1 : on peut passer à la suivante en cliquant sur l'image en cours (cela interrompt le diaporama).
  • Version x.0.2 : on peut passer des paramètres optionnels au plugin.
  • Version x.0.3 : le fait que l'image est dans un diaporama est indiqué par une mention qui s'estompe après 2 secondes.
  • Version x.0.4 : meilleurs contrôle de la taille verticale des image affichées.
  • Version x.1 : on peut passer au plugin le nom d'un fichier texte contenant les noms des fichiers images à afficher ainsi que, optionnellement, pour chaque fichier un titre ou commentaire à placer sous l'image.
  • Version 2.2 : lors de l'affichage d'un post avec diaporama, on suspend un éventuel diaporama de catégorie en cours dans ma version modifiée de la skin photoblog (photojl). Cette suspension n'est pas fonctionnelle en version 1. Le diaporama de catégorie n'est pas fonctionnel pour b2evo v5/v6
  • Version 2.3 : on peut choisir d'afficher le diaporama dans le corps du post (paramètre &t=1) ou en entête (paramètre &t=0) les paramètres sont à ajouter à la fin du code, après le chemin. Nota (obsolète dans la version adaptée v5/v6): ceci ne fonctionne qu'avec ma version modifiée de la skin "photoblog".
  • Version 2.4 : on peut ajouter dans le corps du message un index des fichiers sous forme de vignettes cliquables.
  • Version 3.0 : adaptation à b2evo v5/v6. Des difficultés avec v6.9.3 (problèmes de capture d'évènements ?) ont conduit à suspendre l'affichage du diaporama dans l'image d'entête. À la place, on modifie le lightbox de cette image d'entête pour permettre d'afficher un diaporama incluant les images dont les vignettes sont dans l'index dans le corps de l'article (cf. 2.4).

Un peu de technique : comme je ne suis pas un super expert de b2evolution, j'ai trouvé plus simple de développer une page diaporama qui soit indépendante de b2evo (c'était d'ailleurs avant d'utiliser b2evo). La gestion des fichiers images se fait par du code PHP qui prépare du code HTML dont l'affichage est contrôlé par du javascript. Dans une première version, l'insertion du diaporama HTML dans n'importe quelle page du blog se fait dans un cadre en ligne (iframe). Dans une seconde version, l'insertion se fait directement dans une div. Les deux versions présentent quelques différences, la principale étant que la première version (iframe) permet plusieurs diaporamas dans un même article alors que la seconde version ne peut en insérer qu'un seul par article. Dans les deux cas, cette insertion se fait à l'aide du plugin de rendu (rendering) développé en prenant comme modèle celui des Liens Wikipedia disponible sur le site de b2evo. On a donc uniquement un code court à entrer.

Le plugin et la page diaporama ont été testés avec les principaux navigateurs : MSIE 8 et 9 (et sup.), Firefox 15 (et sup.), Opera 9 (et sup.), Google Chrome.

Téléchargement version 1 avec iframe : cliquer ici.

Téléchargement version 22 sans iframe : cliquer ici.

Téléchargement version 23 permettant de lancer le diarama en tête du post (comme une image liée) : cliquer ici. ATTENTION : cette version ne tourne que dans ma version modifiée du photoblog (voir page suivante - clic).

Une fois le fichier téléchargé, le décompresser dans le dossier portant le même nom que le fichier zip (cela devrait être le comportement par défaut dans Winwdows). Puis copier le dossier dans sa totalité dans le sous dossier "plugins" de votre b2evo. Enfin, installez le plugin depuis la section Admin dans Réglages généraux/Plugins.

Lors de la première utilisation, il peut être nécessaire de valider le formateur de texte (renderer) en cochant la case prévue dans le bas de la colonne de droite quand vous éditez (modifiez) votre post en mode expert.

 Permalien Partagez » Partagez cet article sur Facebook Partagez cet article sur Google+

Adresse de trackback pour ce post

Trackback URL (clic droit et copier le raccourci / l'adresse du lien)

Aucun commentaire pour le moment


Formulaire en cours de chargement...