Школа Email-маркетинга

Стандартная галерея изображений WordPress и работа с ней

Галерея для WordPressЗдравствуйте, друзья!

Я продолжаю свой цикл статей о работе с блогом на базе CMS WordPress.

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

 

Содержание

Что такое галерея?

Что она собой представляет? Это просто несколько фотографий, расположенных ровными рядами. Движок WordPress имеет в своем функционале встроенный редактор галереи. О нем и пойдет речь, но сразу следует отметить, что его возможности очень ограничены. В этом редакторе нельзя создать галерею с использованием различных визуальных эффектов, таких как увеличение картинки, слайд-шоу, перелистывание и т. д.

Использование плагинов: за и против

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

Например, когда я создал свой блог, я сразу установил на него плагин фотогалереи. Он давал возможность просматривать фотографии, плавно увеличивая размер, в виде слайд-шоу и т. д., но после анализа загрузки с помощью плагина P3 (Plugin Performance Profiler) оказалось, что он потребляет слишком много ресурсов, и из-за него значительно увеличивается время загрузки сайта. Пришлось его удалить. Но нужен ли он? У меня не фотоблог, просматривать в увеличенном изображении нужно лишь некоторые изображения, слайд-шоу вообще не требуется, поэтому такой плагин на моем блоге просто не нужен. Плавное увеличение некоторых картинок реализовано с помощью встроенного кода.

Вот поэтому, прежде чем решать, какой вид галереи вам нужен, хорошо подумайте.

Вставка в запись

Но вернемся к встроенному в WordPress редактору. Чтобы вставить галерею в запись, также как и для вставки изображения, щелкаем на кнопке Добавить медиафайл, но потом в открывшемся окне слева выбираем пункт Создать галерею.Создать галерею

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

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

После выбора фотографий следует настройка. Здесь параметров немного.Настройка галереи

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

Следующий параметр – число колонок. Оно зависит от ширины страницы вашего блога и выбранного размера фотографий.

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

И последнее, что можно выбрать – размер изображения: миниатюра, средний, большой, полный. Удобно, когда изображения, помещаемые в запись, имеют одинаковые размеры или, хотя бы, одинаковые пропорции. Тогда их можно располагать по несколько в ряд. С разными по размерам изображениями это будет выглядеть не очень хорошо.

Редактирование галереи

Редактирование позволяет легко и быстро выбрать наиболее удачный вариант отображения.

Чтобы перейти к этой операции, кликаем по любой картинке и видим две кнопки Изменить и Удалить. Нажимаем Изменить и приступаем к редактированию.Редактирование

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

Во многих случаях стандартной галереи WordPress для блога вполне достаточно, но если вам этого мало и хочется дополнительных эффектов – устанавливайте специальный плагин. Вот список некоторых, которые можно попробовать:

  • NextGEN Gallery
  • Grand Flagallery
  • Plugin Photo Gallery
  • Tribulant Slideshow Gallery
  • Heroic Gallery Manager
  • Huzzaz Video Gallery
  • oQey Gallery
  • Fancy Gallery
  • Photospace Gallery
  • Eazyest Gallery
  • WOW Slider

Возможно, в одном из постов я напишу о них подробнее.

Подписывайтесь на обновления блога, чтобы не пропустить новые, интересные и полезные статьи.

Пример

Я уже писал, что еще одно мое увлечение – фотография, поэтому в качестве примера предлагаю посмотреть подборку некоторых моих фотографий. Их размер 640*480, расположение в один столбец.

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

Поделитесь статьей в социальных сетях.

Адаптивная, SEO подготовленная WordPress тема
Очень плохоПлохоСреднеХорошоОтлично (голосов: 2 в среднем: 3,00 из 5)
Загрузка...
Понравилась статья? Поделиться с друзьями:
Комментарии: 6
  1. Надежда

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

    1. Владимир (автор)

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

  2. Юрий

    Владимир, добрый день. Может подскажите, где можно поменять стили подписей к миниатюрам галереи. Что-то никак не могу найти. Отцентровать, сделать жирным и т.д.
    Вот здесь хттп://2018.brick.by/katalog-brick.хтмл

    1. Владимир (автор)

      Здравствуйте, Юрий!
      Чтобы изменить стили подписей, нужно редактировать файл таблицы стилей style.css. Можно попробовать сделать так: в стилях есть класс foto_caption, который отвечает за стиль подписи, но он прописан только для размеров экрана max-width : 620px. Его нужно вписать для других размеров, и там редактировать. Этот стиль в строчках 979-984 http://prntscr.com/iwdkkb
      Подчеркнутую часть копируем и вставляем для других размеров, например, для размера 1250 px в строку 828 http://prntscr.com/iwdn0m . Здесь размер шрифта, цвет, выравнивание и еще я добавил строчку font-weight:bold; — выделение жирным шрифтом.
      Конечно, все изменения нужно вносить осторожно, тема адаптивная, для разных размеров экрана свои стили, это все нужно проверять. Обязательно сохраните копию исходного файла, а, может быть, стоит сделать дочернюю тему.
      Вот как у меня получилось http://prntscr.com/iwdphi
      Напишите о своих результатах.

  3. Цифровой

    С вашей галереей после слова «например» явно что-то не так ;-)

    1. Владимир (автор)

      А можно подробнее, что не так?

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: