Title: Responsive image markup
Last modified: August 22, 2016

---

# Responsive image markup

 *  [Demokrit](https://wordpress.org/support/users/demokrit/)
 * (@demokrit)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/responsive-image-markup/)
 * Hi,
 * I’m a php developer and started my first WP theme 4 weeks ago to get an understanding
   of the WP-way to do things. My first goal is to build a perfect match of Twentyfourteen
   based on Bootstrap 3.2.0. markup and styles. Until now, every problem could be
   solved. I now have multiple widget areas, navigations, responsive post thumbnails
   and featured content – all speaking “Bootstrap”.
 * The only problem left are image attachments. There is more than one way to get
   images to be responsive, and I want to start with the one, which can live with
   image dimensions generated by WP. To get this working there must be a wrapper
   element for the image with knowledge of the image dimensions. So the following
   markup will work, if “size-medium” reflects the percentage of the available image
   width in relation to the content width (I added it as an inline style for showcasing):
 *     ```
       <span class="size-medium" style="width:36.6%;">
       	<img height="219" width="300" alt="The ALT text" src="myimage.jpg" class="img-responsive">
       </span>
       ```
   
 * or
 *     ```
       <a href="myBigImage.jpg" class="size-medium" style="width:36.6%;">
       	<img height="219" width="300" alt="The ALT text" src="myimage.jpg" class="img-responsive">
       </a>
       ```
   
 * or
 *     ```
       <figure class="wp-caption size-medium" id="attachment_50" style="width:36.6%;">
       	<a href="myBigImg.jpg">
       		<img height="219" width="300" alt="The ALT text" src="myimage.jpg" class="img-responsive">
       	</a>
       	<figcaption class="wp-caption-text">The Image Caption</figcaption>
       </figure>
       ```
   
 * My first approach was the “img_caption_shortcode” filter. The “$atts[‘width’]”
   can be used to determine the correct wrapper class for the image. This is a bit
   hacky, but works like charme – as long as you have a caption and stick to predefined
   image sizes. If you don’t, this filter will fail, since Core function “img_caption_shortcode”
   returns a static image tag in case of missing captions before applying the custom
   filter. This makes it impossible to wrap an img tag into “figure” tags by default(
   which would be perfectly ok, since “figcaption” is optional).
 * There would be no problem at all, if “size-medium” class could be applied to 
   any wrapper element instead, be it a link or figure tag. But instead it is added
   to the img tag, where it is useless (unless somebody invents the css parent selector)
 * So, to ask a more abstract question: How can I create a wrapper class for an 
   img-tag, which works in any scenario?
 * Thanks for any help,
 * Thomas

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/responsive-image-markup/#post-5351125)
 * I don’t have a full answer, but I do have an idea. You will need two different
   approaches, depending on if there is a caption or not. You have the caption part
   worked out I take it.
 * I believe any wrapper you care to provide around an image tag would work fine
   if it were not for the size attributes in the image tag. So the thing to do is
   strip out those attributes. There’s a function somewhere that inserts these image
   tags, I’m pretty sure the output goes through a filter. I just don’t recall where
   this stuff is. Sorry.
 * You can probably add your wrapper in the same filter for one stop shopping. Stripping
   attributes out of an HTML string is still a bit hacky, but a correctly written
   routine should be fairly bomb proof.
 *  Thread Starter [Demokrit](https://wordpress.org/support/users/demokrit/)
 * (@demokrit)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/responsive-image-markup/#post-5351208)
 * I have tried to enforce a “figure” wrapper for images with or without a caption:
 *     ```
       if (!function_exists('bootstrapped_img_caption_shortcode')) {
   
       	add_filter('img_caption_shortcode', 'bootstrapped_img_caption_shortcode', 10, 3);
   
       	function bootstrapped_img_caption_shortcode($empty, $attr, $content) {
       		$atts = shortcode_atts(array(
       			'id' => '',
       			'align' => 'alignnone', // alignnone, alignleft, alignright, aligncenter
       			'width' => '',
       			'caption' => '',
       			'class' => '',
       				), $attr, 'caption');
   
       		$atts['width'] = (int) $atts['width'];
   
       		if ($atts['width'] < 1)
       			return $content;
   
       		if (!empty($atts['id']))
       			$atts['id'] = 'id="' . esc_attr($atts['id']) . '" ';
       		switch ($atts['align']) {
       			case 'alignleft':
       				$bs_align_class = 'pull-left';
       				break;
       			case 'alignright':
       				$bs_align_class = 'pull-right';
       				break;
       			case 'aligncenter':
       				$bs_align_class = 'center-block';
       				break;
       			default:
       				$bs_align_class = '';
       		}
   
       		switch ($atts['width']) {
       			case '150':
       				$bs_wrapper_class = 'bs-thumbnail';
       				break;
       			case '300':
       				$bs_wrapper_class = 'bs-medium';
       				break;
       			case '640':
       				$bs_wrapper_class = 'bs-large';
       				break;
       			default:
       				$bs_wrapper_class = 'bs-block';
       		}
   
       		$class = trim('wp-caption thumbnail ' . $atts['align'] . ' ' . $atts['class'] . ' ' . $bs_align_class . ' ' . $bs_wrapper_class);
   
       		if (current_theme_supports('html5', 'caption')) {
       			if (empty($atts['caption'])) {
       				return '<figure ' . $atts['id'] . ' class="' . esc_attr($class) . '">'
       						. do_shortcode($content) . '</figure>';
       			} else {
       				return '<figure ' . $atts['id'] . ' class="' . esc_attr($class) . '">'
       						. do_shortcode($content) . '<figcaption class="wp-caption-text">' . $atts['caption'] . '</figcaption></figure>';
       			}
       		}
       	}
       }
       ```
   
 * It seems, that this filter is not processed at all, if the image has no caption.
   As soon as I enter one, I get the expected result.
 * The reason seems to be function “image_add_caption” in wp-admin/includes/media.
   php. It provides a filter, but this filter can never be executed if the image
   has no caption. This explains the current behavior.
 * Image handling in WordPress seems to be very complicated.
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/responsive-image-markup/#post-5351225)
 * Yes, in some ways. It’s partly just a matter of learning the WP way, then at 
   least some of it starts to make sense. The hard part always seems to be finding
   the responsible code for something.
 * I think I found the no caption image insertion hook! ‘image_send_to_editor’ applied
   on line 139 of wp-admin/includes/media.php
 * I haven’t tested it to be sure, but it looks very promising. Give it a try!
 *  Thread Starter [Demokrit](https://wordpress.org/support/users/demokrit/)
 * (@demokrit)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/responsive-image-markup/#post-5351227)
 * Thank you very much for you help. I’ve tried this hook yesterday, but problems
   occurred when I changed image alignment and/or size in the visual editor. The
   problem seems to be that I need a combination of both filters to add the image
   size class to the outer element in case of an existing caption.
 * Today I analysed existing responsive websites. None of them is using in-text (
   floating) images at all. In Boostrap terms, everythink is ok as long as assets
   can be placed into BS columns. They fold nicely on small devices and everything
   is working right out of the box, without the need for custom styles.
 * The solution might be, to use a custom gallery. Even for only one image. The 
   first tests look very promising. I hope that I’ll find my final solution tomorrow.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Responsive image markup’ is closed to new replies.

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 4 replies
 * 2 participants
 * Last reply from: [Demokrit](https://wordpress.org/support/users/demokrit/)
 * Last activity: [11 years, 8 months ago](https://wordpress.org/support/topic/responsive-image-markup/#post-5351227)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics