Как да добавите автоматичен клас в изображение за публикация в wordpress

тъй като трябва да го имате за всичките си изображения в публикацията, тогава трябва да добавите кука за съдържанието и да добавите

function add_responsive_class($content){

        $content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
        $document = new DOMDocument();
        libxml_use_internal_errors(true);
        $document->loadHTML(utf8_decode($content));

        $imgs = $document->getElementsByTagName('img');
        foreach ($imgs as $img) {
           $img->setAttribute('class','img-responsive');
        }

        $html = $document->saveHTML();
        return $html;
}

сега добавете куката към съдържанието

add_filter        ('the_content', 'add_responsive_class');

Ако обаче вече имате класове за img и трябва да добавите нов клас, можете да се обърнете към PHP еквивалент на jQuery addClass. Или можете просто да направите това:

$existing_class = $img->getAttribute('class');
$img->setAttribute('class', "img-responsive $existing_class");

Кодът по-горе работи .. използвам го, за да премахна src и data-src за мързеливо зареждане на изображение. Надявам се да работи за вас

Този подход е по-добър: https://wordpress.stackexchange.com/questions/108831/add-css-class-to-every-image

function add_image_class($class){
    $class .= ' additional-class';
    return $class;
}
add_filter('get_image_tag_class','add_image_class');

Единственото предупреждение е, че добавя класа в панела за редактиране, когато вмъквате нови изображения и не засяга предварително съществуващите.

Мисля, че най-лесният начин е да използвате CSS по този начин.

.content img { height: auto; max-width: 100%; }

Където .content е областта, която съдържа съдържанието на вашата публикация.

Забележка: Може също така да искате да замените класа .wp-caption по този начин.

.wp-caption { width: auto !important; }

Имах същия въпрос и добавянето на тази функция към functions.php проработи за мен.

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

Когато показвате публикация във вашия цикъл, можете да направите:

the_post_thumbnail('thumbnail', array('class' => 'img-responsive'));

Вижте https://codex.wordpress.org/Function_Reference/the_post_thumbnail за повече подробности.

Не съм съвсем сигурен колко добър е този отговор по отношение на производителността, но работи. Просто поставете това във functions.php.

function img_responsive($content){
    return str_replace('<img class="','<img class="img-responsive ',$content);
}
add_filter('the_content','img_responsive');

Моля, имайте предвид, че имате нужда от интервал след class="img-responsive, за да не се слива с други класове.

Можете да използвате jquery код във файла header.php на вашата тема.

jQuery(function() {
  jQuery(img).addClass('img-responsive');
});

Мисля, че не е необходимо да добавяте клас, за да направите изображението отзивчиво. просто премахнете височината ширина от представеното изображение, изображението определено ще стане отзивчиво.

Във вашия function.php има код за премахване на ширината на височината

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 );

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
} 

Класовете не се добавят при качване, а когато изображението се изпрати до редактора. Можете да използвате филтъра image_send_to_editor, за да добавите един или повече класове. Този пример добавя fancybox клас.

Можете просто да направите всички изображения отзивчиви в css, както е споменато тук:

Искам да кандидатствам css class(bootstrap) .img-отзивчив към всички изображения на съдържание

Това използва LESS, но версията на Sass е почти същата:

  img {
    @include img-responsive();
  }

Имам следния код и тъй като публикациите са от предишни версии ... Те не работят ...

Какво трябва да направя?

<figure class="image"><img class="lazyload p402_hide" alt="" 
 width="800" height="400" data-sizes="auto" data- 
src="https://br.clubnation.club/wp-content/uploads/2020/01/primeira- 
loja-oficial-de-harry-potter-sera-aberta-em-nova-york-2.jpg" data- 
 srcset="https://br.clubnation.club/wp- 
 content/uploads/2020/01/primeira-loja-oficial-de-harry-potter-sera-aberta- 
 em-nova-york-2.jpg 328w, https://br.clubnation.club/wp- 
 content/uploads/2020/01/primeira-loja-oficial-de-harry-potter-sera- 
 aberta-em-nova-york-3.jpg 380w, https://br.clubnation.club/wp- 
 content/uploads/2020/01/primeira-loja-oficial-de-harry-potter-sera- 
 aberta-em-nova-york-4.jpg 528w, https://br.clubnation.club/wp- 
 content/uploads/2020/01/primeira-loja-oficial-de-harry-potter-sera- 
 aberta-em-nova-york-5.jpg 704w" />
 <figcaption>A loja será inaugurada no próximo verão.
 (Fonte: Warner Bros/Divulgação)</figcaption></figure>