web-dev-qa-db-fra.com

Compréhension et modification de la structure des images postées

Il s’agit actuellement de la sortie (par défaut) de l’image Wordpress:

Float left, avec légende, lien vers img 

<figure id="attachment_10220" style="width: 167px;" class="wp-caption alignleft">
    <a href="http://link-to-my-image.jpg"><img class="wp-image-10220 size-medium" src="http://link-to-my-image-167x251.jpg" alt="" width="167" height="251"></a>
    <figcaption class="wp-caption-text">My caption</figcaption>
</figure>

Float right, sans légende, lien vers img 

<a href="http://link-to-my-image.jpg" class="img-link">
    <img class="alignright size-medium wp-image-10214" src="http://link-to-my-image-257x386.jpg" alt="" width="257" height="386">
</a>

Float left, sans légende, pas de lien 

<img class="alignleft wp-image-10218" src="http://link-to-my-image.jpg-167x251.jpg" alt="" width="167" height="251">

Tout d'abord j'aimerais savoir où est défini le rendu de ces images, quelles fonctions devrais-je regarder? Mon objectif est de rendre la sortie plus uniforme:

  • Enveloppez chaque image dans une balise figure- (comme dans le premier exemple)
  • Ne pas ajouter d'attributs style
  • Ajouter la classe float (alignleft, alignright) à la balise figure
  • Ne pas générer de pièce jointe (attachment_xxx) ni d'ID d'image (wp-image-xxx)
  • Supprimer tous les attributs de hauteur et de largeur des images

Résultat final attendu basé sur les exemples ci-dessus:

<figure class="wp-caption alignleft">
    <a href="http://link-to-my-image.jpg">
        <img class="size-medium" src="http://link-to-my-image-167x251.jpg" alt="">
    </a>
    <figcaption class="wp-caption-text">My caption</figcaption>
</figure>
<figure class="alignright">
    <a href="http://link-to-my-image.jpg">
        <img class="size-medium" src="http://link-to-my-image-257x386.jpg" alt="">
    </a>
</figure>
<figure class="alignleft">
    <img src="http://link-to-my-image.jpg-167x251.jpg" alt="">
</figure>
functionsimageswp-get-attachment-image
1
Bram Vanroy

Commençons par votre premier code. Si vous ajoutez des textes, des légendes, etc., un shortcode sera généré: [caption] La fonction img_caption_shortcode() dans wp-content/media.php est chargée d'exécuter le shortcode. Mais ce shortcode n'est produit que lorsque vous utilisez des légendes. Sinon, il sera simplement inséré les balises <a>- et <img>-.

qui décide, qu'est-ce qui est inséré?

Une requête ajax intéressante est en cours, une fois que vous avez ajouté un fichier multimédia: send-attachment-to-editor. Il envoie toutes les données comme 'image-size', 'url', 'html' ...

La fonction wp_ajax_send_attachment_to_editor() qui se trouve dans wp-admin/includes/ajax-actions.php est appelée par cette requête ajax. Cette fonction attache l'image par exemple à la publication. Plus intéressant pour nous: Cette fonction crée le HTML, qui sera posté dans l'éditeur. Donc, ici, il est décidé si le [caption] shortcode ou un simple <img>- Tag sera utilisé.

Le filtre media_send_to_editor

Bon pour nous puisque wp_ajax_send_attachment_to_editor() utilise le filtre media_send_to_editor pour nous permettre de modifier ce code. Trois paramètres sont donnés: - la sortie HTML actuelle - l'ID de pièce jointe - les informations, la taille de l'image, l'alignement ...

Juste à titre d'exemple:

 add_filter( 'media_send_to_editor', 'test_media', 10, 3 );
 function test_media( $html, $id, $attachment ){
    return '<a href="http://example.com">TEST</a>';
 }

Ceci imprimerait toujours le lien http://example.com/

J'espère que cela vous aide pour commencer.

Un "meilleur" shortcode

Pour recevoir maintenant la sortie, vous souhaitez, je suggérerais ce qui suit:

