Как вывести фотографии ДО и ПОСЛЕ в WordPress

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

Первым делом вам необходимо установить и активировать плагин TwentyTwenty. Плагин работает «из коробки» не нуждается в дополнительной настройке.

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

Необходимо убедиться, что обе фотографии имеют одинаковое разрешение.

После вставки изображений, нужно переключиться в текстовый редактор и найти код изображений. Далее, вам необходимо обернуть оба ваших изображения в шорткод [twentytwenty][/twentytwenty] вот таким образом:

[twentytwenty]<img src="http://www.example.com/wp-content/uploads/2014/12/before-photo.jpg" alt="Before photo" width="604" height="402" class="alignnone size-large wp-image-2367" />
<img src="http://www.example.com/wp-content/uploads/2014/12/after-photo.jpg" alt="After Photo" width="604" height="402" class="alignnone size-large wp-image-2366" />[/twentytwenty]

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

Первая картинка расположена перед изображением слева, а вторая — после изображения справа.

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

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

По всем вопросам и отзывам просьба писать в комментарии ниже.

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