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

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

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

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

Плагин Twenty20 Image Before-After

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Просмотров:

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