Comments (4)
@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.
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.
Related Issues (20)
- The hero img looks strange on high resolution display HOT 4
- throw error: Unhandled 'error' event while using gulp img
- Is it necessary to install Ruby environment?
- Migrate to Gulp 4 HOT 4
- Accessibility errors found in your template
- Using the gem, how can I run `gulp img`? HOT 1
- Help getting script to run HOT 1
- Sleek not supported HOT 1
- Multilingual support HOT 1
- The Captcha refuses to work.
- How do I change the code snippet theme
- can you help me? HOT 1
- Jekyll 4.0.0 compatibles issue
- I should click twice 'header__toggle' If I changed browser size. HOT 1
- Images do not show up properly when using custom domain
- gulp img doesnβt work on macOS Catalina 10.15.3
- .
- SVG help
- node-gyp rebuild Err because [email protected] are suspend . Can you help maintain and update the latest dependencies of the project ?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sleek.