Создание черно-белых миниатюр на WordPress

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

К счастью, Otto как раз написал великолепную статью на тему об использовании функционала WordPress и немного PHP, чтобы автоматически создавать черно-белые изображения при загрузке на сайт цветных.

Для начала нам нужно создать миниатюру с помощью add_image_size(). Мы будем использовать настройки миниатюр, заданные в админке WordPress в разделе Настройки медиафайлов. Добавим следующий код в файл functions.php в теги PHP:

После этого мы можем добавлять функционал автоматического создания черно-белых миниатюр:

Всякий раз, когда вы будете добавлять новое изображение, то автоматически будет генерироваться черно-белая его миниатюра. В коде была закомментирована функция размытия изображения Gaussian Blur. Удалите два слэша “//” , чтобы ее задействовать. Также можно посмотреть остальные доступные фильтры. Ну а если заниматься всем этим самостоятельно совсем не хочется, достаточно зайти в Студию Web Терьер — сайты под ключ, а там уже профессиональные веб-разработчики сделают сайт любой сложности и с любыми эффектами.

После добавления кода, вы можете использовать the_post_thumbnail() в вашем WordPress для отображения двух картинок:

Этот код просто будет показывать два изображения, для того, чтобы добавить эффект перехода из ч.б. в цвет, добавим CSS3 код:

Это результат работы скрипта.


CSS3 эффект будет работать только в тех браузерах, где есть его поддержка, а сам код для WordPress на последних его версиях.


2 комментарий на “Создание черно-белых миниатюр на WordPress

  1. Для начала нам нужно создать миниатюру с помощью add_image_size ()

    После добавления кода, вы можете использовать get_post_thumbnail ()

    Можно чуть подробней? не понятно где это взять

    Thumb up 0 Thumb down 0

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