Comment créer une galerie de photos à l'aide de l'API Flickr

Flickr est sans aucun doute le plus grand et le meilleur site de photographie sur Internet. Il existe de nombreux widgets, badges et plug-ins qui vous permettent d'afficher vos dernières photos Flickr sur votre site Web, mais nous allons encore plus loin en sélectionnant Flickr directement et en intégrant votre flux de photos à votre site Web. est un jeu d'enfant à mettre à jour.

Nous allons créer cette galerie de photos en utilisant l'API Flickr et phpFlickr. Si les lettres «A, P & I» suffisent à semer la peur dans votre cœur, ne vous inquiétez pas, nous allons le ralentir et vous donner des exemples de code complets que vous pouvez copier..

Flickr a récemment lancé The App Garden, une vitrine d’outils, de jouets et de sites utilisant l’API de Flickr pour offrir quelque chose d’utile ou de amusant. Une fois que vous maîtrisez l’utilisation de l’API, vous pouvez laisser votre imagination imaginer une nouvelle façon de l’utiliser et de soumettre votre application..

Pour ce tutoriel, je suppose que vous avez déjà un compte Flickr et que vous avez accès à un serveur qui exécute PHP et PEAR..

Le contour

Obtenir une clé d'API Flickr
Téléchargez les fichiers phpFlickr
Construire une page de galerie pour afficher nos vignettes (avec pagination)
Faire une page de photo pour montrer nos photos (avec navigation précédente et suivante)

Étape 1 - Obtenir une clé d'API Flickr

Votre clé API est votre propre série unique de chiffres et de lettres qui vous permet d'accéder aux services de Flickr. Allez ici: http://www.flickr.com/services/apps/create/apply/

Ici, vous devez décider si vous allez utiliser Flickr à des fins commerciales ou non. Flickr fournit de bonnes explications sur les choix à faire. Il est probable que vous aurez besoin d'une clé d'API non commerciale, ce que je choisis pour cette démonstration..

Suivez les étapes et remplissez tous vos détails.

Vous devriez alors recevoir votre clé unique qui apparaîtra comme une série de nombres et de lettres aléatoires comme ceci:

Vous verrez également un numéro appelé «Secret». ignorer ça pour l'instant. Pour cet exercice, nous n'avons besoin que de la clé. notez-le car nous en aurons besoin bientôt.

Si vous utilisez l'API pour créer ultérieurement un outil ou un site intéressant, vous souhaiterez peut-être soumettre et présenter tout ce que vous créez dans le jardin d'applications Flickr. Vous pouvez cliquer sur 'Modifier les détails de l'application' pour renseigner les informations..

Portez une attention particulière aux astuces et conseils donnés dans les Conditions d'utilisation de l'API et les Règles de la communauté. Si vous en abusez, vous les perdez..

Passons maintenant aux choses excitantes…

Étape 2 - Téléchargez phpFlickr

phpFlickr est un projet de Dan Coulter. C'est une classe écrite en PHP qui agit comme un wrapper pour l'API de Flickr. Les fichiers traitent les données fournies par Flickr et renvoient des tableaux en PHP, que nous utilisons pour afficher nos photos.

Nous devons télécharger les fichiers que nous inclurons plus tard sur notre page Web et effectuer tout le travail compliqué à notre place. Visitez phpflickr.com ou passez directement à la page de téléchargement sur Google Code. Dans cette démo, nous utiliserons le fichier zip: phpFlickr-2.3.1 (zip)

Téléchargez et décompressez-le. Pour ce tutoriel, nous n’avons besoin que du dossier PEAR et du fichier phpFlickr.php. Téléchargez les fichiers dans votre répertoire Web

Étape 3 - Configuration de base et configuration simple

Nous avons maintenant tout ce dont nous avons besoin pour communiquer avec Flickr et récupérer nos photos. Nous allons faire deux pages: une pour montrer nos vignettes et une pour montrer la photo. Tout le code sera disponible sous forme de pages complètes à la fin du tutoriel..

Ces exemples de code reposent tous sur le fait que vos fichiers se trouvent à la racine de votre serveur - ou tous dans le même dossier. Avant toute chose, nous devons créer un dossier de cache pour que phpFlickr fonctionne correctement. Créez un dossier appelé 'cache' dans votre répertoire Web et accordez-lui des autorisations en écriture (CHMOD 777).

Nous allons maintenant créer une page qui affiche nos vignettes et propose une pagination simple. Dans l'exemple de galerie, il s'agit de index.php - et il ressemble à ceci.

Avant d'aller plus loin, nous devons définir deux variables principales dans le fichier config.php.

Ouvrez config.php. Vous verrez qu'il demande seulement deux choses: votre clé API et votre nom d'utilisateur Flickr..

Tout d’abord, entrez votre clé d’API - le long ensemble aléatoire de chiffres et de lettres que Flickr vous a donnés plus tôt. Conservez vos informations entre les guillemets.

// insérez votre clé API $ key = "ENTREZ VOTRE CLÉ D'API FLICKR ICI";

Maintenant, pour votre nom d'utilisateur Flickr; Ce n'est pas votre nom d'utilisateur Yahoo ou votre pseudonyme Flickr, mais le nom d'utilisateur que vous utilisez pour Flickr lui-même. Pour vérifier, connectez-vous à Flickr et regardez en haut de la page où il est écrit 'Connecté en tant que…' - c'est votre nom d'utilisateur. Alors déclarons notre nom d'utilisateur en tant que variable:

// entrez votre nom d'utilisateur Flickr $ username = "VOTRE NOM D'UTILISATEUR FLICKR ICI";

Enregistrez les modifications dans config.php et envoyez-le - vous ne devriez plus avoir besoin de ce fichier.

Étape 4 - Création de la page des vignettes

Sur la page elle-même. Voici un aperçu de ce que nous faisons en haut de la page, qui répertorie tout ce qui est prêt pour l'action:

Nous allons inclure des liens Précédent et Suivant avec un peu de code plus bas dans la page. Les miniatures que nous allons afficher dépendent de la page sur laquelle nous nous trouvons. Nous lançons donc une simple instruction if qui saisira notre numéro de page. S'il y a une requête 'fpage' dans l'URL, utilisez-la. Sinon, nous sommes à la première page.

Ensuite, nous incluons le fichier phpFlickr contenant tout ce dont nous avons besoin pour communiquer avec Flickr..

// inclut le fichier core require_once ('phpFlickr.php');

Maintenant, nous lançons une nouvelle classe à partir du fichier phpFlickr en utilisant notre clé API que nous avions précédemment.

 // Lance la classe principale phpFlickr $ f = new phpFlickr ($ key);

phpFlickr utilise la mise en cache pour accélérer le processus. Il existe des options d'utilisation d'une technique de base de données, mais pour ce tutoriel, nous utiliserons l'option de dossier de cache plus simple. Nous avons besoin d'un dossier appelé «cache» accessible en écriture, ce qui signifie que le système y a accès et peut en modifier le contenu. Pour ce faire, définissez les autorisations des dossiers sur 777 via votre programme FTP. Ensuite, nous ajoutons cette ligne pour l'activer:

$ f-> enableCache ("fs", "cache");

Nous appelons la méthode people_findByUsername qui renvoie un tableau:

$ resultat = $ f-> people_findByUsername ($ username);

Dans ce tableau, nous avons également besoin de votre identifiant utilisateur unique (votre identifiant Flickr ressemblant à ceci: 11221312 @ N00, déclaré ici sous le nom $ nsid).

// récupère notre identifiant utilisateur unique dans le tableau $ result $ nsid = $ result ["id"];

