Title: data-srcset instead of srcset
Last modified: August 30, 2016

---

# data-srcset instead of srcset

 *  [Aldo](https://wordpress.org/support/users/ab_lu/)
 * (@ab_lu)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/data-srcset-instead-of-srcset/)
 * Hello
 * Is there a way to change srcset to data-srcset instead using the picture markup?
 * The reason is, we use lazysizes to load the images as they appear.
    _lazySizes
   needs data-srcset or another custom attribute otherwise, the browser already 
   would load something._
 * Any way we can change this as an attribute when echoing the picture element?
 * Thanks
    Aldo
 * [https://wordpress.org/plugins/responsify-wp/](https://wordpress.org/plugins/responsify-wp/)

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

 *  Plugin Author [stefanledin](https://wordpress.org/support/users/stefanledin/)
 * (@stefanledin)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/data-srcset-instead-of-srcset/#post-6282167)
 * Hi Aldo!
    Of course there is 🙂
 * [http://responsifywp.com/demo/?page_id=43](http://responsifywp.com/demo/?page_id=43)
   
   [https://github.com/stefanledin/responsify-wp#functions-attributes](https://github.com/stefanledin/responsify-wp#functions-attributes)
 *  Thread Starter [Aldo](https://wordpress.org/support/users/ab_lu/)
 * (@ab_lu)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/data-srcset-instead-of-srcset/#post-6282170)
 * 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?
 *  Plugin Author [stefanledin](https://wordpress.org/support/users/stefanledin/)
 * (@stefanledin)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/data-srcset-instead-of-srcset/#post-6282173)
 * Humm what about using str_replace() before echoing out the output from Picture::
   create() / rwp_picture()?
 *  Thread Starter [Aldo](https://wordpress.org/support/users/ab_lu/)
 * (@ab_lu)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/data-srcset-instead-of-srcset/#post-6282176)
 * 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?
 *  Plugin Author [stefanledin](https://wordpress.org/support/users/stefanledin/)
 * (@stefanledin)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/data-srcset-instead-of-srcset/#post-6282218)
 * 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.
 *  Thread Starter [Aldo](https://wordpress.org/support/users/ab_lu/)
 * (@ab_lu)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/data-srcset-instead-of-srcset/#post-6282341)
 * 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.
 *  Plugin Author [stefanledin](https://wordpress.org/support/users/stefanledin/)
 * (@stefanledin)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/data-srcset-instead-of-srcset/#post-6282347)
 * 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 😉
 *  Thread Starter [Aldo](https://wordpress.org/support/users/ab_lu/)
 * (@ab_lu)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/data-srcset-instead-of-srcset/#post-6282354)
 * Sounds great!
 *  Plugin Author [stefanledin](https://wordpress.org/support/users/stefanledin/)
 * (@stefanledin)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/data-srcset-instead-of-srcset/#post-6282378)
 * 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](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 🙂
 *  Thread Starter [Aldo](https://wordpress.org/support/users/ab_lu/)
 * (@ab_lu)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/data-srcset-instead-of-srcset/#post-6282380)
 * 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.
 *  Thread Starter [Aldo](https://wordpress.org/support/users/ab_lu/)
 * (@ab_lu)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/data-srcset-instead-of-srcset/#post-6282396)
 * 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
 *  Plugin Author [stefanledin](https://wordpress.org/support/users/stefanledin/)
 * (@stefanledin)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/data-srcset-instead-of-srcset/#post-6282397)
 * 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](https://dl.dropboxusercontent.com/u/2630928/Sk%C3%A4rmavbild%202015-07-22%20kl.%2020.05.33.png).

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

The topic ‘data-srcset instead of srcset’ is closed to new replies.

 * ![](https://ps.w.org/responsify-wp/assets/icon-256x256.png?rev=1209208)
 * [Responsify WP](https://wordpress.org/plugins/responsify-wp/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/responsify-wp/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/responsify-wp/)
 * [Active Topics](https://wordpress.org/support/plugin/responsify-wp/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/responsify-wp/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/responsify-wp/reviews/)

 * 12 replies
 * 2 participants
 * Last reply from: [stefanledin](https://wordpress.org/support/users/stefanledin/)
 * Last activity: [10 years, 10 months ago](https://wordpress.org/support/topic/data-srcset-instead-of-srcset/#post-6282397)
 * Status: not resolved