Comments (7)
I've made huge progress towards my aim to use standard Markdown syntax for images and yet generate responsive images. I'm using Eleventy transforms for that, enhancing the standard images HTML <img src="…">
to <img src="…" srcset="…" sizes="…">
and even embedding it in a <figure>
if/when it makes sense.
I'll try to release it soon as a plugin that would support Cloudinary at first (I'm using it), but potentially other image CDNs, or even home made solutions.
Sorry for the teasing, but I wanted to let you know it will come soon, at last. 😁
from eleventy.
Teasing is over, here's my plugin for simple responsive images in Eleventy:
https://github.com/nhoizey/eleventy-plugin-images-responsiver/
eleventy-plugin-images-responsiver
is "just" a thin layer between Eleventy plugin and transformations system and images-responsiver
, a generic HTML transformation Node.js module for simple responsive images.
Eleventy uses Markdown-it to transform Markdown into HTML, and then runs the transform added by eleventy-plugin-images-responsiver
, which calls images-responsiver
to actually transform the HTML.
Neither eleventy-plugin-images-responsiver
nor images-responsiver
transform (resize) the image files, there are multiple ways to do so: https://nhoizey.github.io/images-responsiver/tutorial-05-images-urls.html
from eleventy.
I think this is going to be closely tied to what gets formulated for #13.
from eleventy.
I, for one, (am completely biased but) think this is a great idea! And would of course love to help make it a reality.
I had some simmilar thoughts when seeing this: https://twitter.com/zachleat/status/943502658295476225 ...
@zachleat how exactly do you envision static asset handling things “layering on top?”
from eleventy.
from eleventy.
This repository is now using lodash style issue management for enhancements (see https://twitter.com/samselikoff/status/991395669016436736)
This means enhancement issues will now be closed instead of leaving them open. The enhancement backlog can be found here: https://github.com/11ty/eleventy/issues?utf8=%E2%9C%93&q=label%3Aneeds-votes+sort%3Areactions-%2B1-desc+
from eleventy.
Now that we have shortcodes - here's a (very basic) start: https://github.com/eeeps/eleventy-respimg
from eleventy.
Related Issues (20)
- Unable to use helpers/filters in computed data (Cannot find module '.eleventy') HOT 5
- Tried to use templateContent too early in eleventy 3.0.0-alpha.3 on rerender HOT 5
- If I'm using Ghost as a data source and it provides article content in HTML code, how can I do code highlighting? HOT 7
- Async plugins are not supported HOT 4
- Dependencies inside page.jsx JavaScript templates are cached and don’t apply changes in 2.0.1
- Problems with Eleventy server, passthrough copy, and pathPrefix
- Watch-Serve Skips Building Due To Passthrough Copy Config
- Build performance issue with i18n plugin and pagination HOT 1
- ERR_REQUIRE_ESM when watching or serving a site located in a subdirectory of a module package HOT 1
- "Unhandled rejection in promise" error when saving changes to Markdown files HOT 1
- Accessing data.collections in eleventyComputed.permalink kills paginated pages HOT 5
- Potentially switch from chokidar to @parcel/watcher or turbowatch HOT 2
- CommonJS versus ESM docs
- WebC docs should highlight $data HOT 2
- Getting to know Eleventy 3 codebase HOT 4
- Mardown-it implementation of `inputpath-to-url`
- Allow using only a `fileSlug` in `inputpath-to-url`, in addition to full path
- Enhance convenience and performance of DOM based transforms HOT 2
- Test viability of `fdir` replacement for `fast-glob`
- Test viability of `fsx` over `graceful-fs`
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 eleventy.