n-wp.ru — блог о WordPress
Как сделать монохромные (черно-белые) миниатюры | n-wp.ru

Как сделать монохромные (черно-белые) миниатюры

Пример использования функции, создающей черно-белые миниатюры. Такие миниатюры прекрасно впишутся в дизайн минималистичного фото-блога. при подведении курсора к миниатюре она автоматически меняюется на цветную.

Иногда для того, чтобы миниатюры не отвлекали внимание и не портили общее впечатление от блога, особоенно если он выполнен в темной цветовой гамме или имеет минималистичный дизайн, лучше их делать не цветными, а черно-белыми. Но ведь специально создавать миниатюры из цветных изображений и закачивать их в блог не будешь? В таком случае лучше воспользоваться функцией, которая автоматически создает черно-белые миниатюры.

Как сделать монохромные (черно-белые) миниатюры (2)Как сделать монохромные (черно-белые) миниатюры (1)

В файл functions.php вставьте:

Этот код делает доступным использование миниатюр с префиксом thumbnail-bw, создаваемых из изображений уменьшением и обрезанием по точным размерам с сохранением пропорций.

Далее вставьте в functions.php код функции, создающей черно-белые миниатюры:

Теперь при закачке изображений в блог создаются не только стандартные миниатюры, но и черно-белые миниатюры такого же размера, отличающиеся приставкой bw:
my_thumbnail_145x145.jpg
my_thumbnail_145x145-bw.jpg

Чтобы вывести черно-белую миниатюру, используйте:

Этот код выводит одновременно и черно-белую миниатюру и обычную. Вы можете сделать так, чтобы отображалась черно-белая миниатюра, но при подведении к ней курсора она менялась на цветную. Для этого в код внедрены классы элементов — к ним нужно добавить оформление, вставив в style.css:

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

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

  • А плагина для такого не существует? Или альтернативного варианта?
    Ибо у меня в одном случае — не так как надо действует (и не черно-белая миниатюра и не меняется когда наводишь курсором) или же, вообще ничего не происходит.

    • Сам отвечу на свой вопрос.
      Просто к строке CSS, которая отвечает за изображение, дописал свойство -webkit-filter: grayscale(100%);. Но это действует практически только в хроме (пруф).
      Если нужно чтобы при наведении становилось цветным/ЧБ, то к свойству hover дописываем опять же -webkit-filter: grayscale(100%);, только 100% меняем на нужное нам число.

/* ]]> */