web-dev-qa-db-fra.com

Supprimer la hauteur et la largeur des images avec une légende

J'utilise WordPress avec Twitter Bootstrap 3 et j'ai un problème en ce qui concerne les images avec des légendes.

Les images avec des légendes se voient attribuer un attribut hauteur et largeur qui les empêche de réagir.

J'ai essayé le code suivant ci-dessous mais cela ne fonctionne que pour les images sans légende:

function change_uploaded_image_html( $html ) {
    // Removes height and width attribute from images when they
    // are uploaded.

    $classes = 'img-responsive';

    if ( preg_match( '/<img.*? class=".*?" \/>/', $html ) ) {

        $html = preg_replace( '/(<img.*? class=".*?)(".*?\/>)/', '$1 ' . $classes . '$2', $html );
    }
    else {
        $html = preg_replace( '/(<img.*?)\/>/', '$1 class="' . $classes . '" \/>', $html );
    }


$html = preg_replace( '/(height|width)="\d*"\s/', "", $html );
return $html;

}

J'ai ensuite essayé une autre méthode à partir d'un autre message sur ce forum qui ne définit l'attribut width à rien, mais je n'ai obtenu aucun succès, les attributs width et height de l'image étant conservés:

function my_img_caption_shortcode_filter( $val, $attr, $content=null ){
    extract( shortcode_atts( array(
        'id'    => '',
        'align' => '',
        'width' => '',
        'caption' => ''
    ), $attr ) );

    if ( 1 > ( int ) $width || empty( $caption ) )
        return $val;

    $capid = '';
    if ( $id ) {
        $id = esc_attr( $id );
        $capid = 'id="figcaption_'. $id . '" ';
        $id = 'id="' . $id . '" aria-labelledby="figcaption_' . $id . '" ';
    }

    return '<figure ' . $id . 'class="wp-caption ' . esc_attr($align) . '" >'
    . do_shortcode( $content ) . '<figcaption ' . $capid 
    . 'class="wp-caption-text">' . $caption . '</figcaption></figure>';
}
add_filter( 'img_caption_shortcode', 'my_img_caption_shortcode_filter',10 ,3 );

Je cherche un moyen de faire cela avec PHP et les filtres intégrés de WP et je pense que je suis proche de la réponse mais je ne sais pas dans quelle direction aller exactement.

Merci beaucoup, nav

imagesresponsivecaptionstwitter-bootstrap
1
navanitachora

Voici une autre possibilité, il modifie le balisage de l'image lorsque vous sélectionnez une image à ajouter à votre contenu dans l'éditeur.

  add_filter( 'image_send_to_editor', 'remove_img_attribute', 10, 8 );

   function remove_img_attribute( $html, $id, $caption, $title, $align, $url, $size, $alt ) 
    {
       $imagetpl = '<figure>
            <a href="%s" title="%s"><img src="%s" alt="%s" class="img-responsive %s" /></a>
            %s
       </figure>';
       $figcaption = (!empty($caption)) ? sprintf('<figcaption>%s</figcaption>',$caption):null;
       $image = wp_get_attachment_image_src($id,'large');
       return sprintf($imagetpl,$image[0],$title,$image[0],$alt,$align,$figcaption);
    }
1
Friss

J'ai utilisé la solution ci-dessous. Il a été trouvé ici

add_shortcode( 'wp_caption', 'fixed_img_caption_shortcode' );
add_shortcode( 'caption', 'fixed_img_caption_shortcode' );

function fixed_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;
 extract( shortcode_atts(array(
 'id'      => '',
 'align'   => 'alignnone',
 'width'   => '',
 'caption' => ''
 ), $attr));
 if ( 1 > (int) $width || empty($caption) )
 return $content;
 if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
 return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" >' 
 . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
 }
0
HanSoloShotFirst

Cela fait beaucoup de code, si vous voulez la taille originale de l'image et non la version recadrée, pourquoi n'utilisez-vous pas wp_get_attachment_image_src() à la place?

En réponse à votre commentaire: ->


add_filter( 'img_caption_shortcode', 'my_img_caption_shortcode', 10, 3 );
function my_img_caption_shortcode( $empty, $attr, $content ){
    $attr = shortcode_atts( array(
        'id'      => '',
        'align'   => 'alignnone',
        'width'   => '',
        'caption' => ''
    ), $attr );
    if ( $attr['id'] ) {
        $attr['id'] = 'id="' . esc_attr( $attr['id'] ) . '" ';
    }
     $classes = 'img-responsive';

    if ( preg_match( '//', $content) ) {

        $content= preg_replace( '/()/', '$1 ' . $classes . '$2', $content);
    }
    else {
        $content= preg_replace( '/(/', '$1 class="' . $classes . '" \/>', $content);
    }

$content= preg_replace( '/(height|width)="\d*"\s/', "", $content);
 return ''
    . do_shortcode( $content ) . '' . $caption . '';}

cela a fonctionné pour moi, cela ne fonctionne pas pour vous, vous pouvez regarder d'autres crochets qui forcent la largeur de vos images

0
Digamber