Break Wide Images

This lets the image expand beyond the content area. In the example below, the content area is 800px wide and my “wide” image size is 960px. On screens larger than 960px, it adds -80px left/right margin to the image ( (960px – 800px) / 2). On screens between 960px and 800px, it adds enough negative left/right margin to keep it full width. And at 800px and lower, it’s simply 100% wide.

The two variables at the top let you change the image size and the content area width. The tinymce.php file strips the hardcoded width from captions and adds a “break-wide” class so you can target images with captions.

$break_wide_image_width: 960px;
$break_wide_content_width: 800px;

.wp-caption.break-wide,
img.size-wide {
  @media (min-width: $break_wide_image_width) {
    margin: 0 #{( $break_wide_image_width - $break_wide_content_width ) / -2} 24px;
    width: $break_wide_image_width;
    max-width: $break_wide_image_width;
  }
  @media (max-width: $break_wide_image_width) and (min-width: $break_wide_content_width ) {
    float: none;
    margin: 0 0 24px;
    margin-left: calc(-50vw + #{$break_wide_content_width / 2 });
    width: 100vw;
    max-width: 200%;
  }
  .wp-caption-text {
    padding: 0 10px;
    max-width: 100%;
  }
  img.size-wide {
    margin: 0;
    width: 100%;
  }
}
<?php

/**
  * Remove width from wide images
  *
  */
function be_remove_wide_image_width( $output, $attr, $content ) {

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

  if( empty( $caption ) )
    return $output;

  $class = 'wp-caption ' . esc_attr( $align );
  $style = '';
  if ( $id )
    $id = 'id="' . esc_attr($id) . '" ';
  if( $width )
    $style = ' style="max-width: ' . $width . 'px;"';
 	if ( 960 == (int) $width ) {
    $style = '';
    $class .= ' break-wide';
   }
   $content = str_replace( 'size-single_wide', '', $content );
   return '<div ' . $id . 'class="' . $class . '"' . $style . '>' . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
 }
 add_filter( 'img_caption_shortcode', 'be_remove_wide_image_width', 10, 3 );

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk