Un loup blessé

Aller au contenu | Aller au menu | Aller à la recherche

Mot-clé - WordPress

Fil des billets - Fil des commentaires

mardi 3 février 2009

Attention : PlayVidZik ne fonctionne pas correctement avec Dailymotion

Il semblerait que j'ai fait une bourde ! Manuellement, vous pouvez supprimer le signe underscore '_' qui apparait en trop dans les codes après insertion ou alors en attendant que je modifie les plugins, vous pouvez faire une petite modification dans le code :

Vous allez modifier le fichier quicktags.js qui se trouve dans le dossier wp-includes

Vous allez modifier le fichier toolbar.js qui se trouve dans le dossier /ecrire/js/

Dans les deux cas, sous DotClear et Wordpress, cherchez cette ligne :


case "2": var inter = permalien.split("/video/"); var stock = inter[1]; var vpID = stock.substr(0,6); break;

et remplacez là par :


case "2": var inter = permalien.split("/video/"); var stock = inter[1]; var vpID = stock.substr(0,5); break;

Avec cette modification, cela devrait fonctionner à nouveau.

Je mettrais les plugins à jour lorsque j'aurais un peu de temps...

lundi 16 juin 2008

Plugin AutoShadowBox et AutoClearBox pour WordPress

Depuis mon billet sur les lightbox-like, certains d'entre vous sous WordPress ont peut être adopté le plugin Shadowbox JS de Matt Martz ou installé mon pack ShadowBox / ClearBox.

Je vous propose d'améliorer le plugin (et mon pack) et de définir que tous les liens qui pointent vers des images (jpg, jpeg, png, gif et bmp), vidéos (flv, mov, wmv et mp4) et les animations flashs (swf) s'ouvrent avec l'effet shadowbox et ceci sans avoir besoin de rajouter le paramètre rel="shadowbox" dans le code par l'ajout d'une fonction "autoshadowbox" ! Si vous préférez la ClearBox, on va faire un "autoclearbox" (mais uniquement sur les images).

En gros, lorsque vous insérez une image (miniature ou de taille moyenne) ou une vidéo par "ajouter un média", c'est un lien qui est rajouté et le morceau de code que je vous propose va inclure tout seul le code pour la shadowbox.

De même, si dans un billet vous insérez plusieurs images, il va les lier dans un album et vous pourrez passer d'une image à l'autre (voire d'une vidéos à l'autre) directement par la box.

Après avoir installé le plugin Shadowbox JS ou mon pack, télécharger ce dossier zippé AutoClearShadow.zip.

Dézippez-le, vous allez obtenir deux fichiers : AutoClearBox.php et AutoShadowBox.php.

Uploadez dans /wp-content/plugins/ l'un des deux suivant que vous souhaitez travailler avec ShadowBox ou avec ClearBox et aller activer le plugin dans votre interface d'administration.

Lorsqu'ensuite dans vos billets vous aurez une image ou une vidéo dans un lien, il s'ouvrira au clic dans un effet shadowbox.

Paramètre intéressant : le rel="shadowbox" ou rel="clearbox" ainsi rajouté n'est pas en dur dans le code des billets mais il est rajouté "à la volée" si bien que si dans quelques temps vous choisissez de ne plus fonctionner avec shadowbox ou clearbox mais avec un autre lightbox-like, en enlevant ce plugin autoshadowbox ou autoclearbox, les rel="shadowbox" et rel="clearbox" disparaissent d'eux mêmes.

Sur le même principe, il est possible d'adapter ce petit bout de code pour un autre lightbox-like, demandez-moi si vous avez besoin d'aide, je peux vous faire un auto"ce que vous voulez" ;-)

Je vous rappelle au passage que la Shadowbox est compatible avec la Lightbox et que si votre blog est déjà rempli de rel="lightbox", la Shadowbox prend le relai si vous désinstallez Lightbox. Pas besoin de revoir tout vos rel="lightbox" en "dur", laissez-les ainsi, shadowbox les interprétera comme des rel="shadowbox" ! J'ai même fait le test avec un lien contenant un rel="lightbox" et mon plugin AutoShadowBox d'activé : c'est Ok, Shadowbox prend toujours le relai !

jeudi 8 mai 2008

Clearbox et Shadowbox en remplacement de Lightbox2

Cela fait plusieurs semaines que je travaille sur ce billet, testant beaucoup de chose afin d'essayer de faire quelque chose d'exhaustif. Attention, ce billet est très long, très lourd, limite insipide par endroit. Aussi, un petit sommaire ne fera pas de mal :

01 Pourquoi abandonner Lightbox2, la référence ?

02 Quels sont les autres possibilités ?

03 Pourquoi avoir choisi Clearbox et Shadowbox ?

04 Tests de ClearBox et ShadowBox

05 Résultats des tests

06 Conclusions ?

07 Comment installer ShadowBox et ClearBox (DotClear 1&2, WordPress) ?

08 Remplacement du plugin LightBox pour DotClear 1

09 Utilisation de ClearBox et ShadowBox

10 Et vous...

Cela vous permettra de lire ce billet en plusieurs fois si vous en avez envie, chaque numéro de "chapitre" est cliquable.

  • Pourquoi abandonner Lightbox2, la référence ?

Parce qu'il est un peu lourd par rapport à ce qu'il fait (Plus de 200Ko tous javascripts confondus). Il est vraiment très bien puisqu'il passe partout (tous les navigateurs de tous les OS) mais ne faire QUE les images, c'est maintenant insuffisant !

  • Quels sont les autres possibilités ?

Il y en a une quantité phénoménale. Après pas mal d'heures à les tester, j'ai retenu Shadowbox et Clearbox. Petit tour rapide sur l'exclusion des autres :

