Responsive image markup

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.

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.

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!

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.