Closed lukalafaye closed 4 years ago
@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
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.
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)
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, image@2x.jpg 2x">
<source media="(min-width: 450px)" srcset="image-medium.jpg, image-medium@2x.jpg 2x">
<img src="image-small.jpg" srcset="image-small@2x.jpg 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 🙂
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 :+1:
@janczizikow You can close the issue and I'll make a PR if I find a way of implementing that!
I just created a Jekyll blog with your theme and wanted to add images in post.
After running gulp on an image, I found the generated thumbnails in
assets/img/posts/
.I could link one of the jpeg in a new post with :
![alt text](/assets/img/posts/image.jpeg)
but didn't find any info in your documentation about how to properly add them so that the correct thumbnail is displayed depending on the device...I saw that for post previews, we could just add the image name and your theme would do it.
How can I display an image generated with gulp depending on the client's device?