Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP
Code

Как создать фотогалерею с помощью Flickr API

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Svetlana (you can also view the original English article)

Flickr, без сомнения, самый большой и лучший веб-сайт по фотографии в Интернете. Существует множество виджетов, значков и плагинов, которые позволяют отображать ваши последние фотографии с Flickr на вашем веб-сайте, но мы сделаем еще один шаг, нажав прямо на Flickr и интегрировав ваш фотопоток в свой веб-сайт,предоставляя вам фотогалерею, которую легко обновить.


Мы будем создавать эту фотогалерею, используя Flickr API и phpFlickr. Если букв «A, P & I» достаточно для того, чтобы вселить страх в ваше сердце, не волнуйтесь, мы сделаем это медленно и приведем примеры полного кода, которые вы сможете скопировать.

Final Project

Flickr также недавно запустил The App Garden, который представляет собой набор инструментов, игрушек и сайтов, которые используют Flickr API, чтобы предложить что-то полезное или интересное. Как только вы освоите использование API, вы можете позволить своему воображению придумать новый способ его использования и отправки своего приложения.

В этом руководстве я предполагаю, что у вас уже есть учетная запись Flickr и доступ к серверу, на котором работают PHP и PEAR.

Наброски

  • Получить ключ Flickr API
  • Загрузка файлов phpFlickr
  • Создайте страницу галереи для отображения наших миниатюр (с нумерацией страниц)
  • Сделайте страницу фотографий, чтобы показать наши фотографии (с предыдущей и следующей навигацией)

Шаг 1 - получить ключ Flickr API

Ваш ключ API - это ваша уникальная серия цифр и букв, которые предоставляют вам доступ к услугам Flickr. Зайдите сюда: http://www.flickr.com/services/apps/create/apply/

Здесь вы должны решить, собираетесь ли вы использовать Flickr в коммерческих или некоммерческих целях. Flickr дает хорошие объяснения относительно того, что вы должны выбрать, скорее всего, вам понадобится некоммерческий ключ API, который я выбрал для этой демонстрации.

Следуйте инструкциям и заполните все свои данные.

Затем вам должен быть представлен ваш уникальный ключ, который будет отображаться в виде последовательности случайных чисел и букв, например:

API key example

Вы также увидите число под названием «Секрет»; игнорируйте это сейчас. Для этого упражнения нам нужен только ключ; запишите это, поскольку нам это понадобится в ближайшее время.

Если вы позже используете API для создания классного инструмента или сайта, вам может потребоваться отправить и добавить все, что вы создадите в Flickr App Garden. Вы можете нажать «Изменить данные приложения», чтобы заполнить информацию.

Обратите особое внимание на советы и рекомендации, приведенные в Условиях использования API и Принципах сообщества. Если вы злоупотребите этим, вы потеряете его.

Теперь о захватывающих вещах ...

Шаг 2 - Загрузка phpFlickr

phpFlickr - это проект Дэна Коултера. Это класс, написанный на PHP, который действует как оболочка для API Flickr. Файлы обрабатывают данные, предоставленные Flickr, и возвращают массивы в PHP, которые мы используем для отображения наших фотографий.

Нам нужно скачать файлы, которые мы позже включим в нашу веб-страницу, и сделаем всю сложную работу за нас. Посетите phpflickr.com или перейдите прямо на страницу загрузки в Google Code. В этой демонстрации мы будем использовать zip-файл: phpFlickr-2.3.1 (zip)

Download link

Скачайте и распакуйте его. Для этого урока нам нужны только папка PEAR и файл phpFlickr.php. Загрузите файлы в свой веб-каталог

Шаг 3 - Базовая настройка и простая настройка

Теперь у нас есть все, что нам нужно для связи с Flickr и получения наших фотографий. Мы сделаем две страницы: одну, чтобы показать наши миниатюры, и одну, чтобы показать фотографию. Весь код будет доступен как полные страницы в конце урока.

Все эти примеры кода работают на основе того, что ваши файлы находятся в корне вашего сервера - или все в одной папке. Прежде всего, нам нужно создать папку кеша, чтобы phpFlickr работал правильно. Создайте папку с именем «cache» в своем веб-каталоге и предоставьте ей права на запись (CHMOD 777).

Теперь мы создадим страницу, которая отображает наши миниатюры и имеет несколько простых страниц. В галерее примеров это index.php - и выглядит так.

Прежде чем идти дальше, нам нужно установить две основные переменные в файле config.php.

Откройте config.php. Вы увидите, что он запрашивает две вещи: ваш ключ API и ваше имя пользователя Flickr.

Во-первых, введите свой ключ API - длинный случайный набор цифр и букв, которые вы дали ранее Flickr. Держите вашу информацию внутри кавычек.

