Как в WordPress показывать фотографии «до» и «после»?

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

Как в WordPress показывать фотографии «до» и «после»?

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

Плагин Twenty20 Image Before-After

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

Страница редактирования записи

Дальше на панели инструментов нужно отыскать и нажать кнопку Add Twenty20, что запустит сам процесс вставки. Тут следует выбрать обе фотографии.

Добавление фото из Медиабиблиотеки

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

Настройка фото

После установки всех настроек следует нажать кнопку Insert Shortcode. Видно, что плагин добавил в контентную часть записи специальный шорткод.

Страница редактирования записи

Теперь можно смотреть на сайте.

Страница записи

Также плагин позволяет отобразить сравнение двух изображений и в сайдбаре. Для этого в нем имеется виджет Twenty20 Slider.

Админ-раздел виджеты

Виджет имеет аналогичные настройки для фотографий “до” и “после”, как описано было выше.

Виджет Twenty20 Slider

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

Если Вам понравилась статья — поделитесь с друзьями
Михаил Петров
Привет! Меня зовут Михаил Петров. Я копирайтер и занимаюсь этим с 2013 года. Скрупулезность и ответственность - моя фишка! Не могу делать как попало и добиваюсь, чтоб заказчик сказал минимум “неплохо”. За все время своей работы пришлось написать и отредактировать немало разной “текстовухи”, включая SEO-тексты, отзывы и прочую чушь. На сегодняшний день специализируюсь на написании информационных статей и руководств технического направления. Вижу смысл и светлое будущее в текстах для людей, а не для машин.
Обсуждение: 1
  1. Pro

    Плагин перестал работать и отображать кнопки добавления в редакторе. Может вы подскажете что сделать?

Задать вопрос