Ensuite, nous appelons la méthode people_getPublicPhotos, qui renvoie à nouveau un tableau que nous appellerons $ photos. Dans cette ligne, nous passons également par notre identifiant que nous avons dans la ligne ci-dessus ($ nsid). NULL fait référence à l'option 'extras' qui ne nous concerne pas pour le moment. Nous indiquons également le nombre de vignettes que nous voulons afficher (21) et passons par la page pour commencer ($ page), qui renvoie à la variable $ page en haut de la page:

 $ photos = $ f-> people_getPublicPhotos ($ nsid, NULL, NULL, 21, $ page);

Le dernier élément dont nous avons besoin pour configurer la page est un peu d’information nécessaire au bon fonctionnement de la pagination. Nous accédons au tableau $ photos que nous avons créé ci-dessus et extrayons le nombre total de pages, plus le nombre total de photos de notre flux de photos:

$ pages = $ photos [photos] [pages]; // renvoie le nombre total de pages $ total = $ photos [photos] [total]; // retourne combien de photos il y a au total?>

Notez que nous fermons la section php ici avec?> Maintenant, nous avons tout ce dont nous avons besoin pour obtenir les 21 premières vignettes de notre flux de photos Flickr et les afficher. Nous allons continuer avec la page, en ajoutant du HTML, en utilisant PHP pour afficher les images et en incluant quelques liens de pagination simples. Commençons donc par écrire du HTML de base.

     Démo de la galerie Flickr Nettuts   Ma galerie photo

Rien d’extraordinaire ici; il suffit de configurer le code HTML et de créer une zone pour les vignettes. La prochaine étape consiste à remplir notre div appelée "thumbs" avec nos vignettes comme ceci:

Notez que nous ouvrons à nouveau php avec

Nous utiliserons une boucle foreach pour parcourir le tableau $ photos et accéder à l'élément photo ($ photo), qui contient les informations dont nous avons besoin pour les vignettes..
Voir les commentaires dans le code pour une explication de ce qui se passe:

 buildPhotoURL ($ photo, "Square"). "\" width = \ "75 \" height = \ "75 \" alt = \ "$ photo [titre] \" /> "; // lien fermé echo" "; // boucle de fin?>

Nous avons presque fini avec la page principale. Il y a des chances que vous ayez plus de 21 photos dans votre flux de photos; il faudra donc ajouter de la pagination avec des liens Précédent et Suivant pour pouvoir passer aux 21 vignettes suivantes. Les liens ressemblent à ceci:

Ce code repose sur la ligne que nous avions en haut appelant la variable $ page. Lorsque notre code appelle les photos depuis Flickr, il utilise également la variable $ page pour savoir par où commencer - revenez sur la ligne où nous avons appelé 'people_getPublicPhotos' et vous verrez que nous y avons également transmis la variable $ page. . Cette valeur est la colonne vertébrale de ce petit arrangement de pagination. Nous allons ouvrir un paragraphe avec l'id de 'nav', ouvrir les balises PHP et définir nos variables 'back' et 'next':

Nous traitons ensuite les liens "Précédent" et "Suivant" en vérifiant que nous ne sommes pas à la première ou à la dernière page, à la fermeture de php et à la balise "p"..

// si ce n'est pas la première page if ($ page> 1) echo "« Prev"; // si pas la dernière page if ($ page! = $ pages) echo"Suivant »";?>

Maintenant, nous renvoyons à certaines valeurs que nous avions au début pour afficher un peu plus à propos de notre position dans la galerie:

 Page $ page de $ pages
"; écho"$ total de photos dans la galerie
";?>

Et pour respecter les termes de Flickr et terminer la page, nous ajouterons:

Ce produit utilise l'API Flickr mais n'est pas approuvé ni certifié par Flickr..

C'est tout ce dont nous avons besoin pour produire une page qui affiche les 21 dernières photos sous forme de vignettes avec une simple navigation Précédent / Suivant. Tout comme la page d'accueil de la démo. Ensuite: la page qui affiche notre photo.

Étape 5 - Construire une page pour afficher des photos uniques

Maintenant que nous avons nos vignettes, nous avons besoin d’une page pour afficher l’image complète lorsque l’on clique dessus. Voici le code de photo.php, qui relie les vignettes. Nous commençons cette page de la même manière que la page d'index, mais au lieu du numéro de la page, nous voulons l'identifiant de la photo qui a été passée dans l'URL de notre page de vignettes:

