Главная - Без рубрики - Как показать 2 фото «ДО» и «ПОСЛЕ»

Как показать 2 фото «ДО» и «ПОСЛЕ»

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

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

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

На сайте, который я сделал, я использовал дополнение (расширение) для одного платного плагина WordPress, а вам хочу предложить другой, бесплатный плагин WordPress, который поможет решить эту задачу.

Плагин называется TwentyTwenty.

После установки и активации плагина вам не надо будет ничего в нем настраивать, он работает «из коробки».

Главное что вам надо, это подготовить два изображения одного размера и загрузить их в вашу Библиотеку Медиафайлов.

Затем в редакторе Записи добавить два этих снимка, переключиться в режим редактора — Текст — и окружить оба снимка короткими кодами. Смотрите на примере ниже:

[twentytwenty]<img src=»https://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=»https://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, которые видны при наведении курсора на изображения. Как их найти и заменить русскими словами ДО и ПОСЛЕ.

Потратил 5 минут и нашел.

Файл twentytwenty.css лежит в папке /public/assets/css/

Откройте файл, найдите строки 105, 110.

Замените слова ‘Before’, ‘After’ своими на русском.

Учтите, что после обновления плагина (если автор надумает его обновлять и вы увидите, что есть обновление) у вас эти слова опять будут на английском.

Приятной работы.

О admin

3 комментария

  1. Никита

    dirtoff.ru/2016/06/17/do-i-posle/
    до этого работал, не знаю что повлияло на работоспособность, какая манипуляция

  2. Никита

    Делаю все верно, но не делается так. Что может быть? Какой модуль php должен быть включен для плагина?

  3. Короткий код добавлен не верно, проверьте.

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*