web-dev-qa-db-fra.com

Comment ajouter une classe automatique dans l'image pour wordpress post

Je veux créer un thème réactif avec Bootstrap 3. Cependant, je dois ajouter automatiquement la classe CSS .img-responsive À chaque image de publication parce que j'ai besoin que les images soient réactives.

Veuillez me suggérer ce que je dois ajouter dans le fichier functions.php De WordPress ou tout autre fichier qui me permettra d'ajouter la classe CSS automatiquement.

csswordpresstwitter-bootstrap-3wordpress-theming
16
Amit Sarker

puisque vous devez l'avoir pour toutes vos images de publication, vous devez ajouter un crochet pour le contenu et ajouter

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;
}

ajoutez maintenant le crochet au contenu

add_filter        ('the_content', 'add_responsive_class');

Cependant, si vous avez déjà des classes pour l'img et que vous devez ajouter une nouvelle classe, vous pouvez vous référer à PHP équivalent à jQuery addClass . Ou, vous pouvez simplement faire ceci:

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

Le code ci-dessus fonctionne .. je l'utilise pour supprimer src et data-src pour le chargement d'images paresseuses. J'espère que ça marche pour toi

43
AhmadAssaf

Cette approche est meilleure: 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');

La seule mise en garde est qu'il ajoute la classe dans le volet d'édition lorsque vous insérez de nouvelles images et n'affecte pas les images existantes.

28
Yaron

Je pense que la façon la plus simple est d'utiliser CSS comme ça.

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

Où . Content est la zone qui contient le contenu de votre message.

Remarque: Vous pouvez également vouloir remplacer la classe . Wp-caption ainsi.

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

J'ai eu la même question, et l'ajout de cette fonction à functions.php a fonctionné pour moi.

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');
12
user793487

Lorsque vous affichez un message dans votre boucle, vous pouvez faire:

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

Voir https://codex.wordpress.org/Function_Reference/the_post_thumbnail pour plus de détails.

5
Bertrand

Vous pouvez utiliser le code jquery sur le fichier header.php de votre thème.

jQuery(function() {
  jQuery(img).addClass('img-responsive');
});
3
super global user

Je ne sais pas à quel point cette réponse est bonne en termes de performances, mais cela fonctionne. Mettez juste ceci dans functions.php.

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

Veuillez noter que vous avez besoin de l'espace après class="img-responsive pour ne pas fusionner avec les autres classes.

3
Lallex

Je pense que vous n'avez pas besoin d'ajouter de classe pour rendre l'image réactive. il suffit de supprimer la largeur de la hauteur de l'image sélectionnée, l'image deviendra définitivement réactive.

Il y a du code dans votre function.php pour supprimer la largeur en hauteur

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;
}
1
Mitul Shah

Les classes ne sont pas ajoutées lors du téléchargement, mais lorsque l'image est envoyée à l'éditeur. Vous pouvez utiliser le image_send_to_editor filtre pour ajouter une ou plusieurs classes. Cet exemple ajoute une classe fancybox.

0
diggy

Vous pouvez simplement rendre toutes les images réactives dans le CSS comme mentionné ici:

Je veux appliquer la classe css (bootstrap) .img-responsive sur toutes les images de conten

Cela utilise MOINS, mais la version Sass est à peu près la même:

  img {
    @include img-responsive();
  }
0
Jordie C

J'ai le code suivant, et comme les messages sont des versions précédentes ... Ils n'ont pas fonctionné ...

Que devrais-je faire?

<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>
0
PauloBoaventura
//all classes i need in a string

$classes = 'img-responsive attachment-post-thumbnail size-post-thumbnail wp-post-image'; 

//then i use my variable

the_post_thumbnail('post_thumbnail', array( 'class' => $classes ));
0
Yolexis Reyes