1

I am using WordPress with Twitter Bootstrap 3 and have an issue when it comes to images with captions.

Images with captions are given a height and width attribute which stops them from being responsive.

I tried the following code below but this only works for images without captions:

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;

}

I then tried another method from another post on this forum which sets the width attribute to nothing but I did not get any success as the width and height attribute on the image remains:

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

I am looking for a way to do this with PHP and WP's in-built filters and I think I am close to the answer but do not know in which direction to go exactly.

Many Thanks, nav

1

Here is another possibility, it alters the image markup when you select an image to add to your content in the editor

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

I used the below solution. It was found here

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

That's a lot of code, if you want the image original size and not the cropped version why don't you use wp_get_attachment_image_src() instead?

In Reply to your comment:->


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

this worked for me, it it doesn't for you, you may want to look at other hooks that are forcing the width on your images

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.