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

Владислав Белецкий
Владислав Белецкий .
Категория:
Комментариев: 0

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

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

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

before-after-images[1]

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

sliding-between-before-after-images[1]

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

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

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

VN:F [1.9.22_1171]

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии