Создаем фото До и После на сайте в WordPress с помощью плагинов

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

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

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

Twenty20 Image Before-After

В основе модуля Twenty20 Image Before-After используется скрипт от команды Zurb team. Он не только позволяет вставить изображение до / после в тексте, но и сделать его адаптивным. Это, как по мне, одно из самых интересных решений — не зря у него более 5 тысяч загрузок и твердая четверка.

Из дополнительных опций отмечу:

• простой интерфейс, понятный даже новичкам;
• специальная кнопка редактора для вставки шорткода;
• горизонтальный и вертикальный слайдеры;
• адаптивность;
• наличие виджета для картинки до и после;
• разные параметры в шорткоде;
• совместимость с визуальным редактором WP Bakery Visual Composer.

Вот небольшая видео-демонстрация работы плагина:

Очевидно, подобный автоматизированный подход намного проще и быстрее чем создание GIF анимации в Фотошопе и последующая ее вставка на сайт вручную.

Slider comparison image before and after

В описании Slider comparison image на сайте не так много информации, единственное, что бросается в глаза — максимальная оценка в 5 баллов. Данное решение скачали более 2 тысяч раз, но последний раз оно обновлялось около года назад и «официально не поддерживает» самые последние версии системы (хотя наверняка там работает).

Из описания функциональности автор указал лишь нужный шорткод — [sciba] плюс добавил парочку скриншотов. По ним становится понятным, что вставлять фото до и после можно через кнопку в редакторе — при нажатии появится всплывающая форма для задания соответствующих параметров. Также в форуме поддержки сообщается о совместимости плагина с мобильными устройствами.

Before After Image Slider Lite

Before After Image Slider Lite — один из самых актуальных вариантов. Последний апдейт был в текущем году + поддерживается WP до 4.8.x. Отзывы вполне нормальные, хотя общая оценка и ниже 4-х. В модуле есть Лайтовая и Pro версии.

Базовая реализация предусматривает работу с шорткодами, но по желанию вы сможете поставить фреймворк с инструментом, где все параметры будут задаваться через форму. Из настроек доступны: Alt в обеих картинках, заголовок, ширина, дополнительный класс (например, для hover эффекта). Кстати, разрешается указывать объекты изображений по ID, что добавляет опцию локализации через WPML.

Before After Image Slider WP

Before After Image Slider WP — тоже неплохое и весьма свежее решение: 1 тысяча скачиваний, недавнее обновление, оценка = 4,5. Хотя лично меня смутило отсутствие работающего слайдера на демо сайте, надеюсь, авторы не забросили свое творение.

Все функции делятся на 3 категории:

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

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

TwentyTwenty

TwentyTwenty — еще одна вариация скрипта от Zurb team, который упоминался в первом плагине из статьи. Кстати, на сайте разработчиков имеется детальная инструкция по его внедрению на любой сайт.

Что касается непосредственно TwentyTwenty то, вероятно, один из первых в данной нише — за все время получил более 10 тысяч скачиваний. Жаль, не обновлялся уже около 3х лет. Официально последние WP релизы не поддерживаются, однако он вполне может работать и сейчас — нужно тестировать. Настроек тут минимум, лишь шорткод [twentytwenty].

Before After

Before After — тоже далеко не самый «свежий» вариант дабы сделать фото до и после на вашем сайте. Он обновлялся 2 года назад, а включил его в список по двум причинам. Во-первых, визуально модуль немного отличается от других решений — вдруг вы захотите именно такой ползунок. Во-вторых, есть ссылка на оригинальный скрипт, который здесь применяется (разработчики могут заинтересоваться).

Итого. Если потребуется, в будущем дополню статью и рассмотрю один из методов более детально, хотя здесь на первый взгляд все просто. Советов, в принципе, тоже никаких особых нету — начинайте с первого в списке Twenty20 Image Before-After. Думаю, он подойдет большинству пользователей. Единственное, я бы попробовал оптимизировать WordPress header дабы убрать вызов соответствующего скрипта везде кроме как для постов с этой функцией.

P.S. Бесплатный SEO анализ сайта на техническую оптимизацию — sitechecker.pro. Удобный детальный отчет и мониторинг ваших веб-проектов.

Кому есть что дополнить по теме создания изображения до и после на сайте, пишите ниже. Возможно, знаете другие интересные методы/плагины?

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

(голосов - 4, средний балл: 6,75 из 7)

Загрузка...

Категории: Плагины;
Теги: добавление контента, изображения, интересные плагины, обзоры плагинов, список плагинов, текстовый редактор.