data-srcset instead of srcset

Hi Aldo!
Of course there is ??

https://responsifywp.com/demo/?page_id=43
https://github.com/stefanledin/responsify-wp#functions-attributes

Thanks for the quick feedback!

But this involves setting me all the images manually.

$rwp_attributes = array(
	'sizes' => array( 'medium-image', 'medium-image@2x', 'large-image', 'large-image@2x' ),
	'media_queries' => array(
		'medium-image' 	=> 'min-width: 450px',
		'large-image' 	=> 'min-width: 600px'
	),
	'retina' => true,
	'attributes' => array(
		img' => array(
			'class' => 'lazyload img-responsive'
		),
	'ignored_image_formats' => array( 'gif' )
)
);
echo Picture::create( 'element', $plan_image["ID"], $rwp_attributes );

Is there not a way where I can just say use data-srcset instead?

Humm what about using str_replace() before echoing out the output from Picture::create() / rwp_picture()?

This works withe the manually added Picture::create.

How can I change it in the automatically replaces images in the_content and the featured images?

I see what you mean, but I can’t think of any good solution right now. I guess that you could apply a filter on the_content and post_thumbnail_html and check for a picture element and do an str_replace there.
It’s not the cleanest solution in the world, but I think that it would work.

For the featured image I can apply the same workaround with str_replace().
Regarding he images in the_content, could you not add an option into core of the plugin, where we can enable/disable srcset and use data-srcset instead?
The problem applying str_replace to the_content messes up all the captions.

Okey, it’s a shame it didn’t work out for you!
I’ll think about a solution for that. I’ve been working on RWP 1.9 for quite som time now and would like to release it as soon as possible now. I’ll try to squeeze in that feature to ??

Sounds great!

Hi again Aldo!
I’ve been thinking and it doesn’t feel right to add yet another option to the settings page. How would it look like? Just a checkbox saying “replace srcset with data-srcset”?
I think it would be better if I ship RWP with some kind of lazy load solution in that case, but that doesn’t feel right either.

The best solution I could come up with, for the moment at least, is a new filter that lets you edit the generated element before it’s inserted into the content.
A simple str_replace would do the trick.

function replace_srcset_with_data_srcset( $element ) {
	$element = str_replace('srcset', 'data-srcset', $element);
	return $element;
}
add_filter( 'rwp_edit_generated_element', 'replace_srcset_with_data_srcset' );

It’s included in the RWP 1.9 beta and can be downloaded here: https://github.com/stefanledin/responsify-wp/archive/1-9-0-replace-src.zip
Feel free to try out the new UI for creating custom media queries if you download the beta. I would really appreciate some opinions on it ??

Hi Stefan

Thanks a lot for your feedback!

I agree regarding implementing this option into the settings or integrate lazyload.

What I was referring to is to add an option for the settings array, where the replacement can be set directly as parameter.
But the new filter looks great to me.

I’ll not be able to test it this week, but I’ll get back to you a soon I checked it out.

Hi Stefan

Thanks for the updated version.
This looks great.

One question about the Media Query settings.
Is there already any documentation how to handle this?

Let’s say I have this attributes. How would I reflect this in the GUI?

$rwp_attributes = array(
								'sizes' => array( 'small-gallery-size', 'small-gallery-size@2x', 'medium-gallery-size', 'medium-gallery-size@2x', 'large-gallery-size', 'large-gallery-size@2x', 'xlarge-gallery-size', 'xlarge-gallery-size@2x' ),
    							'media_queries' => array(
        											'medium-gallery-size' 	=> 'min-width: 600px',
        											'large-gallery-size' 	=> 'min-width: 1335px',
        											'xlarge-gallery-size' 	=> 'min-width: 1800px'
    							),
    							'retina' => true,
    							'attributes' => array(
    												'img' => array(
            											'class' => 'lazyload img-responsive'
            									),
    							'ignored_image_formats' => array( 'gif' )
        						)
    						);

Thanks!
Aldo

Thanks for taking a look at it! ??
No, I haven’t made any documentation at all yet. I want it to be as self explaining as possible, but I am thinking about doing some kind of tutorial/screencast where I demonstrate it. I just haven’t come up with any really good scenario yet.
I’m also thinking about doing a series of tutorials. Maybe one where I’m implementing RWP on an existing WordPress site.

Anyway, back to your question. Adding attributes to the generated element is not possible to do with the UI yet. But both retina and ignored image formats can be handled on the settings page.
Your media query settings would look like this.