Теперь для вашего имени пользователя Flickr; это не ваше имя пользователя для входа в Yahoo или экранное имя Flickr, а имя пользователя, которое вы используете для самого Flickr. Чтобы проверить дважды, войдите в Flickr и посмотрите вверху страницы, где написано «Signed as ...» - это ваше имя пользователя. Итак, давайте объявим наше имя пользователя как переменную:

Сохраните изменения в config.php и загрузите - вам больше не нужен этот файл.

Шаг 4 - Создание эскизов страницы

Final Project

На самой странице. Вот разбивка того, что мы делаем, в верхней части страницы, в которой все готово к действию:

Мы собираемся включить несколько ссылок «Предыдущая» и «Следующая» с небольшим фрагментом кода внизу страницы. Миниатюры, которые мы собираемся показать, зависят от того, на какой странице мы находимся, поэтому мы запускаем простое выражение if, которое захватит номер нашей страницы. Если в URL есть запрос 'fpage', используйте его. Если нет, мы на первой странице.

Далее мы включаем основной файл phpFlickr, в котором есть все, что нам нужно для связи с Flickr.

Теперь мы запускаем новый класс из файла phpFlickr, используя наш ключ API, который мы получили ранее.

phpFlickr использует кэширование для ускорения процесса. Существуют варианты использования техники базы данных, но в этом уроке мы будем использовать более простой вариант папки кеша. Нам нужна папка с именем «cache», доступная для записи, то есть система имеет к ней доступ и может изменять ее содержимое. Для этого установите права доступа папок к 777 через вашу FTP-программу. Затем мы добавляем эту строку, чтобы включить его:

Мы вызываем метод people_findByUsername, который возвращает массив:

Из этого массива нам также нужен ваш уникальный идентификатор пользователя (ваш идентификатор Flickr, который выглядит следующим образом: 11221312 @ N00, объявленный здесь как $ nsid), который мы получаем примерно так:

Затем мы вызываем метод people_getPublicPhotos, который снова возвращает массив, который мы будем называть $ photos. В этой строке мы также передаем наш идентификатор, который мы получили в строке выше ($ nsid). NULL относится к опции «extras», которая нас сейчас не касается. Мы также указываем количество миниатюр, которые мы хотим отобразить (21), и проходим через страницу для начала ($ page), которая связана с переменной $ page в верхней части страницы:

Последнее, что нам нужно, чтобы настроить страницу, это немного информации, которая нужна нам для работы подкачки. Мы получаем доступ к массиву $ photos, который мы создали выше, и извлекаем общее количество страниц плюс общее количество фотографий в нашем фотопотоке:

Заметьте, что мы закрываем раздел php здесь с помощью?> Теперь у нас есть все, что нужно, чтобы получить первые 21 миниатюру из нашего фотопотока Flickr и отобразить их. Теперь мы продолжим со страницей, добавив немного html, используя PHP для показа изображений и добавив несколько простых ссылок на страницы. Итак, давайте начнем с написания некоторых основных HTML.

Здесь нет ничего необычного; просто настроить HTML и начать область для миниатюр. Следующим шагом является заполнение нашего div, называемого «большими пальцами», такими эскизами:

Thumbnails example

Обратите внимание, что мы снова открываем php с помощью

Мы будем использовать цикл foreach для запуска массива $ photos и перехода к элементу photo ($ photo), который содержит информацию, необходимую для миниатюр.
Смотрите комментарии в коде для объяснения того, что происходит:

Мы почти закончили с главной страницей. Скорее всего, у вас есть более 21 фото в вашем Фотопотоке; поэтому нам нужно добавить несколько страниц с ссылками «Предыдущая» и «Следующая», чтобы мы могли перейти к следующим 21 эскизам. Ссылки выглядят так:

Pagination example

Этот код опирается на строку, которая у нас была вверху и вызывала переменную $ page. Когда наш код вызывает фотографии из Flickr, он также использует переменную $ page, чтобы узнать, с чего начать - оглянемся на строку, где мы назвали people_getPublicPhotos, и вы увидите, что мы также передали туда переменную $ page , Это значение является основой этого небольшого пейджингового соглашения. Мы откроем абзац с идентификатором «nav», откроем теги PHP и определим переменные «back» и «next»:

Затем мы обрабатываем фактические ссылки «Предыдущая» и «Следующая», проверяя, что мы не на первой или последней странице, закрываем php и закрываем тег «p».

Теперь мы вернемся к некоторым значениям, которые у нас были в начале, чтобы показать немного больше о том, где мы находимся в галерее:

И чтобы соблюдать условия Flickr и завершить страницу, мы добавим:

Это все, что нам нужно для создания страницы, которая отображает последние 21 фотографию в виде миниатюр с простой навигацией «Предыдущая / Следующая». Так же, как домашняя страница на демо. Далее: страница, которая отображает нашу фотографию.

Шаг 5 - Создание страницы для отображения одной фотографии

Single Page

