Custom Sizes Array Help

Hi,

Thanks for the question. The use case you bring up is one we’re working on improving, because it’s a bit clunky right now. See this issue in GitHub.

That said, the way you would accomplish this is to remove the tevkori_extend_image_tag filter using remove_filter('image_send_to_editor', 'tevkori_extend_image_tag'); and replace it with your own, which mimics the tevkori_extend_image_tag() function, but with the code you posted above replacing the line that reads: $sizes = tevkori_get_sizes( $id, $size );.

Hope that helps.

Joe

Thanks, Joe.

This solution makes perfect sense. Unfortunately, me being but a PHP Padawan, I’m struggling w/ the implementation. This is what I have added to my functions.php:

function benoit_extend_image_tag( $html, $id, $caption, $title, $align, $url, $size, $alt ) {
	add_filter( 'editor_max_image_size', 'tevkori_editor_image_size' );

	$args = array(
		'sizes' => array(
		     array(
		      'size_value'  => '62.2vw',
		      'mq_value'        => '768px',
		      'mq_name'         => 'min-width'
		    ),
		    array(
		      'size_value'  => '93.75vw'
		    ),
		)
	);

	$sizes = tevkori_get_sizes( $id, $size, $args );

	// Build the data-sizes attribute if sizes were returned.
	if ( $sizes ) {
		$sizes = 'data-sizes="' . $sizes . '"';
	}

	// Build the srcset attribute.
	$srcset = tevkori_get_srcset_string( $id, $size );

	remove_filter( 'editor_max_image_size', 'tevkori_editor_image_size' );

	$html = preg_replace( '/(src\s*=\s*"(.+?)")/', '$1 ' . $sizes . ' ' . $srcset, $html );

	return $html;
}

And then I have added this to the specific template before <?php the_content ?>:

remove_filter('image_send_to_editor', 'tevkori_extend_image_tag');
add_filter('image_send_to_editor', 'benoit_extend_image_tag', 0 , 8);

Now of course I realize you aren’t here to give PHP lessons, but any help would be greatly appreciated. I can’t be that far off, right? ??

-Nick

Hey Nick,

Looks like you’re really close. Those two functions to remove our filter and add your own should be in your functions file as well. If it doesn’t work on it’s own, try wrapping them in a separate function that is called in the ‘init’ hook, like this:

function benoit_filter_swap() {
    remove_filter('image_send_to_editor', 'tevkori_extend_image_tag');
    add_filter('image_send_to_editor', 'benoit_extend_image_tag', 0 , 8);
}
add_action( 'init', 'benoit_filter_swap' );

Thanks for getting back to me, Joe,

I tried wrapping the remove_filter and add_filter functions in a separate benoit_filter_swap function and calling that in the init hook as per your example, but when I inspected the element I still got the original sizes attribute and not what I had set in $args.

However … that was only when placing the image into the post using the visual editor. When I place the image into the post using the text editor, I get:

‘<img src=”https://192.168.0.45:8888/wp-content/uploads/2015/05/2048×2048.png&#8221; data-sizes=”(min-width: 768px) 62.2vw, 93.75vw” srcset=”https://192.168.0.45:8888/wp-content/uploads/2015/05/2048×2048-150×150.png 150w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048×2048-600×600.png 600w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048×2048-1024×1024.png 1024w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048×2048-300×300.png 300w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048×2048.png 2048w” data-sizes=”(max-width: 2048px) 100vw, 2048px” srcset=”https://192.168.0.45:8888/wp-content/uploads/2015/05/2048×2048-150×150.png 150w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048×2048-600×600.png 600w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048×2048-1024×1024.png 1024w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048×2048-300×300.png 300w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048×2048.png 2048w” alt=”2048×2048″ width=”2048″ height=”2048″ class=”alignnone size-full wp-image-25″ />‘

So it looks like the plugin is pulling in both my settings and the default settings and stuffing them both into the tag, but at least my custom array is there! And when I test it, I guess the second srcset and data-sizes are just ignored because my settings are working.

But now if I ever switch to the visual editor after placing an image using the text editor, and then switch back to the text editor, the code automatically reverts to the plugin default:

‘<img class=”alignnone size-full wp-image-25″ src=”https://192.168.0.45:8888/wp-content/uploads/2015/05/2048×2048.png&#8221; srcset=”https://192.168.0.45:8888/wp-content/uploads/2015/05/2048×2048-150×150.png 150w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048×2048-600×600.png 600w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048×2048-1024×1024.png 1024w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048×2048-300×300.png 300w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048×2048.png 2048w” alt=”2048×2048″ width=”2048″ height=”2048″ data-sizes=”(max-width: 2048px) 100vw, 2048px” />‘

For now, if I really need to edit the sizes attribute of the_content images, I can just alter the $default array in the plugin source (not an ideal solution I know, but it works).

Any ideas?
-Nick

My apologies for the double post! It’s a Monday. I accidentally used single quote marks instead of backticks to section off my markup: Here’s the same post cleaned up:

Thanks for getting back to me, Joe,

I tried wrapping the remove_filter and add_filter functions in a separate benoit_filter_swap function and calling that in the init hook as per your example, but when I inspected the element I still got the original sizes attribute and not what I had set in $args.

However … that was only when placing the image into the post using the visual editor. When I place the image into the post using the text editor, I get:

<img src="https://192.168.0.45:8888/wp-content/uploads/2015/05/2048x2048.png" data-sizes="(min-width: 768px) 62.2vw, 93.75vw" srcset="https://192.168.0.45:8888/wp-content/uploads/2015/05/2048x2048-150x150.png 150w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048x2048-600x600.png 600w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048x2048-1024x1024.png 1024w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048x2048-300x300.png 300w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048x2048.png 2048w" data-sizes="(max-width: 2048px) 100vw, 2048px" srcset="https://192.168.0.45:8888/wp-content/uploads/2015/05/2048x2048-150x150.png 150w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048x2048-600x600.png 600w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048x2048-1024x1024.png 1024w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048x2048-300x300.png 300w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048x2048.png 2048w" alt="2048x2048" width="2048" height="2048" class="alignnone size-full wp-image-25" />

So it looks like the plugin is pulling in both my settings and the default settings and stuffing them both into the tag, but at least my custom array is there! And when I test it, I guess the second srcset and data-sizes are just ignored because my settings are working.

But now if I ever switch to the visual editor after placing an image using the text editor, and then switch back to the text editor, the code automatically reverts to the plugin default:

<img class="alignnone size-full wp-image-25" src="https://192.168.0.45:8888/wp-content/uploads/2015/05/2048x2048.png" srcset="https://192.168.0.45:8888/wp-content/uploads/2015/05/2048x2048-150x150.png 150w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048x2048-600x600.png 600w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048x2048-1024x1024.png 1024w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048x2048-300x300.png 300w, https://192.168.0.45:8888/wp-content/uploads/2015/05/2048x2048.png 2048w" alt="2048x2048" width="2048" height="2048" data-sizes="(max-width: 2048px) 100vw, 2048px" />

For now, if I really need to edit the sizes attribute of the_content images, I can just alter the $default array in the plugin source (not an ideal solution I know, but it works).

Any ideas?
-Nick

Hi Nick,

I missed one thing in my quick coding example, and that’s the need to pass a priority parameter to the remove_filter() function. This should do the trick:

function benoit_filter_swap() {
    remove_filter('image_send_to_editor', 'tevkori_extend_image_tag', 0);
    add_filter('image_send_to_editor', 'benoit_extend_image_tag', 0 , 8);
}
add_action( 'init', 'benoit_filter_swap' );

That did it!

I really appreciate all your help,

-Nick