web-dev-qa-db-fra.com

Comment envelopper chaque image dans un post avec une div?

Lorsque j'ajoute une image à un message, je souhaite qu'elle soit dans un div, par exemple. , et je veux que cela se fasse automatiquement, donc je n'ai pas à le faire dans l'éditeur HTML. Je ne veux pas utiliser js pour accomplir cela et par la même occasion, je veux savoir comment ajouter automatiquement des classes personnalisées à une image dans une publication. À votre santé!

postscustomizationhtmlimages
1
vanjadjurdjevic

Par défaut, les images ont déjà une classe unique, mais cela dépend de votre thème. Utilisez firebug et survolez les images pour afficher des éléments tels que class="aligncenter size-full wp-image-1525".

Si vous souhaitez modifier la classe ou l'id ou modifier les attributs de l'image, vous pouvez utiliser le filtre get_image_tag. Par exemple,

add_filter('get_image_tag_class','my_custom_class');

function my_custom_class($class){
$class='my_custom_name';
return $class;
}
2
Wyck

J'ai trouvé le code suivant en faisant des recherches. Vous pouvez facilement envelopper une image Post dans une div en utilisant le filtre intégré de WordPress i.e image_send_to_editor . Voici un exemple,

if( is_admin() ) {

    add_filter( 'image_send_to_editor', 'wp_image_wrap_init', 10, 8 );  
    function wp_image_wrap_init( $html, $id, $caption, $title, $align, $url, $size, $alt ) {
        return '<div id="wp-image-wrap-'. $id .'" class="wp-image-wrap">'. $html .'</div>';
    }

}

Merci à http://wpalkane.com/hacks/wrap-post-image-inside-div-automatically/

3
Steve Kamn

Votre réponse était proche mais pas suffisante car le point de contrôle du hook pour get_image_tag _ class () ne modifie que l'attribut de classe. Donc, je m'amusais et découvrais que la bonne chose pour emballer chaque image était get_image_tag () , donc le code est le suivant:

function my_image_tag($html, $id , $alt, $title){

$html = "<div class='**wrap-div**'>" . $html . "</div>";
return $html;
}

add_filter('get_image_tag','my_image_tag',10,4);

Vous avez répondu que c’était en partie correct, c’est donc le meilleur;) Salut, mec, et merci pour votre aide.

1
vanjadjurdjevic

les réponses ici peuvent être divisées en 2 méthodes:

1) fonctions qui fonctionnent dans POST EDITOR (back-end) (voir les réponses publiées)
2) fonctions fonctionnant sous POST OUTPUT (front-end)

p.s. une autre méthode pour changer la sortie frontale:

une)

function my_image_class_filter($classes) {
    return $classes . ' another-image-class';
}
add_filter('get_image_tag_class', 'my_image_class_filter');

b)

function add_post_image_class($content) {
    return preg_replace('/<img(.*?)class="(.*?)"/', '<img $1 class="$2 YOUR_CLASS_NAME"', $content);
}
add_filter( 'the_content', 'add_post_image_class' );
0
T.Todua