Теперь, когда у нас есть свои миниатюры, нам нужна страница, чтобы показать полное изображение при нажатии на него. Вот код для photo.php, на который ссылаются миниатюры. Мы начинаем эту страницу аналогично странице индекса, но вместо номера страницы нам нужен идентификатор фотографии, которая была передана в URL с нашей страницы миниатюр:

Теперь нам нужно собрать некоторую информацию от Flickr о фотографии, такую ​​как идентификационный номер фотографии, ее размеры, где она расположена относительно других фотографий (контекст) и URL-адрес изображения.

Теперь мы готовы к остальной части страницы с сочными кусочками.

Теперь у нас есть наше фото ... и мы почти закончили. Этот последний бит может выглядеть немного сложнее, но не стоит откладывать на это. Это связано с контекстом фотографии, например, какая фотография будет следующей в потоке, а какая предшествовала ей. Так же, как вы видите в галереях Flickr людей. Причина, по которой кажется, что кода много, состоит в том, что для того, чтобы это работало лучше, мы должны проверить, есть ли фотография до или после текущей фотографии. Если нет, нам не нужна ссылка, вместо этого мы вставляем обычный текст и фиктивное изображение (noimg.png).

И чтобы закончить страницу, мы добавим ссылку на основную галерею, немного текста для Flickr и закроем HTML.

Задержитесь! Еще одна вещь ... мы заканчиваем оператор if непосредственно перед началом html ... снова, смотрите примечания в конце о том, почему мы делаем это.

И там у вас есть это. Фотогалерея для вашего веб-сайта, созданная на основе вашей учетной записи Flickr. Взгляните на демонстрационную страницу, чтобы посмотреть, как она выглядит, с добавлением дополнительной разметки и стиля. Это очень простая реализация API Flickr; это лишь поверхностное представление о том, что вы можете сделать, но предоставляет прекрасную фотогалерею для вашего сайта / блога, которую вы можете легко обновлять и поддерживать с помощью Flickr.

ПРИМЕЧАНИЯ И ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ

  • В этой обучающей программе мы восстанавливаем общественные фото пользователя. В пределах фото.php, мы ссылаемся $на владельца в этой обучающей программе. В этот момент мы гарантируем, что показанное фото принадлежит к владельцу фотографии. Если мы пропустим это, ваша страница с фотографией может добавить общедоступную фотографию любого пользователя, и это, очевидно, не то, что мы хотим. Это восходит к советам, которые Flickr дает в своих рекомендациях.


    Вы должны использовать API для доступа только к своим собственным изображениям или к тем, на которые у вас есть разрешение. Если вы отображаете чужие фотографии, вы должны указать имя владельца изображения и имя изображения. Flickr также говорит, что «... на страницах других веб-сайтов, на которых отображается контент, размещенный на flickr.com, должна быть ссылка с каждой фотографии или видео на свою страницу на Flickr».

  • Существуют и другие способы отображения фотографий с помощью метода поиска в API, но это немного сложнее и требует от вас аутентификации - другими словами, используйте API для входа в систему и сообщите Flickr, что это действительно вы - больше информацию об этом можно найти здесь.

  • Эта демонстрация является очень простым примером того, что вы можете сделать с помощью Flickr API. Вы можете сделать это намного дальше и фактически делать практически все, что делает Flickr: получать наборы фотографий, показывать теги и комментарии, отображать личные фотографии и даже загружать изображения. Посмотрите документацию по API здесь: http://www.flickr.com/services/api/ Вы можете проверить методы по отношению к файлу phpFlickr.php.
  • Так же, как мы вызывали наши фотографии, используя $ photos = $ f-> people_getPublicPhotos ($ nsid, NULL, 21, $ page); Вы можете сделать то же самое с набором. Например, $ photos = $ f-> photosets_getPhotos ("$ set", $ extras, $ privacyfilter, 21, $ page); способ получить 21 фотографию на странице из набора, где $ set = установленный идентификатор (что-то вроде 72157594488289220),затем используйте foreach ($ photos ['photo'] как $ photo) {... для получения изображений и т. д.
  • Если вам нужно узнать, какая часть массива вам нужна, вы можете использовать print_r (), чтобы вывести список из массива и посмотреть, как найти нужное вам значение. Окружите его<pre> тегами, чтобы сделать вывод разборчивым.

  • Все пути к файлам в этой демонстрации работают в предположении, что все находится в одной и той же папке (или все в корне) - не стесняйтесь перемещаться, но не забудьте изменить пути
  • Огромное спасибо Дэну Коултеру за то, что он написал отличный phpFlickr. Обязательно ознакомьтесь с документацией phpFlickr: http://phpflickr.com/docs/, чтобы получить дополнительные советы и рекомендации по дальнейшим действиям.

Забавляйтесь, и показывайте нам, что вы придумываете!

  • Подпишитесь на нас в Твиттере или подпишитесь на ленту Nettuts + RSS для получения лучших учебных материалов по веб-разработке.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.