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

Примечание: Этот текст может содержать некоторые партнерские ссылки, а это значит, что я зарабатываю небольшую комиссию без каких-либо дополнительных затрат с вашей стороны, если вы воспользуетесь этими ссылками. Спасибо за понимание и поддержку.

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

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

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

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

Плагин называется 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, которые видны при наведении курсора на изображения. Как их найти и заменить русскими словами ДО и ПОСЛЕ.

Советую прочитать еще:  Image Thumbnail Slider | добавит на сайт карусель изображений

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

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

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

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

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

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

Важно! Эта запись может содержать ссылки на плагины, которые к моменту вашего чтения и скачивания могут работать не корректно. Будьте внимательны.

3 Comments

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

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