Иногда бывает необходимо отобразить сравнение двух изображений с некоторыми отличиями. Такая наглядность полезна, например, в статье о каком-либо эффекте графического редактора. И чтобы продемонстрировать результат, слева будет показана исходная фотография или ее часть, а слева – результат действия фильтра или эффекта.
Как в WordPress показывать фотографии “до” и “после”?
Для решения задачи можно воспользоваться бесплатным плагином Twenty20 Image Before-After, который добавит функциональный слайдер фотографий, позволяющий показать два разных варианта аналогичного изображения в полном размере. Вы сможете перемещать ползунок, чтобы сравнить оба изображения.
Плагин Twenty20 Image Before-After
Первым делом плагин нужно установить и активировать. Для примера загрузим на сайт два изображения. В одном из них применим фильтр. Показывать наши фото будем в записи. Для этого нужно открыть существующую запись или создать новую и вставить курсор в то место, где будут отображаться наши изображения.
Дальше на панели инструментов нужно отыскать и нажать кнопку Add Twenty20, что запустит сам процесс вставки. Тут следует выбрать обе фотографии.
После того, как были выбраны нужные картинки, необходимо нажать кнопку Insert в правом нижнем углу окна. В новом окне вы сможете добавить контент поверх обеих фотографий, а также задать ширину для ползунка, значения смещения, направления ползунка и т.д.
После установки всех настроек следует нажать кнопку Insert Shortcode. Видно, что плагин добавил в контентную часть записи специальный шорткод.
Теперь можно смотреть на сайте.
Также плагин позволяет отобразить сравнение двух изображений и в сайдбаре. Для этого в нем имеется виджет Twenty20 Slider.
Виджет имеет аналогичные настройки для фотографий “до” и “после”, как описано было выше.
Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.
Плагин перестал работать и отображать кнопки добавления в редакторе. Может вы подскажете что сделать?