Intégrer votre galerie photo Flickr dans votre site SILEX
Du web 2.0, vous en vouliez en voilà !
Utilisez les outils gratuits de Flickr, ils permettent d'uploader facilement des photos, de les organiser et
... génèrent des flux rss. oui, oui !!!
Du coté du Silex c'est en deux temps trois mouvements que les composants OOF vont reliés vos albums photos Flickr à votre site Silex grâce à ces flux.
Faites vous-même l' expérience à l'aide de ce tutoriel nouvel ère !
résultat sur le thème image : [[http://silex-ria.org/images/ ]]
Etape 1 : sur le site de flickr
-> [[http://www.flickr.com|http://www.flickr.com]]
aller sur la page de votre galerie ou album photo Flickr, exemple : http://www.flickr.com/photos/jilwebb/
cliquer sur le bouton RSS - pour la galerie : en bas de page (il est orange) : s'abonner à la galerie de...
- pour l'album : cliquer sur le bouton orange à droite dans la barre de navigation
copier l'url de la barre de navigation , vérifiez qu'elle se termine par rss_200 et non par fr ou atom. exemple : http://api.flickr.com/services/feeds/photos_public.gne?id=23436945@N02&lang=fr-fr&format=rss_200
- si l'adresse fini par =atom supprimez atom et remplacer par rss2
encoder cette url grâce à l'outil URLEncode disponible à cette adresse :-> [[http://www.albionresearch.com/misc/urlencode.php|http://www.albionresearch.com/misc/urlencode.php]]
Collez l' Url dans la case Plain, cliquez sur le bouton URLEncode, ainsi vous générez une nouvelle adresse visible pour SILEX. copiez-la. exemple d'adresse générée :
http%3A%2F%2Fapi.flickr.com%2Fservices%2Ffeeds%2Fphotos_public.gne%3Fid%3D23436945%40N02%26lang%3Dfr-fr%26format%3Drss_200
Etape 2 : sur votre site SILEX
Créer la page qui va accueillir votre galerie photo flickr :Sur la page start : drag/droper le button.cmp.swf depuis la librairie (répertoire components), choisir ses attributs, et ses propriétés de navigation :
- nom de page : galerie
- icone : yes
Rappel : la case cochée=yes, décochée=no
Sur la page galerie : drag/droper plusieurs composants OOF depuis la librairie (répertoire components/oof), pour chacun entrez les propriétés indispensables décrites ci-dessous :1- RssConnector.cmp.swf
- nom : RssConnector
- urlBase : < < silex.rootUrl > > / cgi / scripts / proxy.php?url =
2 - DataSelector.cmp.swf :
- nom : DataSelector
- connectorPath : RssConnector
- fromName : = ici collez l'adresse générée par URLEncode dans l'étape 1, par exemple :
http%3A%2F%2Fapi.flickr.com%2Fservices%2Ffeeds%2Fphotos_public.gne%3Fid%3D91625535%40N00%26lang%3Den-us%26format%3Drss2
- listBoxPath : list
- iconFieldName : media:thumbnail/attributes/url
- deeplinkFormat : < < title > > = le titre de chaque image apparaitra dans la barre de navigation
- outputFormats :
TextIo.value=( ( < b > < < title > > < / b > ) )
player.value= < < media:content / attributes / url > >
Note : si vous souhaitez faire apparaitre le titre de votre photo et sa description, notez plutôt :
TextIo.value=( (< b> < < title > > < / b > ) )( (< < description > >) )
utilisez égalementt les balises html pour la mise en forme du texte.
Attention des espaces entre les syntaxes ont été volontairement ajoutés !
3 - TextDisplay.cmp.swf : = correspond au champ de texte pourle titre et description de l'image
- urlPrefix : doit être vide
- nom : Textlo
- largeur et hauteur (à votre guise)
- loadFromUrl : no
- useHtml : yes
4 - ListUi.cmp.swf : = correspond aux boutons scroll
- listPath : list
5 - ThumbList.cmp.swf : = correspond à la liste des miniatures
- nom : list
- thumbHeight et thumbWidht
- itemsPerRow : 2 = la liste sur deux colonnes
- largeur et hauteur
6 - ImageDisplay.cmp.swf : = correspond à votre image grand format
- nom : player
- urlPrefix : doit être vide
- largeur et hauteur
Sauvez et relancez votre page, les icones de vos photos doivent apparaitreNote : Si vous souhaitez ajouter un Next/Previous automatique :
configurez la propriété timeForEachSlide de votre compsant ImageDisplay.cmp.swf (renommé player)exemple : 10 (10 secondes entre chaque transition)
drag/dropper sur la scène le composant PlayListUi.cmp.swf (répertoire components/oof de votre librairie), et entrez ces propriétés :- displayPath : player
- listPath : list
- jumpToNextAtEnd : yes (une fois une image sélectionnée, les autres défilent automatiquement)
- loop : yes (diaporama en boucle)