(Cliquez ici si vous n'êtes pas intéressé par cette liste et passer à la suite.)

Lightbox Slideshow : Dérivé de Lightbox, ajout de la fonction slideshow. Toujours avec Prototype, ne fait que les photos.

Extrait Lightbox Slideshow

LightBox 2 de DrMickey utilisant LightBox2 et LightView donne un sildeshow aux coins arrondis, très joli mais toujours sous Prototype.

Extrait LightBox 2 de DrMickey

Un LightBox personnalisé : Avec Moo.Fx mais ne faisant que les photos.

Extrait Lightbox personnalisé

Videobox : Un lightbox pour les vidéos mais sous Mac OS X dans Firefox, aucune vidéo de visible (celle de Google) alors qu'elle est bien visionable si je l'ouvre dans un nouvel onglet.

Extrait Videobox

Lightview : Découvert pour MarcelDugomier sous WordPress, qui n'arrivait pas à installer "simplement" LightBox, le plugin pour WordPress est facile d'utilisation mais depuis, après quelques essais, il s'avère décevant ! En faisant un test sur une vidéo mov en H264, celle-ci est toute aplatie malgré les tailles transmises. De plus, la licence "sans modification possible du script" est gênante. Le summum de l'impossible pour moi : le CSS est INVALIDE et l'auteur ne comprend pas ce que cela veux dire :ouhla:

Extrait Lightview

Lightwindows : L'un des plus intéressant sur le plan des fonctionnalité mais sous prototype et pas de slideshow. Hihihi, les mov ne fonctionnent pas sous Internet Explorer 6 !

Extrait Lightwindows

Moodalbox : Contenu mixte, avec Mootools, pas de slideshow

Extrait Moodalbox

Slightbox : Ne fait apparemment que les photos et pas de slideshow. (Au moment où j'écris, le serveur ne répond plus, je ne peux pas mettre d'extrait :( mais je laisse une place en espérant que le site réponde à nouveau)

Extrait Slightbox

mooSlideBox 3 : Pas convaincu du tout par l'aspect, utilise mootools. L'animation qui surgit par le bas, c'est une bonne idée mais j'ai comme l'impression que mon écran n'est pas utilisé au maximum de ses capacités (et devoir cliquer sur le "close" :( )

Extrait mooSlideBox 3

Slimbox : Clone de Lightbox mais avec Mootools donc plus léger mais ne fait que les images.

Extrait Slimbox

Multibox : Multiformats. Utilise Mootools. Gèle la fenêtre de Firefox sous Mac OS X.

Extrait Multibox

Multifaceted Lightbox : Ne fais pas que les photos mais pas très "multi" non plus. Bouton close obligatoire. Bof !

Extrait Multifaceted Lightbox

Leightbox : Lien close obligatoire. Assez moche selon mes gouts.

Extrait Leightbox

Glassbox : Trop compliqué à utiliser à mon gout.

Extrait Glassbox

SqueezeBox : Si j'ai bien compris, c'est encore en béta, il n'y a pas assez d'explications sur le site pour que je juge le truc. Fonctionne avec Mootools.

Extrait SqueezeBox

MediaBox : Utilise Mootools, multiformat, ne fait pas les images mais possibilité de le coupler avec Slimbox.

Extrait MediaBox

LITbox : L'utilisation ne me convient pas.

Extrait LITbox

LighboxXL : Multiformat. Comme Lightbox, fonctionne avec Prototype.

Extrait LightboxXL

Lighbox++ : Multiformat. Comme Lightbox, fonctionne avec Prototype.

Extrait Lightbox++

PrettyPhoto : N'est pas très beau selon mes gouts et ne fait que les photos. Par contre, jQuery ET le javascript est très petit.

Extrait PrettyPhoto

iBox : Multiformat. Pas de galerie ni de slideshow.

Extrait iBox

SmoothBox : Comme Thickbox mais avec Mootools. Multiformat.

Extrait SmoothBox

jQuery Lightbox : Lightbox en jQuery mais ne fait que les photos, pas de slideshow.

Extrait jQuery Lightbox

HighSlide JS : Très joli mais me parait beaucoup trop compliqué à utiliser ! Multiformat. Bouton close obligatoire.

Extrait HighSlide JS

FrogJS Javascript Gallery : Fonctionne avec Prototype. Uniquement les photos.

Extrait FrogJS Javascript Gallery

GreyBox : Ne me convient pas du tout, j'ai trouvé cela vraiment moche, les boutons de navigation tout en haut ne me plaisent pas non plus. (multiformat)

Extrait GreyBox

GreyBox Redux : Pas très intéressant en dehors de la taille réduite par rapport à l'original.

Extrait GreyBox Redux

Suckerfish Hoverlightbox et Suckerfish Hoverlightbox Redux : Ne me plaisent pas visuellement.

Extrait Suckerfish Hoverlightbox

FrontBox : Ne me plait pas du tout visuellement. (multiformat)

Extrait FrontBox

Slightly ThickerBox : Evolution de ThickBox, sous jQuery. Je trouve cela moche.

Extrait Slightly ThickerBox

Lytebox : Multiformat. J'ai longtemps testé car le slideshow est vraiment très bien mais les lyteframes posent vraiment trop de problèmes suivant les navigateurs utilisés.

Extrait Lytebox

GmapsOverlay : Un lightbox pour les Google Maps, utilisant Mootools.

Extrait GmapsOverlay

SlimBox Extended version : Bof, encore avec Mootools. (multiformat)

Extrait SlimBox Extended version

Bumpbox : Encore avec Mootools, me semblait bien sympa avec l'animation qui "tombe" mais ni le flash ni les pdf ne fonctionne sur ma config !

Extrait Bumpbox

PopBox : Je n'ai pas franchement approfondi le sujet.

Extrait PopBox

FancyBox : Seulement images, en jQuery, pas de Slideshow.

Extrait FancyBox

FancyZoom : Kif Kif et en plus je n'aime pas trop.

Extrait FancyZoom

nyroModal : Très sobre, je n'ai pas vu s'il était possible de faire des slideshows et j'avoue ne pas avoir tout compris. (Utilise jQuery) A étudier ?

Extrait nyroModal

Control.Modal : Pas tout compris non plus. Utilise Prototype.

Extrait Control.Modal

TinyBox : Utilise prototype. Ne semble faire que les photos. Bouton close obligatoire.

Extrait TinyBox

Milkbox : Utilise Mootools, seulement photos, pas de slideshow.

Extrait MilkBox

RoeBox : Combinaison de LightBox et SlimBox, seulement les photos, pas de slideshow.

Extrait RoeBox

Awesome Box : Ne fait que les photos, pas de slideshow.

Extrait Awesome Box

Splash : Je n'aime pas trop les couleurs utilisées pour les boutons mais je note qu'il y a un slideshow. Dommage que les grandes images ne soient pas redimensionnées à la taille de l'écran.

Extrait Splash

Thickbox : Contenu mixte, avec jQuery donc plus léger mais ne fait pas de slideshow. Visuellement, je n'aime pas.

Extrait Thickbox

Facebox : Utilise jQuery mais ne me plait pas visuellement. Possède un slideshow.

Extrait Facebox

  • Pourquoi avoir choisi Clearbox et Shadowbox ?

Shadowbox est compatible avec Lightbox et je n'ai donc pas besoin de changer les codes de mes très nombreuses images, il prend le relai. On peut l'utiliser avec le couple Prototype-Scriptaculous, avec jQuery, avec Mootools... j'ai choisi jQuery car mes essais avec Mootools n'ont pas été satisfaisants et jQuery est plus léger que Prototype-Scriptaculous.

J'ai même essayé avec le Protoculous effect packer gzippé disponible dans le Protopack (28Ko seulement), tout est Ok sur un hébergement 1and1 mais ne marche pas avec un hébergement Free par exemple, donc jQuery est plus à même de convenir à plus de monde.

Clearbox fait de très jolis slideshow et permet d'ouvrir des frames simplement au survol de la souris (choix "click" ou "over").

On retrouve dans un slideshow, la flèche gauche pour reculer d'une image, en haut à gauche le bouton play pour lancer le slideshow, en haut à droite le bouton "close" :

Extrait Slideshow Clearbox 1

Voici la flèche vers la droite pour avancer d'une image et le bouton play qui est devenu un bouton "pause" une fois le slideshow lancé, une barre de défilement avançant au rythme du temps qui reste avant de passer à l'image suivante :

Extrait Slideshow Clearbox 1

En se déplaçant dans la partie inférieure de l'image, les miniatures qui composent la galerie s'affichent avec la possibilité de cliquer pour passer directement à l'image en question :

Extrait Slideshow Clearbox 1

Pour voir le slideshow en action, cliquez sur ce lien, attendez que toute la page soit affichée puis cliquez sur une image de cette galerie.

Clearbox et Shadowbox retaillent les très grandes images qui ne peuvent s'afficher dans votre écran et vous les présentent dans un format compatible avec la résolution de votre écran.

Les frames sur les pages web distantes sont plus sympa avec Shadowbox, les grandes images qui ne doivent pas être retaillées aussi.

Les CSS des deux sont valides W3C et l'ensemble des javascripts Shadowbox+Clearbox ne fait (en Ko) que moins de la moitié de mon Lightbox d'origine.

J'ai rencontré de nombreux scripts où il fallait impérativement cliquer sur le bouton "close" pour quitter alors que ClearBox et ShadowBox (comme beaucoup d'autres) se ferment aussi en cliquant à l'extérieur (dans la zone sombre).

Attention, tout n'est pas parfait non plus avec Shadowbox, les ascenseurs obtenu avec les codes <pre></pre> sont bien masqués (le contenu des box passent au dessus) mais non grisé sous Firefox/Mac OS X. Je positionne donc un ascenseur entre la série des Clearbox et celle des Shadowbox afin de voir. Le problème semble résolu avec Firefox 3 béta 5, à suivre.

  • Tests de ClearBox et ShadowBox

Le plus simple est donc de tester en direct live une certaine quantité de contenu sur différents navigateurs d'OS différents, GO GO GO :

(Cliquez ici si ces tests ne vous intéressent pas et passer à la suite.)

Le flv "seul" (14) n'est pas géré par Clearbox, il est juste là pour vérifier que le navigateur propose de télécharger le fichier. Tandis qu'une des fonctionnalité intéressante de Shadowbox est d'utiliser un FLVplayer intégré.

Je teste sur plusieurs type de vidéos (Youtube, Google...) car lors de mes tests avec LyteBox, j'ai constaté que cela fonctionnait avec YouTube mais pas Google alors que les deux sont pourtant des animations flash.

La page Web de ClearBox est très longue à obtenir car en Hongrie.

Si vous souhaitez multiplier les tests, voire que je teste autre chose comme les pdf transformés en swf, je vous conseille plutôt d'aller sur une page de test où vous n'aurez pas besoin d'attendre l'affichage complet de mon thème qui contient pas mal de "parasites" (au sens long à afficher) dans les sidebarres. (Les effets de type Lightbox ne pouvant se déclencher qu'une fois la page complètement chargée)

Avec Clearbox :

Contenu Web2.0 :
(01) Une vidéo YouTube - (02) Une vidéo Google - (03) Une vidéo DailyMotion - (04) Une vidéo wat.tv - (05) Une bande annonce trouvé sur le net - (06) La page web de Clearbox

Photos, Gallerie, Slideshow
(07) Une photo trop grande retaillée par défaut - (08) La même photo trop grande en taille normale, scrollable
(09) Une galerie Jake1 - Une galerie Jake2 - Une galerie Jake3
(10) Une galerie avec Preview et "start" - -

Flash et dérivés
(11) Un MP3 lu par NeoLao - (12) Une vidéo flv avec le neoplayer - (13) Une animation flash simple - (14) Une vidéo flv

Formats divers
(15) Une video wmv - (16) Une vidéo mov H264 - (17) Une vidéo mpg


Texte de test compris dans des balises pour obtenir l'affichage d'ascenceurs et voir ce que cela donne avec les effets Shadowbox et Clearbox...

Avec Shadowbox :

Contenu Web2.0 :
(18) Une vidéo YouTube - (19) Une vidéo Google - (20) Une vidéo DailyMotion - (21) Une vidéo wat.tv - (22) Une bande annonce trouvé sur le net - (23) La page Web de Shadowbox

Photos, Gallerie, Slideshow
(24) Une photo trop grande retaillée par défaut - (25) La même photo trop grande en taille normale, déplaçable, à la manière des "GoogleMaps"
(26) Une galerie Jake1 - Une galerie Jake2 - Une galerie Jake3

Flash et dérivés
(27) Un MP3 lu par NeoLao - (28) Une vidéo flv avec le neoplayer - (29) Une animation flash simple - (30) Une vidéo flv

Formats divers
(31) Une video wmv - (32) Une vidéo mov H264 - (33) Une vidéo mpg

Vous pouvez bien entendu me rapporter des configurations sous lequel cela ne fonctionne pas ou pas bien. Merci de me transmettre l'O.S., le navigateur et leurs versions. Si cela ne fonctionne pas du tout ou si c'est légèrement dégradé. Attention, avant de mettre en cause l'effet Shadowbox ou Clearbox, vérifiez que le contenu s'affiche lorsque vous ouvrez le lien dans un nouvel onglet ou une nouvelle fenêtre, et donc qu'il ne vous manque pas un codec ou que le site de partage de vidéo n'est pas en carafe !

  • Résultats des tests :

(Pour aller directement aux conclusions : ↓ )

1 - Sous WINDOWS XP SP2

a - Internet Explorer 6 :

(15) Téléchargement proposé du fichier WMV, pas de lecture, alerte de sécurité

Légère dégradation de l'effet Shadowbox (fondu au noir / bordure basse de l'iframe) sur tous les tests

(33) Les boutons du player mpg ne sont pas présents.

b - Firefox 3 béta 5

(15) No video apparait pendant le chargement de la vidéo WMV et après sa diffusion, les boutons du player ne sont pas présents.

(31) Comme (15)

c - Opera 9.26

Aucune des animations ClearBox (01)(17) ne s'arrêtent avec le bouton "close", le son continue et si on relance une autre vidéo à la suite, pendant le chargement de la suivante, on revoit les images de la précédente.

L'effet Clearbox est comme "au ralenti" avec un P4 à 2,4GhZ et un P4 à 3GhZ.

d - Internet Explorer 7

(15) Téléchargement proposé du fichier WMV, pas de lecture, alerte de sécurité

(16)(17) Pas d'autoplay des vidéos mov et mpg.

(32)(33) Mov et Mpeg continuent de jouer le son après le "close", les boutons des players ne sont pas présents.

e - Firefox 2.0.014

(15) La vidéo WMV s'ouvre en externe dans le Windows Media Player (c'est peut être un paramétrage chez moi)

(16)(17) Pas d'autoplay des mov et mpg.

f - Safari 3.1

(15) Ouvre le WMV dans Windows Media Player et retourne en page d'accueil pour le navigateur.

(16)(17) Pas d'autostart des mov et mpg.

(31) WMV non lu, le symbole Windows Media apparait dans la frame mais rien ne se passe.

2 - Sous Windows 2000 SP2

Résultats sous réserve, le PC de test ne possède pas de carte son. J'ai considéré le test comme Ok si l'animation/la vidéo se charge et est visionable.

a -Internet Explorer 5 : Pas d'effet Clearbox ni Showbox.

b - Firefox 2.0.0.6 :

(01) à (14) Ok

(15) à (17) non testés, les codecs ne sont pas installés

(18) à (30) Ok

(31) à (33) non testés, les codecs ne sont pas installés

3 - Sous Mac OS X 10.4.11 (Tiger)

a - Firefox 3 béta 5

(15) Ecran noir sur le WMV

(25) Le déplacement est "bizarre"

(31) Parfois l'écran reste noir au lieu d'avoir le WMV et comme (32)(33)

(32)(33) Les vidéo MOV et MPG restent en surimpression après le "close" et il faut un clic supplémentaire pour les faire disparaitre.

Mais bon, ce n'est qu'une béta et la très bonne nouvelle, c'est que les ascenseurs (overflow:auto des <pre></pre>) ne restent plus visible comme sous les versions 2.

b - Opera 9.50 beta

Le 1/4 inférieur bas de l'écran n'est pas assombri avec les clearbox comme si la taille de la fenêtre n'était pas transmise au script correctement.

Il arrive parfois qu'en lançant une animation, on voit la précédente pendant le chargement.

(14) Ne propose pas de télécharger le flv mais présente une erreur

(15) Les boutons du player WMV apparaissent en haut avant de reprendre leurs places.

c - Safari 3.1.1

(14) Le contenu "hexa" du flv est présenté dans la frame.

(15) Pas d'autostart sur le WMV.

d - Firefox 2.0.0.14

Les overflow:auto des balises <pre></pre> font que les ascenseurs restent visibles (ne sont pas assombris).

(13) Légère dégradation de l'animation au lancement, peut être due à l'ascenseur juste en dessous.

(15) Pas d'autostart, les boutons du player apparaissent en haut avant de reprendre leurs places en bas.

(15)(16)(17) Manque une zone grise sur le côté droit des player.

(33) La lecture du MPG provoque l'apparition d'artefacts colorés en dessous (sur la page web qui a été assombrie).

  • Conclusions ?

Je pense faire une mise à jour de ce tableau récapitulatif dès que j'aurais un peu plus de tests et en particulier un sous Linux et l'autre avec Internet Explorer 8 ou en fonction des retours d'utilisateurs...

Une zone blanche est "Configuration non testée", une zone verte pour "Tout est Ok", une zone jaune pour "Légère dégradation acceptable", une zone rouge pour "Ne fonctionne pas correctement ou pas du tout". J'ai encadré de bleu la zone systématique à problème qui concerne les MOV, MPEG et WMV aussi bien avec ClearBox (15,16,17) qu'avec ShadowBox (31,32,32).

Tableau récapitulatif des tests effectués

Shadowbox et Clearbox sont donc les deux qui me conviennent le mieux : Plus léger que Lightbox, compatible Lighbox, plus complet que Lightbox.

Le slideshow de la ClearBox me botte grave. C'est probablement uniquement pour lui que j'ai intégré le script. Faire des liens qui s'ouvrent sur des domaines externes rien qu'au survol, c'est sympa aussi. Pour tout le reste (et surtout pour l'affichage de flash et dérivés), ShadowBox est pas mal du tout. Evitons d'intégrer des vidéos WMV et MPG, le rendu est vraiment trop variable. Attention avec les MOV aussi. Opera a encore du mal avec les effets de type LightBox. Internet Explorer 5 sous Windows 2000 est "tout rouge" mais c'est normal, il n'est pas prévu pour, le test était là surtout pour montrer qu'en restant avec un vieil OS (W2000) mais avec un navigateur récent et soucieux des standards (Firefox), on pouvait obtenir quelque chose de tout à fait acceptable.

  • Comment installer ShadowBox et ClearBox (DotClear 1&2, WordPress) ?

