A Fix For WordPress Photo Captions On Responsive Themes

Code

My current WordPress Theme is Responsive and most images work correctly with the CSS, but I was having an issue with photos with captions breaking the responsive designs. I tried a few CSS fixes and didn’t see any change in how the images were being handled on my iPhone.

I came across this function code which works for me. It helps to resize the captioned photos in WordPress when using responsive themes.

https://gist.github.com/jentanbernardus/3023022

add_filter( 'img_caption_shortcode', 'dap_responsive_img_caption_filter', 10, 3 );
 
function dap_responsive_img_caption_filter( $val, $attr, $content = null ) {
  extract(shortcode_atts( array(
    'id' => '',
    'align' => '',
    'width' => '',
    'caption' => ''
    ), 
  $attr));
  
  if ( 1 > (int) $width || empty($caption) )
    return $val;
 
  if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
 
  return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="max-width: 100% !important; height: auto; width: ' . (10 + (int) $width) . 'px">'
  . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}
									

One comment

Leave a Reply