enableCache ("fs", "cache");

Nous devons maintenant recueillir des informations sur la photo à partir de Flickr, telles que le numéro d'identification de la photo, ses dimensions, sa position par rapport à d'autres photos (contexte) et l'url de l'image..

// accède à la méthode getInfo en passant l'id de la photo $ photo = $ f-> photos_getInfo ("$ id", $ secret = NULL); // passe l'ID de la photo à la méthode getSizes pour obtenir les dimensions de notre image $ photosize = $ f-> photos_getSizes ("$ id", $ secret = NULL); // nous voulons les dimensions de la taille moyenne que nous obtenons du tableau $ photosize de la ligne précédente $ size = $ photosize [3]; // en passant à nouveau l'id de la photo, nous obtenons le contexte, qui nous dit quelles sont les photos avant et après l'id actuel $ context = $ f-> photos_getContext ("$ id"); // la méthode buildPhotoURL fait à peu près ce que vous attendez - construisez l'URL de la photo, nous transmettons $ photo et la taille requise pour renvoyer l'URL de l'image, par exemple. http://farm4.static.flickr.com/3108/3175330082_0bf4b22e47.jpg $ photoUrl = $ f-> buildPhotoURL ($ photo, "Moyen"); // Ceci nous dit qui est le propriétaire de la photo. // Ceci est une partie importante à inclure car nous souhaitons que notre galerie ne montre que nos photos et ne tire pas les photos des autres utilisateurs - plus d'explications à ce sujet dans les notes à la fin $ propriétaire = $ photo ["propriétaire"] ["Nom d'utilisateur"]; // Nous ne voulons la photo que si elle nous appartient - donc si notre nom d'utilisateur est le même que le propriétaire de la photo… nous allons écrire la page et la montrer // plus d'informations à ce sujet à la fin du tutoriel si ($ username == $ owner) ?>

Maintenant, nous sommes prêts pour le reste de la page avec les morceaux juteux.

       <?php // We access the $photo array and grab the title of the photo to use as the document title echo $photo[title]  ?>     galerie de photos
  $ photo [titre]"// La photo elle-même, vous reconnaîtrez $ photoUrl d'en haut où nous avons construit l'URL de la photo, nous accédons également au tableau $ size que nous avons préparé précédemment pour obtenir la largeur et la hauteur // et le titre encore // Nous ferons également le lien avec la version sur Flickr pour faire bonne mesure echo ""; echo ""; echo" "; // La description de la photo echo"$ photo [description]
";?>

Maintenant nous avons notre photo… et nous avons presque fini. Cette dernière partie peut sembler un peu délicate, mais ne vous découragez pas. Cela a à voir avec le contexte de la photo, comme dans, quelle photo vient ensuite dans le flux et laquelle était précédente. Comme vous le voyez sur les galeries Flickr des gens. Il semble y avoir beaucoup de code parce que, pour que cela fonctionne mieux, nous devons vérifier s'il existe une photo avant ou après la photo actuelle. S'il n'y en a pas, nous ne voulons pas de lien, nous insérons plutôt du texte normal et une image factice (noimg.png).

  "; else // sinon - affiche l'écho de l'image de remplissage vierge"";; // s'il y a une prochaine photo… if ($ context ['nextphoto'] ['id'])) echo""; else // sinon - affiche l'écho de l'image de remplissage vierge""; ; écho"
"; écho""; // s'il y a un lien précédent, écrivez un lien - sinon, juste le texte si ($ context ['prevphoto'] ['id'])) echo" «Prev"; else echo "« Prev ";; echo" | "; // s'il y a un lien suivant, écrivez un lien - sinon, uniquement le texte si ($ context ['nextphoto'] ['id'])) echo" Suivant »"; else echo "Suivant» ";; écho"
";?>

