Доктор Лексиум
Главная » Блог » WordPress » Применяем стиль к изображению в зависимости от типа файла в WordPress
https://www.lexium.ru/2015/04/primenyaem-stil-k-izobrazheniyu-v-zavisimosti-ot-tipa-fajjla-v-wordpress/

Применяем стиль к изображению в зависимости от типа файла в WordPress

Это будет короткий пост. Я тут на досуге сделал еще один блог xylog.ru и сейчас над ним магичу. Дизайн выбрал из репозитория WordPress (т.е. бесплатный). Кастомизировал его маленько да и оставил пока не доведу до ума контент. И вроде всё здорово, но фон у постов, по задумке дизайнера, сделан в виде линованной бумаги (как в блокноте). Я насобачился делать иллюстрации с прозрачным фоном и они смотрятся, будто нарисованы на той самой бумаге.

ramki2

В общем, мне нравится. Но как быть с фотографиями?

Конечно фото можно просто вставить и не париться. Но вот выбиваются они из стилистики, а это плохо. Приходилось делать к ним рамочку, тень и сохранять всё в формате png (там хватает и цветности, и фон прозрачный для тени поддерживается). Но во-первых, это трудозатраты, а во-вторых png с прозрачностью весит ощутимо больше чем jpg с изначально непрозрачным фоном.

Ну и еще один аргумент: при публикации с мобилы обработать изображение подобным образом не получится.

В общем, нужно сделать так, чтобы картинки с прозрачным фоном (gif, png) выводились как есть, а с непрозрачным (jpg, bmp) обрамлялись рамкой и тенью средствами CSS на автомате.

Решение

Самый простой и надежный способ, для решения задачи, добавить дополнительный class ко всем картинкам формата jpg. А уже классу задать нужный стиль. Вот только не умеет CSS различать типы файлов. Я долго рыл всевозможные сайты на предмет готовых вариантов, но ничего подходящего не нашел.

Пришлось взять хак, позволяющий добавлять атрибуты к картинкам (описан здесь, автору респект) и модифицировать его так, чтобы добавлял произвольный класс к картинкам нужного типа. В статье по ссылке есть еще не мало полезного, так что, по окончании прочтения, рекомендую туда заглянуть. ramki7 У меня получилось. Может получиться и у вас)

Внимание! Автор не несет ответственности за любые ваши действия и их последствия. Всё, что будете делать, прочитав этот пост, вы делаете на свой страх и риск!

Привожу код и готовый алгоритм.

1. Заходим в админку вашего сайта на WordPress, открываем пункт меню «Внешний вид» и кликаем «Редактор». Там находим файл functions.php (файл функций темы), добавляем в самый конец приведенный ниже код и сохраняем. Если после этого сайт работает, значит всё идёт как надо. Если нет, я предупреждал. 

<?php

add_filter('the_content', 'jpg_add_class'); //Добавляем рамочку к JPG

function jpg_add_class($content) {
	global $post;
	$pattern ="/<img(.*?)class=('|\")(.*?)('|\")(.*?)src=('|\")(.*?).(bmp|jpeg|jpg)('|\")(.*?)>/i";
	

	$replacement = '<img$1class=$2$3 imgramka$4$5src=$6$7.$8$9$10>';
	$content = preg_replace($pattern, $replacement, $content);
	return $content;
}

?>

2. Открываем для редактирования файл style.css (там же), добавляем туда приведенный ниже код и сохраняем.

img.imgramka{
border:#fff 7px solid;
box-shadow: 1px 1px 7px rgba(0,0,0,0.5);
background-color:#fff;
}

3. Переходим на сайт и любуемся фоторамочками, не забывая сказать мне спасибо. Можно даже заслать 5 рублей в качестве благодарности)) Форма прилагается.

К классу можно добавить стили, делающие наши фотографии чернобелыми, а при наведении снова цветными. Как я сделал на xylog.ru например. Рецепт нашелся здесь.

А на этом всё. Подписывайтесь на обновления, читайте, желаю удачи)

Напишите комментарий