<?php
  add_filter( 'media_send_to_editor', 'use_always_caption', 10, 3 );
     function use_always_caption( $html, $id, $attachment ){
        $post = get_post( $id );
        //Return if its not an image
        if ( 'image' != substr( $post->post_mime_type, 0, 5 ) )
            return $html;
        $rel = '';
        $url =  isset( $attachment['url'] ) ? $attachment['url'] : '';

        if ( strpos( $url, 'attachment_id') || get_attachment_link( $id ) == $url )
            $rel = ' rel="attachment"';

        $align = isset( $attachment['align'] ) ? $attachment['align'] : 'none';
        $size = isset( $attachment['image-size'] ) ? $attachment['image-size'] : 'medium';
        $alt = isset( $attachment['image_alt'] ) ? $attachment['image_alt'] : '';
        $caption = ' ';
        if( isset( $attachment['post_excerpt'] ) && ! empty( $attachment['post_excerpt'] ) )
            $caption = $attachment['post_excerpt'];
        $title = ''; // We no longer insert title tags into <img> tags, as they are redundant.
        add_filter( 'get_image_tag', 'remove_id_from_class_and_hw', 10, 6 );
        $html = get_image_send_to_editor( $id, $caption, $title, $align, $url, (bool) $rel, $size, $alt );
        remove_filter( 'get_image_tag', 'remove_id_from_class_and_hw', 10, 6 );
        $html = preg_replace( '^toremove--width="(.*)"--toremove^', '', $html );
        return $html;
     }

     function remove_id_from_class_and_hw( $html, $id, $alt, $title, $align, $size ){
         list( $img_src, $width, $height ) = image_downsize( $id, $size );
         $class = 'align' . esc_attr( $align ) .' size-' . esc_attr( $size );
         return '<img src="' . esc_attr( $img_src ) . '" alt="' . esc_attr( $alt ) . '" ' . $title . ' class="' . $class . '" toremove--width="' . $width . '" height="' . $height . '"--toremove />';
     }

     remove_shortcode( 'caption' );
     add_shortcode( 'caption', 'better_img_caption_shortcode' );
     function better_img_caption_shortcode( $attr, $content = null ){
        if ( ! isset( $attr['caption'] ) ) {
            if ( preg_match( '#((?:<a [^>]+>\s*)?<img [^>]+>(?:\s*</a>)?)(.*)#is', $content, $matches ) ) {
                $content = $matches[1];
                $attr['caption'] = trim( $matches[2] );
            }
        }

        $output = apply_filters( 'img_caption_shortcode', '', $attr, $content );
        if ( $output != '' )
            return $output;

        $atts = shortcode_atts( array(
            'id'      => '',
            'align'   => 'alignnone',
            'width'   => '',
            'caption' => '',
            'class'   => '',
        ), $attr, 'caption' );

        $atts['width'] = (int) $atts['width'];
        if ( $atts['width'] < 1 )
            return $content;

        $class = trim( 'wp-caption ' . $atts['align'] . ' ' . $atts['class'] );

        $figcaption = '';
        if( ! empty( $atts['caption'] ) )
            $figcaption = '<figcaption class="wp-caption-text">' . $atts['caption'] . '</figcaption>';
        return '<figure class="' . esc_attr( $class ) . '">'
            . do_shortcode( $content ) . $figcaption . '</figure>';

     }
?>

J'ai un peu copié-collé :)

Alors, ce que je fais: avec le filtre media_send_to_editor, je force WordPress à toujours utiliser le [caption]- Shortcode. Nous modifions un peu la sortie d'image en utilisant le filtre get_image_tag qui est utilisé par la fonction get_image_tag() pour créer la balise <img>-. Cette fonction peut être trouvée dans wp-include/media.php . Puisque je ne voulais pas créer le shortcode complet et laisser WordPress le faire, je devais laisser la largeur et la hauteur (vous devriez le laisser quand même, je pense) car la création de la légende faite par image_add_caption() (à trouver dans wp-admin/includes/media.php) a besoin de ces valeurs dans la chaîne. J'ai ajouté un toremove-- laid et le supprime plus tard.

Dans un deuxième temps, je supprime le [caption]- Shortcode existant et le remplace par le mien. La mienne est fondamentalement la même, mais j'ai retiré l'ID et l'attribut de style. Je m'en tiens au [caption]- Shortcode. Ainsi, une fois que l'utilisateur aura désactivé le plug-in, les images s'afficheront toujours de manière raisonnable.

Docs:

1
websupporter