How can I display an image generated with gulp depending on the client's device? about sleek HOT 4 CLOSED

@lukalafaye to achieve you would need to adjust gulpfile to generate a set of new images for the post body. Then inside markdown of your post, you could use regular html, add the an image tag with srcset attribute or use a tag instead.

Right now the post previews on the homepage are using srcset attribute to load images corresponding to the device pixel ration (1x and 2x). The images initially load a small placeholder and then lazy sizes takes care of the lazy loading.

from sleek.

I could generate a set of new images. I'll try using html but it'd be great if the theme could support md local image links. (I can try making a PR if you'd like)

from sleek.

Hey @lukalafaye sure a PR would be nice. I don't know if it would be possible to have responsive images with just md markup right out out the box. However it can be easily done with html:
eg.:

<picture>
  <source media="(min-width: 800px)" srcset="image.jpg, [email protected] 2x">
  <source media="(min-width: 450px)" srcset="image-medium.jpg, [email protected] 2x">
  <img src="image-small.jpg" srcset="[email protected] 2x">
</picture>

Have a look at the picture element docs. Of course that would be quite annoying to write all this for each image inside the article post, so if you have a better solution - I would be keen to hear it 🙂

from sleek.

Thanks a lot! I really like the theme and it'd be great if we could support md image links so that they are responsive 👍
@janczizikow You can close the issue and I'll make a PR if I find a way of implementing that!

from sleek.