День добрый, уважаемые читатели wmbn.ru! Сегодня хотелось бы затронуть тему об изображениях, как их можно выводить и в каком варианте на страницы сайта, блога, работающего под управлением движка WordPress. Уже не новость, что изображения на сайте играют немаловажную роль — будь это фотоблог, или посвящен спортивной тематике. Изображения разряжают текст, давая читателю хоть мгновение на отдых.

Создание галереи изображений в WordPress

Так же, как можно заметить на многих блогах, изображение играет роль вступления к посту, давая наглядно понять о чем будет идти речь, но это опять же зависит от автора. Однако загрузив изображение и вставив его в тело записи не значит, что все готово — нужно оптимизировать изображение, а затем его предоставить. Можно обойтись простым открыванием изображения в новой вкладке, добавив в него свойство target=»blank», а можно сделать различные эффекты для изображения, а так же его открытия. Такой подход придаст сайту красоту и динамику — данные эффекты все же лучше смотрятся, чем его простое открытие, особенно если тема сайта связана с фотографиями, или на блоге используются миниатюры.

Плагины WordPress для создания галереи картинок

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

Приступим к первому плагину, который я использую на своем блоге для открытия изображений — Lightbox Plus. Установить его можно, скачав архив с официального сайта WordPress, а затем распаковать его в папку на сервере, где расположены плагины (wp-content/plugins). После в панели администратора нужно активировать плагин и можно начать работу с ним. Второй способ — установка прямо из панели администратора.

Настройка плагина LightBox Plus

В пункте меню Плагины выберите Добавить новый, а затем в поисковую строку введите название плагина — Lightbox Plus. После установки в меню Внешний вид появится пункт настройки плагина Lightbox Plus (я уже упомянул настройку данного плагина, но только упомянул, сейчас же следует описать как его настроить). На странице настроек в блоке General Settings настраивается внешний вид рамки для изображений:

  • Lightbox Plus Style — выбор стиля рамки. Может быть как простой стиль без каких-либо эффектов, так и с различной анимацией, дополнительным фоном и кнопками;
  • Use Custom Styles — поставив галочку напротив данного пункта, можно настроить стиль вывода картинки на странице;
  • Disable Lightbox CSS — данный пункт отключает все стили для плагина, присваивая ему стандартный, то есть без всяких рамок;

Перейдем к следующим настройкам — Base Settings:

  • Transition Type — изменяется поведение открытия окна с изображением (эластичный, прозрачный и без эффектов);
  • Resize Speed — скорость изменения изображения для рамки;
  • Далее идут пункты width и height, в которых настраивается длина и ширина окна, а так же отступы внутри него;
  • Overlay Opacity — настройка прозрачности фона рамки изображения;
  • Pre-load image — предварительная загрузка изображения до следующего просмотра изображения;
  • В поле Grouping Labels изменяем текст для уточнения какое изображение из общего числа;
  • Previous, Next, Close — соответственно Предыдущее, Следующее и Закрыть просмотр изображения;

Теперь приступим к настройке слайд шоу (Slideshow) — для начала включаем первый пункт, чтобы включить возможность просмотра изображений в режиме слайд шоу на WordPress. В Autostart Slideshow ставим галочку, если хотим, чтобы изображения автоматически переключались, указав временной интервал для перелистывания. Ниже указываем текст для кнопок Вперед (Next) и Назад (Previous).

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

Плагин Fancy Box для создания галереи изображений

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

В настройках можно подключить библиотеку jQuery от Google, а так же включить просмотр галереи WordPress совместно с данным плагином. Далее есть возможность включения поддержки загрузки видео с Youtube, где ролик будет просмотрен с помощью плагина Fancybox Plus. Показ видео роликов так же сопровождается настройкой — отображение ссылки, размер видео. Далее указываем эффекты для открытия и закрытия окна с просмотром изображения.

Добавление видео с Youtube

Отличия Fancybox от Lightbox во внешнем виде и количестве настроек — если первый плагин прост в настройках и имеет мало стилей, то второй имеет много настроек и различных стилей. Далее, в Fancybox можно загружать видео с Youtube, указав его ID. Это удобно, так как нет необходимости загружать сторонние плагины и устанавливать скрипты с Youtube.

Фоторама — фотогалерея для блога на WordPress

Хотелось бы подробнее рассмотреть одну очень хорошую галерею изображений для WordPress — Фоторама (fotorama). Узнал я о данной работе от Orcinus Orca, автора блога orcinus.ru. На тот момент он еще практиковал использование скрипта фоторамы, показав его использование на своем сайте, который ведется уже довольно долгое (очень долгое) время. Автор же самой идеи и создатель фоторамы — Артем Поликарпов.

Мои первые впечатления были положительными — красиво оформлен дизайн, все изображения одного размера да и сам скрипт работал без проблем, но опять же только при поверхностном изучении. Жаль, но я не заметил предварительной загрузки миниатюр — они грузились только тогда, когда было доступно исходное изображение. Такой изъян фоторамы очень хорошо заметен на низкоскоростном интернете (тот же USB модем, который превратился в настоящий гаджет, окутанный изолентой). Но вот буквально при написании статьи проверил — теперь первыми загружаются миниатюры, так что недостаток данный от фоторамы отпадает.

Второй недостаток, вызванный моими усилиями установить скрипт — сложная привязка фоторамы к сайту. Хотя это в большей степени связано с Linux (Ubuntu) и неправильно выставленными правами (sudo вообще никак не помогал). Но все же однажды получилось прикрутить фотораму к простенькому сайту, однако изображения так и загрузить не получилось.

Загрузка плагина фоторама для WordPress

Решить проблему помог, как ни странно, простой плагин для WordPress, который создает фотогалерею с помощью фоторамы. На странице загрузки плагина фоторамы указано, что автор работы Анна Шишлякова, за что ей огромное спасибо. Загружаем плагин с сайта, устанавливаем его в папку с плагинами (можно загрузить с помощью FTP менеджера или средствами панели управления хостингом), предварительно создав для него папку, куда файлы следует распаковать.

Настройка плагина фоторама

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

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

Просмотр галереи изображений в фотораме

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

Сделаю небольшую отсебятину:

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

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

Добавление водяного знака на изображения сайта

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

Добавление водяного знака к изображению

Сделать водяной знак можно в Photoshop или Gimp — достаточно иметь два слоя, на котором будет расположено исходное изображение и знак, на который ставим эффект прозрачности. Процесс не сложный и занимает мало времени, однако для большого количества изображение такое создание водяного знака будет очень трудоемким. Решить данную проблему можно с помощью плагина Watermark Reloaded.

Настройка плагина Watermark Setting

Загружаем плагин с сайта WordPress и распаковываем его в папку с плагинами, или же на странице установки в поисковой строке пишем Watermark Reloaded. Активируем плагин и приступаем к настройке (меню Параметры — Watermark Reloaded). Сначала указываем на какие изображения выставлять водяной знак и его положение на картинке. Затем текст знака и его параметры — размер шрифта, название, цвет. После этого на изображении, после загрузки с помощью стандартных средств, появится та надпись что вы указали в настройках.

В принципе все — плагины для создания галереи рассмотрены, наложены водяные знаки. Хочу добавить, что при использовании водяных знаков не стоит ставить их на те изображения, которые вам не принадлежат.

Комментариев: 8

  1. Константин

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

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

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

    1. writer

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

    2. Iglous

      Плюс к этому нужно оптимизировать сайт, иначе будет тормозить, например gzip сжатие, о котором я писал

  2. Orcinus Orca

    В качестве фотогалереи можно юзать ФотоРаму, про которую я ещё в прошлом году писал. Она на JS по этому грузит браузер юзера, а не сервер.

    1. Константин

      Виталий, забыть о нагрузке на БД можно только в том случае, если её не использовать. Да, в WP есть плагины кэширования, можно оптимизировать блог в конце концов, но это лишь снизит нагрузку, не более. Хотя, конечно, дело это нужное и правильное.

      К тому же у виртуального хостинга, именно у него возникают в основном такие проблемы, есть и другие ограничения. В общем, всё относительно.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>