- Pour la ClearBox, les modifications que j'ai effectuées sont principalement de la traduction de Hongrois (que nous parlons tous depuis le berceau, n'est-ce pas ?), les chemins des images et la suppression de l'url du fichier "ClearBoxé". En effet, lorsque l'url est assez longue, la box était bien centrée mais l'url provoquait un agrandissement sur la droite inesthétique :

Aspect d'une ClearBox avec une url longue

Si vous souhaitez retrouver ce texte, dans le fichier clearbox.css, cherchez :


CB_Text {
text-align: center;
display:none;
}

et supprimez la ligne avec "display:none;"

J'ai aussi modifié les images : Bouton précédent d'origine et Bouton suivant d'origine originales en Bouton précédent modifié et Bouton suivant modifié, plus parlant, non ?

- Pour la ShadowBox, les modifications que j'ai effectuées sont principalement les chemins des images.

Je vous propose donc un pack sous forme de fichier archive au format zip. Après téléchargement, dézippez le, uploadez à la racine de votre blog le dossier "clearshadow".

Si vous ne positionnez pas ce dossier à la racine ou que vous changez son nom, il vous faudra changer les chemins des fichiers .js et .css en recherchant les occurrences de /clearshadow/ dans les codes qui suivent en partie A et dans les fichiers : clearbox.css, clearbox.js et shadowbox.js.

Les morceaux de code à rajouter sont :

Partie A, après la balise <head> et avant la balise </head> de votre thème, rajoutez ceci :

Pour un fonctionnement avec jQuery (conseillé) :

(Les 4 premières lignes sont pour la ShadowBox, les 2 dernières pour la ClearBox)


<link rel="stylesheet" type="text/css" href="/clearshadow/shadow/shadowbox.css" />
<script type="text/javascript" src="/clearshadow/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="/clearshadow/shadow/shadowbox-jquery.js"></script>
<script type="text/javascript" src="/clearshadow/shadow/shadowbox.js"></script>
<link type="text/css" rel="stylesheet" href="/clearshadow/clear/clearbox.css" />
<script src="/clearshadow/clear/clearbox.js" type="text/javascript"></script>

Pour un fonctionnement avec le Protoculous effect packer gzippé (à vous de vérifier la compatibilité de votre hébergement) :


<link rel="stylesheet" type="text/css" href="/clearshadow/shadow/shadowbox.css" />
<script type="text/javascript" src="/clearshadow/protoculous.js.gz"></script>
<script type="text/javascript" src="/clearshadow/shadow/shadowbox-prototype.js"></script>
<script type="text/javascript" src="/clearshadow/shadow/shadowbox.js"></script>
<link type="text/css" rel="stylesheet" href="/clearshadow/clear/clearbox.css" />
<script src="/clearshadow/clear/clearbox.js" type="text/javascript"></script>

Pour un fonctionnement avec Mootools, Yahoo! User Interface Library, Ext ou Dojo Toolkit, consultez le site de l'auteur pour obtenir les fichiers "adapters".

Partie B, ensuite, juste après la balise <body>, rajoutez sur la ligne suivante :

(Pour la ShadowBox)

<script type="text/javascript">window.onload = Shadowbox.init;</script>

Pour DotClear 1, partie A et B se font dans le fichier template.php

Pour DotClear 2, j'ai mis la partie A dans _head.html et la partie B dans _top.html mais attention, les thèmes DotClear 2 peuvent déjà avoir jQuery d'inséré donc vérifiez. Si dans le thème au niveau du _head.html, vous trouvez un code du genre :

<script type="text/javascript" src="tpl:BlogThemeURL/../default/js/jquery.js"></script>

alors il ne faut pas insérer dans le partie A, cette portion de code :

<script type="text/javascript" src="/clearshadow/jquery-1.2.3.pack.js"></script>

Il faut, par contre, laisser cette portion de code :

<script type="text/javascript" src="/clearshadow/shadow/shadowbox-jquery.js"></script>

Pour WordPress, partie A et B sont à mettre dans header.php mais en faisant attention car votre thème utilise peut être déjà jQuery ou Prototype/Scriptaculous. Il faut donc choisir l'adapter en fonction de votre thème et supprimer dans le code que je vous donne la librairie déjà incluse par votre thème.

Il existe aussi deux plugins ShadowBox pour WordPress : Shadowbox JS et Shadowbox mais rien pour ClearBox.

Et voilà ! Si vous aviez précédemment installé une lightbox, il faut bien évidemment supprimer le code qui la concernait.

  • Remplacement du plugin pour DotClear 1

Pour ceux ayant installé le plugin LightBox JS 2.0 d'Alconis sous DotClear 1, il faut supprimer ces lignes comprises entre <head> et <head> :


<link rel="stylesheet" href="<?php echo dc_app_url; ?>/ecrire/tools/lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<?php echo dc_app_url; ?>/ecrire/tools/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="<?php echo dc_app_url; ?>/ecrire/tools/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<?php echo dc_app_url; ?>/ecrire/tools/lightbox/js/lightbox.js"></script>

mais pas besoin d'enlever le plugin

Si vous utilisiez les balises rel="lightbox", pas besoin d'y toucher, Shadowbox les reconnait.

Toujours pour ceux ayant installé le plugin LightBox JS 2.0 d'Alconis sous DotClear 1, vous aviez peut-être patché le fichier class.wikixhtml.basic.php afin d'insérer les ligthbox en wiki. Je vous propose alors de le patcher à nouveau, pour DotClear 1.2.1 à 1.2.8, remplacez votre fichier par celui-çi (une fois décompacté, bien entendu, pour remplacer celui dans /inc/classes/ que vous aurez au préalable sauvegardé - A vos risques et périls).

Comme avant, vous pourrez obtenir l'effet lightbox avec cette syntaxe wiki : [lien|url||titre||LIGHT] ou un album avec [lien|url||titre||album].

Pour le paramétrage des ShadowBox et ClearBox, il suffit de rajouter le contenu du "rel" comme celà (en wiki) : [lien|url||titre|||rel] avec rel=clearbox ou rel=shadowbox, exemple : [lien|url||titre|||shadowbox; width=320; height=240;] rajoutera un effet shadowbox avec une taille de 320 par 240.

Et comme moyen mnémotechnique, j'utilise "1-2-3" : il y a 1 signe "|" entre le lien et l'url, 2 signes "|" entre l'url et le titre et enfin 3 signes "|" entre le titre et le paramètre "rel".

Plugin Gallery : Sous DotClear 1, j'avais modifié le fichier /share/gallery/themes/default/galleryGal.php en transformant cette ligne :


<a href="<?php dcGallery::imageURL(); ?>#gallery" title="<?php dcGallery::imageName(); ?>">

en :


<a href="<?php echo $galleryImage->getImageURL(); ?>" rel="lightbox[<?php dcGallery::galTitle(); ?>]" title="<?php dcGallery::imageName(); ?>">

afin d'obtenir l'effet lightbox sur mes galeries. Si j'avais conservé cela, c'est l'effet ShadowBox qui aurait été pris en compte. Comme j'adore le slideshow ClearBox, j'ai remplacé par :


<a href="<?php echo $galleryImage->getImageURL(); ?>" rel="clearbox[<?php dcGallery::galTitle(); ?>,6,start]" title="<?php dcGallery::imageName(); ?>">

et j'obtiens un slideshow qui démarre automatiquement au clic d'une image avec un timer de 6 secondes entre chaque image.

ClearBox et ShadowBox s'utilisent avec le paramètre rel="..." à indiquer dans le lien (href). En regardant le code source de la page de test "http://1loup.net/testclear.html", vous avez pas mal d'exemples à suivre.

Ce n'est pas un plugin, c'est donc à vous de rajouter des morceaux de code dans vos billets. Je ne trouve pas cela intéressant d'insérer systématiquement une shadowbox ou clearbox à chaque insertion d'image à partir des gestionnaires de média comme le font certains plugins. Ce n'est pas franchement pertinent, surtout sur les images de tailles moyennes. Je trouve que c'est plutôt à conserver pour les grandes images ou les galeries, les vidéos... Du coup cela nécessite de mettre un chouilla les doigts dans le code. Personnellement, j'utilise le wiki de DotClear 1, cela ne pose donc pas de problème. Sous DotClear 2, le wiki doit être "patchable" de la même façon mais je n'ai pas encore testé. Il suffit de regarder la fonction "__parseLink" dans le fichier que je fourni, elle comporte deux rajouts qui ne sont pas indentés comme le reste du code et sont entourés de commentaires. Sous WordPress, après avoir inséré votre image, il suffit de passer en mode HTML (ou code) et de rajouter le "rel" au niveau du lien :

Remplacer <a href="... par <a rel="shadowbox" href="... par exemple, au niveau du code de votre image.

  • Utilisation de ClearBox :

- Pour une image, un rel="clearbox" suffira

- Pour une galerie, un rel="clearbox[nomdelagalerie]"

- Pour un slideshow, un rel="clearbox[nomdelagalerie,nombredesecondesentre2images,start]"

- Pour une image non réduite à la taille de l'écran, un rel="clearbox(width,height,click)" (avec width et height les largeur et hauteur de l'image) et en remplaçant click par over, l'ouverture de la clearbox se fera au survol de la souris au lieu du click.

- Pour une animation flash (swf, youtube, dailymotion...) ou la page d'un site web, un rel="clearbox(width,height,click)" aussi.

Je crois que vous ne trouverez pas beaucoup plus d'information sur la page de l'auteur car elle est écrite en Hongrois mais si vous êtes à l'aise avec cette langue et que vous trouvez des infos que j'ai passé sous silence, je vous serais reconnaissant de m'en faire part.

  • Utilisation de ShadowBox :

- Pour une image, un rel="shadowbox" ou rel="lightbox" suffira

- Pour une galerie, un rel="shadowbox[nomdelagalerie]" ou rel="lightbox[nomdelagalerie]"

- Pour une image non réduite à la taille de l'écran, un rel="shadowbox;options={handleLgImages:'drag'}"

- Pour une animation flash (swf, youtube, dailymotion...) ou la page d'un site web, un rel="shadowbox; width=largeur; height=hauteur;" en remplaçant largeur et hauteur par leur valeurs respectives

Vous trouverez, bien entendu, plus de paramétrage et d'options sur la page de l'auteur (en anglais).

  • Et vous...

Vous avez eu bien du courage d'arriver jusqu'ici :ange:

Mais, vous, qu'en pensez-vous ?

Connaissez-vous des scripts de ce genre que je n'ai pas testé ?

Si vous voulez un coup de main pour l'installation et/ou l'utilisation, n'hésitez pas à demander de l'aide dans les commentaires. J'ai écris tellement de trucs et je suis quand même assez geek que je peux trouver cela facile alors que cela peut vous sembler "nébuleux" !

Je préfère ClearBox et ShadowBox, j'ai essayé de vous expliquer pourquoi mais c'est aussi une histoire de goûts et de couleurs, hein... Je ne vais pas me facher si vous trouvez cela immonde et que vous préférez les solutions que j'ai rejeté :pasbien:

Voilà comment un geek fait une incursion dans les Lightbox-like :hysterique:

Rappels des pièces jointes : Le pack ClearBox-ShadowBox et le fichier class.wikixhtml.basic.php pour DotClear 1.

dimanche 30 mars 2008

Plugin PlayVidZik pour WordPress

Billet remanié le 31/03/08 après une journée complète de travail pour refaire le plugin afin de conserver la validité XHTML malgré l'éditeur visuel - Les 5 premiers commentaires de ce billet font référence à la version précédente du plugin (0.7.3b1)

Je viens de terminer le développement/adaptation de PlayVidZik pour WordPress...

C'est un plugin d'insertion de vidéos (Stage6, YouTube, Koreus, Google, DailyMotion) et de playlists (Deezer et Imeem) spécialement prévu pour fonctionner avec WordPress en version 2.5 mais fonctionnant (en mode +/- dégradé) sous les versions >2.0 fonctionnant normalement sur les WordPress de la version 2 à la version 2.5. Personnellement, je ne l'ai testé que sur WP2.0.4en, WP2.3.3fr et WP2.5fr !

Si vous souhaitez essayer ce plugin, je vous invite à le télécharger ici.

Si vous n'avez pas encore migré sous WordPress en version 2.5, je vous invite à le faire le plus rapidement possible car en dehors des différentes nouveautés, il y a enfin une fonctionnalité plus que très intéressante : l'éditeur visuel ne touche plus touche moins au code HTML inséré ! Comme l'éditeur visuel s'amuse encore à toucher au code et casse la validité XHTML, j'ai adapté le plugin pour que le système de filtre de mes anciens plugins s'adapte aux boutons d'insertion.

Si vous utilisez l'un de mes précédents plugins pour WordPress, il faudra les désactiver avant d'activer PlayVidZik MAIS ne touchez pas aux codes dans vos billets, PlayVidZik prend le relais, le code est compatible avec eux.

L'installation est simple : Dézippez le plugin, uploadez le dossier PlayVidZik dans le dossier /wp-content/plugins de votre WordPress.

Ensuite sauvegardez le fichier quicktags.js que vous trouverez dans /wp-includes/js/ de votre WordPress et remplacez le par l'un fourni dans le dossier quicktags-js du plugin.

J'ai patché deux quicktags.js : L'un pour les versions 2.0 à 2.1.3, l'autre pour les versions 2.2 à 2.5. Si votre WordPress n'est pas dans la liste, vous pouvez le patcher manuellement à l'aide du protocole explicatif (situé à la fin du fichier readme.html).

Activez ensuite le plugin PlayVidZik dans votre menu Plugins (qui s'appelle "Extensions" dans WP2.5), sortez de votre interface d'administration (Se déconnecter ou Déconnexion), videz le cache de votre navigateur et c'est tout.

  • Sous WordPress (ici un exemple en version 2.5), dans l'interface de saisie de billet, passez en mode HTML pour voir apparaitre deux boutons supplémentaires :

Quicktags sous WP2.5 1 - Pv : Bouton pour l'insertion des vidéos
2 - Pz : Bouton pour l'insertion des playlists musicales

Sous WordPress 2.3.3, vous aurez cet aspect, en cliquant sur le bouton "Code" :
Quicktags sous WP2.3.3

Sur les vieilles versions (genre 2.0), le seul moyen d'obtenir la barre "Quicktags" est de désactiver l'éditeur visuel (dans "Utilisateur") alors que l'on passe instantanément de l'une à l'autre en cliquant sur Visuel/Code ou Visuel/HTML sur les versions récentes. C'est une bonne raison supplémentaire de migrer rapidement.

Après avoir cliqué sur le bouton Pv ou Pz, répondez aux questions posées par le plugin en copiant/collant directement l'url des vidéos ou l'embed des playlists musicales.

Pour les codes couleurs, vous pouvez vous aider de ces snapshoots :

Pour YouTube :

Couleurs YouTube

Pour Imeem :

Couleurs Imeem

Pour Deezer :

Couleurs Deezer

  • Si vous ne souhaitez pas patcher le fichier quicktags.js, il ne vous reste plus qu'à utiliser le filtre, comme dans les plugins précédents (voir le mode d'emploi intégré) avec des codes du genre [Mdeezer + id + texte alternatif] ou [YT + id + largeur + hauteur + texte alternatif]. Le filtre n'insère pas les vidéos Koreus, les paramétrages sont très réduits et je stoppe son développement.
  • Mais pourquoi n'ai-je pas fait une adaptation des codes pour une utilisation des boutons avec un WordPress <2.5 ET l'éditeur visuel ? C'est simple, je suis une grosse feignasse :evil: et là, le code est une transcription directe du code de DotClear et est ainsi facilement adaptable. Dès que je fais une modification dans PlayVidZik pour DotClear, je peux faire la même modification dans PlayVidZik pour WordPress alors que sinon, non, il me faudrait de nombreuses heures de travail... et puis, il va bien falloir passer un jour ou l'autre à WordPress 2.5, nanmého :ange: Je l'ai fait :ange:

