WordPress: галереи рисунков без плагинов

Нашел я для вас очень интересный код, связанный с отображением рисунков в WordPress. Я постараюсь в будущем использовать его в своих записях, так как это красиво и чрезвычайно удобно!

Все вы знаете такую штуку, как NextGen, которая является монстрообразным плагином для отображения альбомов/галерей ваших рисунков. Так вот теперь забудьте его! Отныне есть возможность работы с родными функциями WordPress для создания и управления фото-галереями.

Настройка галереи

Для начала, зайдите на страницу “Настройки → Медиафайлы” [рис. 1]. Там вам будет необходимо настроить размеры миниатюры, средние и большие размеры. Миниатюру советую ставить 100-150 пикселей максимум (у меня 120). Средние размеры – внимание! – ставьте по внутреннему размеру блока, в котором отображается ваша запись, минус 10 пикселей. Для этого вам надо воспользоваться или аддоном для Firefox MeasureIt, или программкой для Adobe Air Pixus, или отдельной независимой программой JR Screen Ruler или виджетом-линейкой для Opera. Крупный размер ставьте по своему усмотрению, у меня он равен среднему размеру. Такие хитрости с пикселями нам нужны для красоты, вы потратите на это 2-3 минуты, но результат вам понравится.

Далее переходим непосредственно к созданию альбомов/галерей, но перед этим я вам расскажу, как ими пользоваться, саму идеологию и потенциальные возможности.

Суть идеи

Итак, у вас есть 12 фотографий определенной тематики (предположим, посвященных вашему последнему катанию на роликах, где вы выделываете невероятные трюки), и вы хотите ими поделиться со своими читателями, друзьями. И тут вас есть 2 возможности:

  1. создать отдельную рубрику “Мой отдых”, в которой и опубликовать все фотографии в одной записи (дальше расскажу, как именно);
  2. создать страницу “Мой отдых”, в ней – подстраницу “Ролики”.

Так вот рубрика (или страница) – это галерея, а запись (или подстраница) – это альбом. Какой формат выбрать – вам виднее, исходя из предполагаемой частоты обновлений. Лично я остановился бы на рубрике/записи.

Предположим, вы последовали моему совету (лишь предположим!) и, соответственно, альбом у вас – это запись. Так что создадим ее!

Процесс создания и настройки отображения

В новой записи вы вводите заголовок (например, “Галерея рисунков”), если хотите, то вводите и текст (ничего сложного, правда?). А потом нажимаете на кнопочку “Добавить изображение”. Откроется стандартное окно загрузки медиафайлов. Нажмите “Выбрать” и выбираете ваши 12 фоток (они у вас в одной папке, так ведь?). Начнется процесс массовой загрузки [рис. 2]. Нажимаете “Сохранить изменения”. В открывшемся окне прокрутите вниз и вы увидите кучу интересных опций [рис. 3]. Для рисунков можно менять порядок на произвольный – просто нажмите на соответствующую строку и перетащите, как вам удобнее. Напротив самих рисунков вы увидите ссылку “Показать”, после нажатия на которую вы сможете изменить:

  • Заголовок (будет использоваться для отображения на отдельной странице рисунка, а также в галерее медиафайлов самого WordPress);
  • Текст (это атрибут alt для рисунка, виден только если в браузере пользователя отключено отображение рисунков);
  • Подпись (текст, который находится сразу под рисунком, обычно оформляется в WP стиле);
  • Описание (отображается в админке, но может быть отображено и на отдельной странице рисунка);
  • Ссылка, выравнивание, размер – тут все понятно. Для размера поставьте или средний или большой, имеет значение только если указана ссылка на файл.
  • Не нажимайте на кнопку “Вставить в запись”!
  • Нажмите на кнопку “Сохранить изменения” в конце списка файлов.

Далее идут настройки галереи, можете поиграть с ними самостоятельно, но для начала поставьте так, как у меня на рис. 3. А потом нажмите кнопку “Вставить галерею”. И вот она – магия. Вы не увидите эти рисунки сейчас в режиме визуального редактирования текста, pnj будет непонятный блок. Если вы переключитесь в режим HTML, то увидите, что там появился такой код:

