Set custom sizes attribute on img in the post editor

Hi arniebradfo,

To modify the default sizes attribute that is added to images, you should add a filter to wp_get_attachment_image_sizes (in version 3.0 of the plugin).

Joe

Joe,

I don’t want to modify the default sizes attribute that is added to images.

I want to detect IF there is a sizes attribute already set on an img tag in the content. If there is, I want to use that. If there isn’t, I want to use the default.

I cannot do this by filtering wp_get_attachment_image_sizes.

I need to access to the $image string in wp_image_add_srcset_and_sizes.

I had to edit your plugin to get this to work.

In wp_image_add_srcset_and_sizes, I changed:

if ( $srcset ) {
		$sizes = wp_get_attachment_image_sizes( $size_array, $image_meta, $attachment_id, $src );
	}

to:

if ( $srcset ) {
		// Check if the sizes="" attribute was manually set on the image tag in the content.
		$sizes_regex = '/sizes="([^"]*)"/' ;
		$sizes_were_manually_set = preg_match( $sizes_regex, $image, $matches );
		// If the sizes="" attribute was manually set,
		if( $sizes_were_manually_set == 1 ) {
			// delete it from the $image string
			$image = preg_replace( $sizes_regex, '', $image );
			// and set $sizes equal to the capture group in the first match of sizes="" found in the $image string.
			$sizes = $matches[1];
		} else {
			$sizes = wp_get_attachment_image_sizes( $size_array, $image_meta, $attachment_id, $src );
		}
	}

It seems like setting a custom sizes attribute on each img tag in the content might be a pretty common use case. The user will know how large each image will appear on their website, and it seems kind to weird that a user cannot currently set sizes on a case to case basis.

Would you consider adding some kind of functionality to your plugin to support this(especially if this is going to be included in the wp core).

Thanks a 1,000,000,
-James

Ah, sorry James, I misunderstood your initial request. I agree with you that we shouldn’t override a sizes attribute that is already set on an image in the post editor. We’ll get that fixed in the next release.

Cheers,
Joe

Awesome!

Thanks Joe

Joe, is there any way to ensure that the srcset matches the protocol of the initial request? Our site requires all assets to be https, but the srcset forces http, and now none of the images load.

Hi @flukesh,

If your site requires that assets be served over HTTPS, then you should make sure that you’re setting your Site URL and Home URL to HTTPS schemes under Settings > General. You can alternately force your site to use HTTPS using the following constants in your wp-config.php file:

define('WP_HOME','https://example.com');
define('WP_SITEURL','https://example.com');