J'ai fait très peu de test sous WordPress et n'ai pas lancé de béta-test privé, aussi, je suis intéressé par vos critiques, retours etc... sur cette version 0.7.3b1 0.7.3b2 0.7.3b3 0.7.3b4 ! Je tenterais de répondre à vos questions, si vous en avez...

J'espère qu'il n'y a pas trop de bugs :hysterique:

N.B. : En cas de demande d'aide, précisez-moi impérativement quelle version du plugin vous utilisez et sous quelle version de WordPress vous l'avez installé.

RAJOUTS du 01/04/2008 - Questions / Réponses

  • Q: Comment personnaliser les couleurs des players ?

R: Si les choix proposés ne vous conviennent pas, vous pouvez ponctuellement modifier les codes couleurs après insertion (directement dans le code compris entre parenthèse) mais si vous souhaitez faire une personnalisation aux couleurs de votre thème et la retrouver rapidement à chaque fois, je vous propose plutôt de modifier le plugin :

- Pour modifier le player de playlist d'Imeem, ouvrez le fichier PlayVidZik.php, cherchez la fonction PVZ1 puis la ligne commençant par case "999", adaptez alors le backColor, primaryColor, secondaryColor et le linkColor.

- Pour modifier le player monotitre d'Imeem, ouvrez le fichier PlayVidZik.php, cherchez la fonction PVZ2 puis la ligne commençant par case "999", adaptez alors le backColor, primaryColor, secondaryColor et le linkColor.

- Pour modifier le player de playlist de Deezer, ouvrez le fichier PlayVidZik.php, cherchez la fonction PVZ3 puis la ligne commençant par case "999", adaptez alors le colorBackground, colorButtons, textColor1 et le textColor2.

- Pour modifier le player monotitre de Deezer, ouvrez le fichier PlayVidZik.php, cherchez la fonction PVZ4 puis la ligne commençant par case "999", adaptez alors le colorBackground, colorButtons, textColor1 et le textColor2.

- Pour modifier le player YouTube, ouvrez le fichier quicktags.js, cherchez la ligne commençant par case "999", adaptez alors le color1 et le color2.

Ensuite, lorsque le plugin vous demande la couleur, répondez 999 et vous aurez des players avec les couleurs que vous aurez défini :banane:

  • Q: Comment personnaliser la présentation des players par CSS (exemple, avec mon thème, les players sont collés au texte qui précède et qui suit) ?

R: Rajouter dans la feuille de style de votre thème (style.css), cette instruction :

.videos-playlists { }

puis inscrivez dedans vos "règles".

Voici un exemple permettant d'obtenir un espace d'1em avant et après le player qui lui est centré dans le billet :


.videos-playlists {
	margin: 1em auto;
	text-align: center;
}

Ensuite, lorsque le plugin vous pose la question de la position, choisissez "1=rien/nothing" (remplacez le chiffre 0 par défaut par le chiffre 1), ce qui indique que le positionnement va s'effectuer par CSS :bond:

  • Q: Comment faire pour que les players démarrent tout seul (autoplay) ?

R: Alors là, si vous me permettez d'abord une petite remarque, c'est une très mauvaise idée. Ce n'est pas à vous de décidez de démarrer le player mais à vos visiteurs qui sinon risquent de considérer cela comme une nuisance au lieu d'une fonctionnalité ! Si je vous donne comme exemple que je navigue avec 20 à 30 onglets ouverts sur différents blogs tout en écoutant ma propre musique, il suffit qu'un ou deux blogs diffusent en autoplay pour que cela devienne la cacophonie ! Il me faut alors chercher dans les 30 onglets quels sont les perturbateurs de mon univers sonore et de rage, je ferme les onglets fautifs et ne reviendrais plus sur ces blogs là. Tandis que pour les blogs me proposant des playlists musicales, suivant mes envies, je coupe alors ma propre musique et lance ensuite l'écoute des playlists qui me plaisent.

Si vous persistez à vouloir mettre de l'autoplay dans vos playlists musicales, vous pouvez le faire directement dans le code, c'est le dernier paramètre, juste avant le signe "]". Pour les Imeem, remplacez "false" par "true" et pour les Deezer, remplacez "0" par "1".

  • Q: Pourquoi encore un plugin de plus ?

R: Parce que je suis plus strict sur certains points !

Exemple 1 : L'excellent Viper's Video Quicktags - C'est un plugin en anglais, j'ai du mal avec l'anglais, et je ne suis pas le seul, loin de là. Le plugin est rempli de javascript et si vos visiteurs ont désactivés le javascript, ils ne verront pas vos vidéos, ce qui n'est pas le cas avec PlayVidZik. Et ce plugin est aussi très dépendant de l'éditeur visuel, que se passe-t-il lorsque WordPress change d'éditeur, mmmh ? Alors que les boutons de PlayVidZik fonctionnant avec quicktags.js, il suffit de patcher ce fichier d'une version à l'autre. Même si WordPress évolue, vous pouvez vous même patcher votre fichier sans attendre que je fasse une mise à jour du plugin.

Exemple 2 : Le très complet WordPress Video Plugin d'Oliver Wunder - C'est mon inspiration au niveau du filtre mais cependant, plusieurs de ses codes ne passent pas la validation XHTML, il n'y a rien de prévu pour les contenus alternatifs, et certains paramétrages sont bien maigres (possibilité de personnaliser les tailles ou les couleurs...). Cependant, je m'arrange pour que mon code reste compatible avec le sien et ne provoque pas d'interférence.

Je ne tiens pas à rivaliser avec des grands noms de WordPress mais répondre correctement à certains besoins : Accessibilité, validité XHTML, personnalisation poussée.

Je ne vais pas chercher à TOUT mettre dans ce plugin, il correspond actuellement à une demande. Je peux le faire évoluer sur demande justifiée. Je réfléchis à intégrer en vidéo les Vimeo et en musique les playlists JIWA. Si vous avez des demandes, expliquez moi pourquoi cela vous arrangerait que je rajoute telle ou telle fonctionnalité, les commentaires sont fait pour cela aussi.

  • Q: C'est quoi tous ces code "cabalistiques" ? Il y a des codes d'expliqués dans l'aide du plugin, mais pas tous ? Tu caches des trucs ?

R: Les codes qui sont expliqués proviennent des précédents plugins, il n'y avait pas de boutons d'insertion, il fallait apprendre la syntaxe... J'ai conservé ces codes afin d'assurer la compatibilité avec ce nouveau plugin et que vous n'ayez rien à changer des codes que vous avez déjà dans vos billets. Les autres codes sont générés par les boutons d'insertions et utilise une syntaxe afin que je m'y retrouve entre PlayVidZik pour DotClear et PlayVidZik pour WordPress mais si vous voulez tout savoir (voire écrire vos codes vous même sans cliquer sur les boutons), voici les explications :

TypesCodes
Vidéo YouTube[PV1Z + ID de la vidéo + largeur + hauteur + code de position + inclusion + couleurs + bordure + contenu alternatif]
Vidéo DailyMotion[PV2Z + ID de la vidéo + largeur + hauteur + code de position + contenu alternatif + origine]
Vidéo Google[PV3Z + ID de la vidéo + largeur + hauteur + code de position + contenu alternatif]
Vidéo Stage6[PV4Z + ID de la vidéo + largeur + hauteur + code de position + contenu alternatif]
Vidéo Koreus[PV5Z + ID de la vidéo + largeur + hauteur + code de position + contenu alternatif]
Playlist Imeem[PVZ1 + ID de la playlist + code de position + code couleur + contenu alternatif + autoplay]
Monotitre Imeem[PVZ2 + ID du titre + code de position + code couleur + contenu alternatif + autoplay]
Playlist Deezer[PVZ3 + Path de la playlist + ID de la playlist + code de position + code couleur + contenu alternatif + autoplay]
Monotitre Deezer[PVZ4 + ID du titre + code de position + code couleur + contenu alternatif + autoplay]