Et pour finir la page, nous allons inclure un lien vers la galerie principale, un peu de texte pour Flickr et fermer le code html..

«Galerie principale

Ce produit utilise l'API Flickr mais n'est pas approuvé ni certifié par Flickr..

Braquage! Encore une chose… nous terminons la déclaration if juste avant le début du code html… à nouveau, voir les notes à la fin pour savoir pourquoi nous le faisons.

Et voila. Une galerie de photos pour votre site Web, alimentée par votre compte Flickr. Jetez un coup d'œil à la page de démonstration pour voir à quoi ça ressemble avec un peu de balisage supplémentaire et un style ajouté. Ceci est une implémentation très basique de l'API Flickr; cela ne fait que gratter la surface de ce que vous pouvez faire, mais il fournit une belle galerie de photos pour votre site / blog que vous pouvez facilement mettre à jour et conserver via Flickr.

NOTES & EXTRA

Dans ce tutoriel, nous récupérons les photos publiques d'un utilisateur. Dans photo.php, nous faisons référence à $ owner dans ce tutoriel. À ce stade, nous nous assurons que la photo affichée appartient au propriétaire de la photo. Si nous laissons cela de côté, votre page de photo peut attirer la photo publique de n'importe quel utilisateur, et ce n'est évidemment pas ce que nous voulons. Cela renvoie aux conseils fournis par Flickr dans ses directives..

Vous devez utiliser l'API pour accéder à vos propres images uniquement ou à celles que vous êtes autorisé à utiliser. Si vous affichez les images de quelqu'un d'autre, vous devez mentionner le nom du propriétaire de l'image et le nom de l'image. Flickr indique également que "… les pages d'autres sites Web affichant du contenu hébergé sur flickr.com doivent fournir un lien depuis chaque photo ou vidéo vers sa page sur Flickr".
Il existe d'autres moyens d'afficher vos photos à l'aide de la méthode de recherche de l'API, mais cette procédure est un peu plus compliquée et vous oblige à fournir une authentification. info sur qui peut être trouvé ici.
Cette démonstration est un exemple très simple de ce que vous pouvez faire avec l’API Flickr. Vous pouvez aller beaucoup plus loin et faire pratiquement tout ce que fait Flickr: obtenir des ensembles de photos, afficher des tags et des commentaires, afficher des photos privées et même télécharger des images. Consultez la documentation de l'API ici: http://www.flickr.com/services/api/ Vous pouvez comparer les méthodes au fichier phpFlickr.php..
Tout comme nous avons appelé dans nos photos en utilisant $ photos = $ f-> people_getPublicPhotos ($ nsid, NULL, 21, $ page); vous pouvez faire la même chose avec un ensemble. Par exemple, $ photos = $ f-> photosets_getPhotos ("$ set", $ extras, $ privacyfilter, 21, $ page); est un moyen d'obtenir 21 photos par page à partir d'un ensemble, où $ set = l'identifiant de l'ensemble (quelque chose comme 72157594488289220), puis en utilisant foreach ($ photos ['photo'] en tant que $ photo) … pour obtenir les images, etc..
Si vous avez besoin de voir quelle partie du tableau dont vous avez besoin, vous pouvez utiliser print_r () pour lister le tableau et voir comment trouver la valeur dont vous avez besoin. Entourez-le avec
```
 balises pour rendre la sortie lisible.
 
```
Les chemins de fichiers de cette démo partent du principe que tout se trouve dans le même dossier (ou tous à la racine) - sentez-vous libre de déplacer des éléments mais assurez-vous de changer les chemins.
Un grand merci à Dan Coulter pour avoir écrit l'excellent phpFlickr. Assurez-vous de consulter la documentation de phpFlickr: http://phpflickr.com/docs/ pour plus de conseils et astuces pour aller plus loin.

Amusez-vous et montrez-nous ce que vous proposez!

Suivez-nous sur Twitter ou abonnez-vous au fil RSS Nettuts + pour obtenir les meilleurs tutoriels de développement Web sur le Web..

Code