Afficher un message
  #8  
non lus 27/07/2008, 17h01
Avatar de Clovis
Clovis Clovis est déconnecté
Membre
Ma pratique de la photo: Passionné de photo
Matériel: Oeil gauche + index droit + reflex
 
Messages: 2 207
19355 Photiz - Faire un don

Mini tuto !


Bon, aller, je vais essayer de vous filer un coup de main sur ce plan là...

Le liens généré sur Flickriver est un morceaux de code xHTML, destiné à être glissé sur un site web...
VirusPhoto utilise, pour formater le texte, un code qu'on appel BBCode, utilisé sur pas mal de forum depuis quelques années déjà...

On va donc tenter de convertir le code xHTML reçus, en BBCode que comprendra VirusPhoto. Ces 2 codes marchent avec un système de bannière : < ouvrir>< /fermer> et [ouvrir][/fermer]. Il deviens donc facile de trouver les similitudes !

Code exemple utilisé
< a href="http://www.flickriver.com/photos/owintwist/">< img src="http://www.flickriver.com/badge/user/all/recent/shuffle/medium-horiz/ffffff/333333/7311406@N04.jpg" border="0" alt="Clovis Gauzy - View my recent photos on Flickriver" title="Clovis Gauzy - View my recent photos on Flickriver"/>< /a>
(il s'agit simplement de mes photos les plus récentes).

Conversion du code xHTML en BBCode
La bannières < a> correspond à la bannière [ URL] où l'addresse est dans la valeur href. Jusque là rien de difficile. < a href="http://banane.com">< /a> deviens [ URL="http://banane.com"]
La bannière < img> correspond à la bannière [ IMG] où la source de l'image est dans la valeur src. Les autres valeurs n'ont pas d'utilités en BBCode... < img src="http://banane.com/1.jpg" /> deviens [ IMG]http://banane.com/1.jpg[ /IMG]
NB : notez qu'en xHTML la bannière < img> étant unique, elle se referme sur elle même de cette manière : < img />

Notre code xHTML (ici simplifié aux valeurs href et src) < a href="http://www.flickriver.com/photos/owintwist/">< img src="http://www.flickriver.com/badge/user/all/recent/shuffle/medium-horiz/ffffff/333333/7311406@N04.jpg" />< /a> deviens donc :
[ URL="http://www.flickriver.com/photos/owintwist/"][ IMG]http://www.flickriver.com/badge/user/all/recent/shuffle/medium-horiz/ffffff/333333/7311406@N04.jpg[ /IMG][ /URL]
NB : tous les codes ci-dessus utilisent un espace comme caractère d'échappement après les caractères < et [ afin d'être visible sur le forum. Pensez à les retirer !
Insérer l'image dans sa signature
Il ne vous reste plus qu'à insérer ce code dans la section Mon Compte > Modifier votre signature. Attention toutefois à ne pas insérer trop de retours à la ligne dans votre signature, ce qui l'invaliderai... N'utilisez pas non plus les options d'affichage grille de flickriver, car du coup, vous dépasserez la taille maximum autorisé pour les signatures...

Comprendre l'URL de l'image pour pouvoir la modifier à la volée
L'URL fournis pour l'image (http://www.flickriver.com/badge/user...311406@N04.jpg) pointe en faite vers un fichier php qui va s'occuper de générer dynamiquement la vignette. Il faut donc lui envoyer quelques informations...
  • http://www.flickriver.com/badge/ : j'ai pas besoin de vous expliquer qu'il s'agit ici d'aller dans la section badge de flickriver...
  • user/ : indique que vous demandez les images d'un utilisateur. Peux aussi être group ou tags, mais je ne me pencherai pas sur ces variantes aujourd'hui...
  • all/ : indique que vous demandez toutes les photos de l'utilisateur.
  • recent/ : indique que vous voulez les photos les plus récentes en premier. Peux aussi être :
    • interesting : pour avoir les plus intéressants en premier ;
    • favorites : pour lister vos favoris ;
    • friends : pour lister les photos de vos contacts ;
    • set-72157606336960559 : pour lister les éléments de l'album set-72157606336960559 (par exemple), numéros est disponible dans l'adresse de l'album sur flickr ;
    • tag-shadow : pour lister les photos contenants le tag "shadow".
  • shuffle/ indique que vous voulez les résultats dans un ordre aléatoire.
  • medium-horiz/ : indique que votre image sera composée de 5 vignettes larges horizontales.Peux aussi être :
    • medium-tiny : 10 petites vignettes horizontales ;
    • medium-vert : 6 vignettes larges verticales ;
    • medium-4x3 : grille de 4 x 3 vignettes larges ;
    • tiny-7x5 : grille de 7 x 5 petites vignettes.
  • ffffff/333333/ : valeurs de couleurs en hexadécimal (rr vv bb), la première valeur est le fond, la deuxième le texte.
  • 7311406@N04.jpg : votre code utilisateur sur Flickr (et le .jpg derrière pour préciser que vous vouliez une image).

Voila, je ne me penche pas plus sur certains détails (principes de bannières se fermant sur elles-même en xHTML, hexadécimal, etc...). J'espère que ca vous sera par contre utile !

Dernière modification par Clovis 27/07/2008 à 17h39.
Réponse avec citation