mercredi 19 mars 2008

PlayVidZik et WordPress

Il y a 42 jours, j'avais migré mon WordPress de test vers la version 2.3.3 sorti la veille.

Quelques temps plus tard, j'avais annoncé à différentes personnes que j'allais porter sous WordPress mon plugin PlayVidZik codé pour DotClear.

Ayant appris que la version 2.5 de WordPress devait avoir des fonctions audio/vidéo, j'ai alors décidé d'attendre un peu pour voir, afin de ne pas réinventer le fil à couper le beurre.

La sortie de WordPress 2.5 a été reporté mais hier a été présenté une release candidate. Je n'ai pas touché à mon blog de test mais j'ai fait une installation de cette RC1 sur un autre hébergement.

(Ne criez pas) Et ben, plus cela va, plus c'est moche, mon dieu...

Et oui, je vais me remettre au travail pour essayer de porter PlayVidZik sous WordPress car cette version ne fait absolument pas ce à quoi je m'attendais.

Savoir si je passerais mon blog de test sous WP2.5 ? Je ne sais pas encore... En tout cas, il est peu probable que je le fasse le lendemain de l'annonce de sa sortie comme la version précédente.

Un des fichiers sur lequel je compte intervenir n'évolue pas entre les deux versions, il faut encore que je regarde comment mon précédent plugin réagit !

Je suis bientôt en vacances, j'espère pouvoir consacrer un peu de temps à ce projet.

mardi 15 janvier 2008

Plugin Vidéos et Playlists pour WordPress

Attention : Un plugin plus évolué - PlayVidZik est disponible !

J'ai donc repris le plugin des Playlists Deezer et Imeem pour rajouter les vidéos YouTube, DailyMotion, Google et Stage6. Ce plugin remplace le précédent (vous ne pouvez pas avoir les deux tournant en même temps car le code de l'un est repris dans l'autre). Cependant, si vous utilisiez déjà le plugin précédent, vous n'avez pas besoin de toucher à vos billets car le code, lui, est compatible.

Vous pouvez télécharger l'archive zip, décompactez là, uploadez le dossier 1loup dans le dossier wordpress/wp-content/plugins, ensuite activez-le dans votre menu Plugins et c'est tout.
Si vous aviez le précédent plugin d'installé, commencez d'abord par le désactiver avant d'installer celui-là.

C'est un premier jet, je n'ai pas tenu compte de pas mal de paramètres (par exemple, les couleurs de player pour YouTube) et je n'ai pas non plus tenu compte des évolutions de Deezer avec sa version 2 pour de bonnes raisons : Deezer V2 est encore en développement, un widget monotitre doit sortir ainsi qu'un player avec le retour des playlists dans le genre de la V1 pour nos MP3 perso. Il faut dire aussi que je me consacre plus pour l'instant à mon plugin pour DotClear.

Nouveau : Monotitre Deezer INCLUS (mise à jour du 25/03/2008)

Ce plugin pour WordPress présente pour l'instant ces avantages :

  • valide XHTML
  • accessible (texte alternatif)
  • tailles paramétrables pour les vidéos
  • compatible multiplateformes (normalement, il fonctionne aussi bien avec Mac, Windows, Linux et quelque soit le navigateur Internet Explorer, Firefox, Safari, Opera mais je n'ai pas tout testé "à fond").

Je n'ai pas testé ce plugin ailleurs que sur le WordPress français 2.3.1 2.3.3 que j'ai installé.

Le mode d'emploi est maintenant intégré, même s'il reste pour l'instant "basique".

Vous pouvez allez voir sur mon blog de test WordPress, un billet contenant les 4 codes supplémentaires et leur rendu.

Des retours si vous l'utilisez et/ou que vous souhaiteriez des améliorations seraient les bienvenus.

dimanche 6 janvier 2008

Plugin WordPress en cours

Depuis la publication de mon Plugin Deezer/Imeem pour WordPress, je continue à travailler dessus. Pourquoi ? Ben parce que beaucoup de plugins ne fonctionnent pas sous Mac, ne permettent pas le choix de taille des vidéos, ne sont pas accessibles (absence de texte alternatif) ou carrément invalides XHTML.

J'ai donc intégré pour l'instant, en plus des playlists Deezer et Imeem, les vidéos YouTube, les vidéos DailyMotion, les Google Vidéos et les Vidéos Stage6.

Si vous avez des besoins, c'est le moment de m'en faire part.

samedi 15 décembre 2007

Plugin Deezer / imeem valide XHTML pour WordPress

Attention : Un plugin plus évolué - PlayVidZik est disponible !

Voici mon premier "plugin" pour WordPress, enfin, plugin, c'est un bien grand mot, tout au plus un "filtre" mais comme tout le monde à l'air d'appeler cela un plugin...

Je me suis inspiré du WordPress Video Plugin d'Olivier Wunder.

Ce filtre intègre donc une playlist Deezer, une playlist imeem (ou un titre) dans WordPress, de façon simple, avec un code valide XHTML et accessible.

La syntaxe est la suivante :

- Pour une playlist Deezer [deezer + path + id + texte alternatif],
par exemple [deezer + 2548914 + 328169 + BestOf Editors (en flash)] affichera la playlist Deezer ayant un path=2548914, un id=328169 et rajoutera le texte alternatif "BestOf Editors (en flash)".

- Pour une playlist imeem [Pimeem + id + texte alternatif],
par exemple [Pimeem + VHIDyftK8k + Pardonne moi (Mylene Farmer/Benny Benassi)-Crazy (Seal)-The world is mine (David Guetta) (en flash)] affichera la playlist imeem ayant un id=VHIDyftK8k et rajoutera le texte alternatif "Pardonne moi (Mylene Farmer/Benny Benassi)-Crazy (Seal)-The world is mine (David Guetta) (en flash)".

- Pour un titre unique imeem [Mimeem + id + texte alternatif],
par exemple [Mimeem + akKQVny8q2 + Zazie - Je suis un homme (en flash)] affichera le titre ayant un id=akKQVny8q2 et rajoutera le texte alternatif "Zazie - Je suis un homme (en flash)".

Le code est donc à mettre entre crochet et chaque paramètre est séparé du suivant par un espace, le signe plus et un autre espace.

Le premier paramètre est le type de playlist (deezer, Pimeem, Mimeem avec P pour playlist, M pour monotitre).

Le dernier paramètre, le texte alternatif, ne doit pas contenir de caractères accentués (é, è, à, ...), il sert aux personnes n'ayant pas le plugin flash d'installé, aux aveugles, aux moteurs de recherches et devrait contenir une très courte description du contenu.

Vous pouvez allez voir sur mon blog de test WordPress, un billet contenant les 3 codes et leur rendu.

Je n'ai pas testé ce plugin ailleurs que sur le WordPress français 2.3.1 que j'ai installé, je ne sais donc pas s'il fonctionne avec d'autres configurations, il est livré tel quel, point !

Vous pouvez télécharger l'archive zip, décompactez là, uploadez le fichier di.php dans le dossier wordpress/wp-content/plugins, ensuite activez-le dans votre menu Plugins et c'est tout.

Suis-je clair ?

mercredi 12 décembre 2007

Deezer / Blogmusik valide XHTML dans WordPress malgré l'éditeur visuel

Je vais essayer de vous montrer qu'il est possible d'intégrer un player Deezer / Blogmusik dans un billet de WordPress, malgré la présence de l'éditeur visuel qui casse la code et le tout passant la validation XHTML.

1 - Prérequis :

- Je ne suis pas un pro de WordPress, je fais cela pour aider, alors attention aux commentaires. Si vous êtes un pro de WordPress et que vous savez mieux faire que moi, commencez déjà par vous poser la question comment cela se fait que c'est à moi qu'on vienne demander de l'aide et pas à vous... Par contre, tout commentaire venant apporter sa pierre à l'édifice est le bienvenu.

- Dans Options / Ecriture (de votre WordPress), assurez-vous d'avoir décoché l'option "WordPress doit automatiquement corriger les balises XHTML non valides". Parce que si vous ne savez pas mettre vos "simples" balises XHTML valides et que vous comptez sur WordPress pour le faire à votre place, on n'est pas sortie de l'auberge ! D'ailleurs, dans ce cas, je ne sais même pas ce que vous faites ici à lire ce tutoriel, c'est pour vous du chinois, ne vous infligez pas ce supplice :pasbien:

2 - Afin de travailler sur du concret, je vais résoudre le problème de Jérôme du blog Playmobils Estropiés & Associés : intégration d'une playlist Deezer dont il m'a donné le code fourni par Deezer.

Le code non valide :


<div style="width:180px;height:236px;">
<object width="180" height="236">
<param name="movie" value=" http://www.deezer.com/embedded/widget.swf?path=2548914&lang=fr&autoplay=0&id=328169"></param>
<embed src=" http://www.deezer.com/embedded/widget.swf?path=2548914&lang=fr&autoplay=0&id=328169" type="application/x-shockwave-flash" width="180" height="220">
</embed>
</object>
</div>

En suivant le protocole que j'avais donné pour rendre un code Blogmusik valide XHTML, cela ne fonctionne pas, pourquoi ? (alors que cela fonctionne très bien avec DotClear 1 et DotClear 2)

Le code obtenu est pourtant valide XHTML :


<div style="text-align: center;">
<object type="application/x-shockwave-flash" data="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169" width="180" height="220">
<param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169" />
<p>Editors - BestOf (en flash)</p>
</object>
</div>

Parce que l'éditeur visuel de WordPress tente de modifier le code et le "casse" ! Je vais donc vous proposer plusieurs façon de faire et vous laisser choisir celle qui vous plait le mieux :

  • a) Utiliser les propriétés du Doctype transitionnel - Intégration à l'aide d'une iframe

