Как присвоить картинке определенный CSS класс

Девочки, а как присвоить картинке определенный CSS класс ? К примеру на партнерке мне требуется вот что сделать:
"Все изображения, на которых нужно показывать виджет должны быть помечены CSS классом
sarafan:

Код:

<img src="https://i.pinimg.com/736x/2c/e4/1d/2ce41df59098d60f5e697f394bc7d203.jpg" class="sarafan"  />

"

Как это сделать в бирюзовой теме?

 

Также, как и в любой теме. Это стандартный функционал http://prntscr.com/iatqkr

 

А как нить для всех картинок на сайте такое реализовать автоматом можно?

 

Например, как вариант, плагином Search and Replace. Картинка выводится так: <img class="aligncenter size-full wp-image-42437" src="http://....
Меняем по всем статьям <img class=" на <img class="myclass и пробел в конце.

 

Опасности! Последствия непредсказуемы.
Лучше всего сделать такое через стили

 

А как через стили массово? Вопрос то был про массовость.

 

Почему?Просто интересно, способ замены через эту программу был частью процесса перевода сайта на https - там в базе все адреса с http были переписаны на https. там тоже опасность? или только в данном конкретном случае?

 

Мне дали вот такой код

Код:

function add_image_responsive_class($content) {
   global $post;
   $pattern ="/<img(.*?)class=\"(.*?)\"(.*?)>/i";
   $replacement = '<img$1class="$2 sarafan"$3>';
   $content = preg_replace($pattern, $replacement, $content);
   return $content;
}
add_filter('the_content', 'add_image_responsive_class');

и сказали вставить в functions.php, но виджет так и не заработал… не знаю почему

 

Потому что неизвестно, какие ещё изображения могут попасть под раздачу при такой замене. Когда нужно было менять все ссылки, это работало, а тут - непонятны последствия.

А класс добавился? Кэш сброшен?

Вообще, мы тут не по теме нафлудили. Было бы хорошо, если б модераторы перенесли сообщения куда-нибудь.

 

Кеш сброшен, класс добавился, а отображаться так и не стал. Посмотрела на другом сайте там код в картинках выглядит вот так

Код:

<img class="img-bordered sarafan size-full wp-image-21982 aligncenter" src="

а у меня вот так

Код:

<img class="aligncenter size-full wp-image-8608 sarafan" src="

MAzZY, может вы мне подскажите как в код что мне дали:

Код:

function add_image_responsive_class($content) {
   global $post;
   $pattern ="/<img(.*?)class=\"(.*?)\"(.*?)>/i";
   $replacement = '<img$1class="$2 sarafan"$3>';
   $content = preg_replace($pattern, $replacement, $content);
   return $content;
}
add_filter('the_content', 'add_image_responsive_class');

добавить <img class="img-bordered???

Буду очень благодарна

 

Четвертую строчку изменить:

Код:

$replacement = '<img$1class="$2 img-bordered sarafan"$3>';

 

спасибо большое, сейчас опробую

 

Ну тогда не знаю. Спрашивайте у поддержки - уж больно хитро они всё закрутили

 

Да вот спрашивала, сказали удаленно установить виджет мол сложно им, ждите 2 недели сделаем упрощенный виджет
Вот буду ждать… потому что уже крутила вертела, а ничего не получается

 

Приветствую! У меня такая же проблема, с тем же сарафаном. Кнопка не отображается, хотя два часа вертела. Класс добавился, а кнопки - нет! В поддержку еще не писала. Вы нашли решение?

 

мне сказали что бы я подождала пару недель, мол их программеры напишут скрипт виджета попроще, так сказать для "чайников"
Вот жду)