search

janczizikow / sleek

:chart_with_upwards_trend: Sleek is a modern Jekyll theme focused on speed performance & SEO best practices
https://janczizikow.github.io/sleek/
MIT License
422 stars 635 forks source link

How can I display an image generated with gulp depending on the client's device? #63

Closed lukalafaye closed 4 years ago

lukalafaye commented 5 years ago

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/.

├── img
│   ├── favicon.jpg
│   ├── icons
│   │   ├── android-chrome-192x192.png
│   │   ├── android-chrome-256x256.png
│   │   ├── apple-touch-icon.png
│   │   ├── browserconfig.xml
│   │   ├── favicon-16x16.png
│   │   ├── favicon-32x32.png
│   │   ├── favicon.ico
│   │   ├── icon-github.svg
│   │   ├── icon-instagram.svg
│   │   ├── icon-twitter.svg
│   │   ├── manifest.json
│   │   ├── mstile-150x150.png
│   │   └── safari-pinned-tab.svg
│   └── posts
│       ├── emile-perron-190221.jpg
│       ├── emile-perron-190221_lg.jpg
│       ├── emile-perron-190221_md.jpg
│       ├── emile-perron-190221_placehold.jpg
│       ├── emile-perron-190221_sm.jpg
│       ├── emile-perron-190221_thumb@2x.jpg
│       ├── emile-perron-190221_thumb.jpg
│       ├── emile-perron-190221_xs.jpg
│       ├── Macaca_nigra_self-portrait_large-e1524567086123-1100x715.jpeg
│       ├── Macaca_nigra_self-portrait_large-e1524567086123-1100x715_lg.jpeg
│       ├── Macaca_nigra_self-portrait_large-e1524567086123-1100x715_md.jpeg
│       ├── Macaca_nigra_self-portrait_large-e1524567086123-1100x715_placehold.jpeg
│       ├── Macaca_nigra_self-portrait_large-e1524567086123-1100x715_sm.jpeg
│       ├── Macaca_nigra_self-portrait_large-e1524567086123-1100x715_thumb@2x.jpeg
│       ├── Macaca_nigra_self-portrait_large-e1524567086123-1100x715_thumb.jpeg
│       ├── Macaca_nigra_self-portrait_large-e1524567086123-1100x715_xs.jpeg
│       ├── shane-rounce-205187.jpg
│       ├── shane-rounce-205187_lg.jpg
│       ├── shane-rounce-205187_md.jpg
│       ├── shane-rounce-205187_placehold.jpg
│       ├── shane-rounce-205187_sm.jpg
│       ├── shane-rounce-205187_thumb@2x.jpg
│       ├── shane-rounce-205187_thumb.jpg
│       ├── shane-rounce-205187_xs.jpg
│       ├── sleek.jpg
│       ├── sleek_lg.jpg
│       ├── sleek_md.jpg
│       ├── sleek_placehold.jpg
│       ├── sleek_sm.jpg
│       ├── sleek_thumb@2x.jpg
│       ├── sleek_thumb.jpg
│       └── sleek_xs.jpg
└── js
    └── bundle.js

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?

janczizikow commented 5 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 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.

lukalafaye commented 5 years ago

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)

janczizikow commented 5 years ago

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 🙂

lukalafaye commented 5 years ago

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!