La plupart des thèmes sous WordPress ont un Doctype XHTML transitionnel et permettent donc l'utilisation des "iframe" (qu'il n'est pas possible d'utiliser lorsque l'on code en XHTML strict). En intégrant le code du player Deezer par iframe, l'éditeur visuel ne verra pas le code du player, n'y mettra pas son nez et ne le cassera pas, nananère !

Commencez donc par vérifier que votre Doctype est bien un transitionnel en vous positionnant sur l'une des pages de votre blog et en demandant à votre navigateur d'afficher le code source. La première ligne se doit d'être le Doctype, si cette ligne contient le mot "Transitional", c'est gagné, vous pouvez utiliser les "iframe". (Si vous préférez regarder les fichiers de votre thème, jetez un oeil du côté du header.php)

La manipulation que je vous propose est donc toute simple, copiez le code valide XHTML utilisé juste au-dessus dans un fichier que vous nommez par exemple "Deezer1.html". Uploadez-le dans un répertoire précis sur votre hébergement (je l'ai mis dans un répertoire /share/ de mon répertoire wordpress) et utilisez ce code que vous mettez dans votre billet :


<p style="text-align: center"><iframe src="http://votrenomdedomaine/share/Deezer1.html" class="deezer" align="middle" frameborder="0" width="220" height="270" ></iframe></p>

Il faut bien évidemment adapter le chemin du src selon votre paramétrage.
Si vous avez envie de personnaliser la présentation par CSS, rajouter une classe "deezer" dans votre "style.css".
Attention, le player ayant width="180" et height="220", il faut que l'iframe soit plus grande que lui si vous ne voulez pas voir apparaitre de disgracieux ascenseurs ! Après plusieurs essais avec différents navigateurs, il semblerait que width="220" et height="270" soient les meilleurs paramètres pour l'iframe.

Lorsque vous voudrez intégrer une autre playlist, il suffira de recopiez le fichier Deezer1.html dans par exemple un Deezer2.html, de modifiez les DEUX "path", les DEUX "id" et le texte alternatif (compris entre <p> et </p>) puis de mettre dans votre billet, le même code de l'iframe en remplaçant Deezer1.html par Deezer2.html etc...

Pour voir le rendu ou vérifier la validité XHTML de cet exemple, je vous invite à lire "Deezer dans une iframe" sur mon blog de test WordPress.

  • b) Méthode "à l'arrache"

Enfin, pas tout à fait car même en forçant, l'éditeur fait des siennes mais enfin bon, on en est pas très loin...

Reprenez le code valide XHTML du dessus. Positionnez votre curseur sur le début de la dernière ligne (le </div>) et faite un "backspace" pour la coller à la ligne précédente. Recommencez la même chose avec la ligne précédente (le </a> que vous collez à l'<img...> du dessus) et encore et encore jusqu'au <div style et obtenir un bloc supprimé de ses retours à la ligne. Faites la même chose avec le deuxième </div> et supprimer les deux balises <p> et </p> du texte alternatif pour obtenir quelque chose de ce genre :


<div style="text-align: center;"><object type="application/x-shockwave-flash" data="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169" width="180" height="236"><param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169" />Editors - BestOf (en flash)</object></div>

Ecrivez votre billet sous WordPress comme d'habitude mais sans insérer le code du player. Allez désactiver l'éditeur visuel (Utilisateurs / Modifier / décochez "Utiliser l'éditeur visuel pour écrire" puis cliquez sur le bouton "Mettre à jour l'utilisateur"). Retournez dans votre billet, insérer le bloc de code modifié (supprimé de ses retours charriots) et publier directement. Vous pouvez ensuite réactiver l'éditeur visuel mais si vous le réactivez, si vous retournez voir votre billet, surtout ne le modifiez pas, le code serait "cassé" ! Pour modifiez votre billet, il faut IMPERATIVEMENT penser à désactiver l'éditeur visuel avant de retourner sur le billet.

Pour voir le rendu ou vérifier la validité XHTML de cet exemple, je vous invite à lire "Deezer à l'arrache" sur mon blog de test WordPress.

  • c) Méthode "Je veux modifier le billet après coup avec l'éditeur visuel actif mais pas utiliser d'iframe", alors il va falloir plus de deux neurones en marche" - Not blonde inside - Brun très foncé exigé :evil:

Je vais modifier le code utilisé dans le point (b) afin qu'il dérange le moins possible l'éditeur visuel. Il le dérangera quand même donc il faudra faire attention avant de publier ou de modifier votre billet de le remodifier légèrement à chaque fois.

Insérer donc ce code à la place :


<p style="text-align: center"><object type="application/x-shockwave-flash" data="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169" height="236" width="180"><param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169"></param>Editors - BestOf (en flash)</object></p>

D'une fois sur l'autre, quand vous changez de playlist, il faut changer les DEUX "path", les deux "id" et le texte alternatif compris entre la balise </param> et la balise </object> (dans cette exemple, j'ai mis "Editors - BestOf (en flash)" comme texte alternatif).

Vous intégrez ce code dans votre billet au dernier moment, juste avant la publication, comme indiqué au point (b) précédent.

Lorsque vous voulez modifier votre billet, juste avant d'enregistrer, retournez sur le code du player. Vous constaterez que l'éditeur a rajouté un saut de ligne derrière le width="180"> soit juste avant le <param name="movie" . Il suffit de se positionner devant le <param name="movie" et de faire un backspace pour le recollez au width="180">. Si vous ne le faites pas, la fois suivante, il déplacera carrément le </object></p> derrière le width="180"> et le code sera complètement inutilisable, non seulement vous perdrez la validité XHTML mais aussi le player ne fonctionnera plus correctement. Et oui, c'est cela que d'avoir un éditeur visuel qui se mêle de ce qui ne le regarde pas :ange:

Pour voir le rendu ou vérifier la validité XHTML de cet exemple, je vous invite à lire "Deezer" sur mon blog de test WordPress.

AMUSEZ VOUS BIEN...

(Vous pouvez poser des questions s'il y a des choses qui ne vous semble pas claires, je ne mords pas, enfin, pas souvent 8-) )

- page 1 de 2