[gallеry cоlumns=”4″]

Именно его можно использовать для вставки в любом месте вашего поста (только напишите эти 2 слова английскими буквами, потому что WP съел бы их и для ознакомления я заменил гласные а, е, о на русские эквиваленты) галереи рисунков. О его настройках поговорим чуть позже.

Отображение

В итоге вы получите в тексте записи компактный блок с миниатюрами рисунков [рис. 4]. Как по мне – так очень даже красиво получилось :)

С помощью Firebug вы можете увидеть получившуюся верстку, а также поэкспериментировать с изменениями стилей (не забудьте все сохранить потом в вашем файле стилей).

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

Отдельная страница рисунка

Отдельная страница рисунка

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

Мат. часть

Ну а теперь вся техническая сторона дела. Естественно, что встроенная галерея имеет ряд настроек (помимо тех, что представлены на рисунке 3), которые можно вписать вручную для более гибкого отображения миниатюр рисунков.

В дальнейшем под вставкой настроек я буду подразумевать расположение опции после слова gallery через пробел и до закрывающего тега ]. Опции разделяйте пробелами. Значения опций пишут после названия и знака = в двойных английских кавычках (сочувствую, если у кого-то стоит типограф).

columns

Количество колонок, которые будет использоваться для отображения рисунков. Советую использовать от 3 до 5, в зависимости от ширина вашего шаблона.

id

Вы можете в текущую запись прикрепить все рисунки, которые прикреплены к другой записи. То есть предположим на странице с id=”5″ у вас будут показываться рисунки записи с id=”234″. Удобно для создания альбомов на страницах. По умолчанию: id текущей записи.

size

Размер используемых рисунков в блоке галереи. По умолчанию используются миниатюры (поэтому можете не писать эту опцию вовсе), но если вам надо большие рисунки, то можете вписать в качестве значения medium, large или full.

orderby

Можно изменять порядок сортировки миниатюр рисунков. По умолчанию: “menu_order ASC”. Есть варианты: “ID ASC” и “RAND”. ID – это ID рисунка, посмотреть его можете на странице медиафайлов в библиотеке.

itemtag

Эта и 2 следующие опции нужны для тех, кто хочет изменить стандартное отображение рисунков. itemtag – это XHTML тег, который окружает каждый элемент галереи. По умолчанию: “dl”. Можно поставить “div”, к примеру.

icontag

Это XHTML тег, который окружает все миниатюры галереи. По умолчанию: “dt”. Можно поставить “span”, к примеру.

captiontag

Это XHTML тег, который окружает заголовки (если таковые есть) под миниатюрами. По умолчанию: “dd”. Можно поставить “p”, к примеру.

link

Если вы значение этой опции напишите “file”, то при клике на миниатюру пользователя будет перенаправлять на сразу на первоначальный файл большого размера. Отдельная страница рисунка (на которой можно комментировать этот самый рисунок) будет игнорироваться движком. По умолчанию: отдельная страница рисунка.

include

Можно выбрать только отдельные рисунки из библиотеки медиафайлов (предположим, самых счастливых моментов, или всех скриншотов всех опубликованных шаблонов сайта) для отображения в галереи. По умолчанию: все прикрепленные к этой записи/странице рисунки. Формат записи: include="34,54,25".

exclude

Если вы не хотите показывать какой-то конкретный рисунок их всех, что были загружены к текущей записи, то вы можете вырезать его с помощью этой опции. Формат: exclude="34". Я этим тегом вырезал отображение пятого рисунка (Сентябрь 2010).

А вся мат.часть на английском языке находится вот на этой странице кодекса.


Надеюсь, вам понравилась подобная идея организовывать ваши фото-галереи. Если возникли вопросы – задавайте в комментариях, разберемся. Буду благодарен за ретвиты :)

комментариев 26

  1. Jettochkin:

    прикольно :)

    Сделать бы ровно как в любой социальной сети.. vkontakte, mirtesen и т.п. – там работа с фотками реализована удобно для пользователя..

  2. что мне сейчас не хватает от всяких медиа-плагинов:
    1. соответствующих галерей для групп. их просто нет
    2. возможности удобно комментировать фотографии
    3. пока не нашлось возможности рейтинговать фото
    4. и очень не хватает видео-возможностей.. чтобы не было особой разницы между фото и видео.

    может кто подскажет… как добиться желаемого? :)

    • Возможно, вам подойдет BuddyPress Kaltura Media Component. Но мне он не понравился из-за привязки к чужому сайту. Покрутите его, вдруг понравится.

      • Смотрел. Пробовал. Не понравился именно по этой же причине.

        • Что ж, тогда у вас 3 варианта:
          1) купить BP Gallery, а потом просить кого-то его допиливать;
          2) заказать (у меня, к примеру) создание индивидуального гибкого медиа-плагина;
          3) ждать BuddyPress 1.4 :)

          • Купить – пока не мой путь :) Я уже писал тут когда-то, что не готов вкладывать ни копейки в своей проект… только своё очень дорогое время :)
            Я готов ждать BP 1.4… а можно где-то увидеть список ожидаемых новшеств там? И в частности какие из них должны решить эти мои запросы?

            P.S. Вот чего бы стоило добавить в NG возможность добавлять в группы.. вроде мелочная доделка, просят её у автора.. а он всё игнорирует..

          • По ходу я ошибся по поводу BP 1.4… Вот, почитайте на этой странице потенциальные новшества.

          • Да уж… не впечатлил меня их родмэп, особенно учитывая сколько времени они это будут делать.
            Я больше склоняюсь к подходу, что такие вещи как галереи – удел отдельных плагинов.

            Кстати, раз уж тут так быстро отвечают.. :)
            Не встречался ли плагин “авто-патча”? Идея: мне приходится делать много правок в движках WP,BP и плагинах.. И они периодически (а иногда часто) обновляются. Вот был бы плагин, который контролировал diff’ы и автоматом пытался их применить когда почувствовал что исходный файл обновился…

          • Такого точно нет. А почему вы редактируете файлы ядра? Не лучше ли использовать хуки и фильтры, которые есть везде? С их помощью можно изменить абсолютно все – и вам не придется следить за изменениями вручную.

          • Может я неопытнен.. Как можно изменить код, в котором нет ни фильтра, ни экшена?
            Пример: запрет регистрации с ником из трёх символов.. без подчёркиваний.. Это в четырёх местах проверяется отдельно.. без хуков. Как это перекрыть?
            Хотя.. есть такой плагин.. надо бы посмотреть как он это делает. Но пока не смотрел.

            Правки идут из-за ошибок.. недоработок.. Например xmlrpc в принципе не работает на пост в другой блог (того же автора). Хотя не хватает-то там одной строки.. кое-где вставлена… а много где не вставлена. забыли?

          • Часто нужная вам функция, в которой нет хука, вызывается в другой, где он есть. Соответственно, можно переписать материнскую функцию, ту, что на уровень выше.

          • Эдак можно много чего переписать путём копирования кода… А функции эти ооочень большие по объёму кода могут быть.
            Иногда так можно сделать и делаю, но как-то часто получается, что это очень неудобно и неудачно.
            Потому и задумываюсь о таком плагине :)
            Вроде бы.. чего сложного. Хотя бы ручное добавление изменённого файла в список или даже всего плагина, хук на окончание процесса обновления (или ручной запуск), контроль изменённых файлов по md5, и накатывание патчей на изменённые файлы.. вывод результата.
            Расфантазировался.

  3. Mac:

    Еще совсем недавно узнал о теге [embed][/embed], который без плагинов вставляет YouTube, фликр и прочее. Эх, добавить бы туда rutube и еще парочку отечественных…

    Кстати, ребята, подскажите пожалуйста, есть ли в WP плагины, которые позволяют в блог вставлять коды вставки с сайтов – тот же YouTube обычно пользователи пытаются вставить кодом, это интуитивно понятнее. Или, например, Prostopleer. Да много сервисов, в которых есть функция “Код для блога”, и для этого блога нихрена-то и не работает в WP. А про юзанье плагинов каждому юзеру объяснять уже надоело. Все ведь должно быть интуитивно понятно.

    Еще такой вопрос. Есть плагин BP Album+. Неплохой, но вот буквально сегодня наконец обновился. Ждал от него кучи нововведений – а нихрена. Какой-то мелкий багфикс за несколько месяцев. На гуглокоде нашел их ветку. Там плагин трансформировался в нечто крутое под наванием BP Media, и работа над ним кипит. Я так понял, что BP Album+ превратится в BP Media. Но что-то это превращение затянулось. Разъясните, кто знает, в чем там дело, и стоит ли ждать обновления Album+ в Media?

    • Jettochkin:

      WP никогда не был дружелюбным кроме как к администратору и BP совершенно не хочет менять это…

      Пишем доп-движок (так как некоторые юзерфернд фишки – требуют подмену WP и BP)

  4. vovasik:

    коль речь пошла о nextGen, давно хотел спросить как подружить js из adminbar-a и js других плагинов?? Например того же FancyBox for WordPress (красивые эфекты для nextGen). Они не очень ладят

  5. vovasik:

    сам отвечаю на этот вопрос в global.js нужно jQuery исправить на $ тогда будут работать скрипты на fancybox-for-wordpress. про другие конфликты не знаю т.к. про js почти не ведаю

    P.S. спс автору блога доступно пшет!

  6. Cheshir:

    Каким образом сделать:
    1. чтобы во вновь создаваемой записи и массово добавляя картинки (одним столбцом), эти самые картинки в итоге выходили fullsize в посте, а не привьюшками?
    2. при решении первой задачи, чтобы фуллсайз не имел ссылки на отдельное окно для просмотра все того же фуллсайз (не открывался в отдельном окне, и вообще не имел линка, просто картинка)

    3. Не по теме, но может поможете… На главной странице список постов, скажем если фотоподборка и стоит привьюшка, где и что править чтобы привьюшка появлялась между названием поста и методанными автора

    Название поста

    Картинка

    By Cheshir On 31.12.2011 · 6 коментария(ев) [Изменить]

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

    4. В продолжение 3его вопроса – Каким образом заставить выводить на главной странице (список постов) картинки постов не в миниатюре, а в среднем или фуллсайз размерах (увеличение размеров превью не подходит)?

  7. ответы на ваши вопросы:
    1. [gallery columns="1" size="large"]
    2. ссылка либо на файл, либо на страницу. другое только ковырянием в коде.
    3. есть еще такое понятие, как “миниатюра”. в любом случае править в стилях темы.
    4. опять же использовать миниатюру и размеры отображения оной в стиле вашей страницы.

  8. vovasik:

    в в конце статьи вообще ошибка

    Формат: include=”34″. а нужно наоборотФормат: exclude.

    А есть ли возможность стандартными средствами получить id
    прикрепленных к посту картинок?

    меня в последние дни этот вопрос начал волновать

    • Формат: include=”34″. а нужно наоборотФормат: exclude.

      Не ошибка. И include, и exclude поддерживается. Проверил в кодексе.

      есть ли возможность стандартными средствами получить id прикрепленных к посту картинок?

      Вот пример.

      • vovasik:

        я не о кодексе. В заголовке про exclude а пример дается ” Формат: include=”34″ ” как то не логично, а за пример спасибо возможно поможет исключить миниатюрку из галереи (по умолчанию)

  9. прикольно, не знала, а постоянно плагины для галереи использую

  1. 19.09.2010

    […] This post was mentioned on Twitter by Milordk, slaFFik. slaFFik said: WordPress: создание галерей рисунков без плагинов | CosyDale.com: WordPress (MS) и BuddyPress http://t.co/91aMkhf […]

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *