eeeps / eleventy-respimg Goto Github PK
View Code? Open in Web Editor NEWA responsive-image Eleventy shortcode, powered by Cloudinary
License: MIT License
A responsive-image Eleventy shortcode, powered by Cloudinary
License: MIT License
I have setup this cool script, but when trying to implement
{% respimg
"https://res.cloudinary.com/xxxx/image/upload/v1524743816/FODLER/IMAGE_NAME.jpg",
"Lune Exacte - New Moon",
"(min-width: 48em) 48em, 100vw"
%}
in markdown blog file; I am getting
`File changed: site/blog/as_lune-exacte.md
Problem writing Eleventy templates: (more in DEBUG output)
Having trouble rendering njk (and markdown) template ./site/blog/as_lune-exacte.md (TemplateContentRenderError)
(unknown path) [Line 22, Column 4]
unknown block tag: respimg (Template render error):
Template render error: (unknown path) [Line 22, Column 4]
unknown block tag: respimg
at Object._prettifyError (/Users/gXXX/eleventy/skeleventyStarter/node_modules/nunjucks/src/lib.js:36:11)
at Template.render (/Users/XXX/eleventy/skeleventyStarter/node_modules/nunjucks/src/environment.js:542:21)
at /Users/XXX/eleventy/skeleventyStarter/node_modules/@11ty/eleventy/src/Engines/Nunjucks.js:133:14
at new Promise ()
at /Users/gXXX/eleventy/skeleventyStarter/node_modules/@11ty/eleventy/src/Engines/Nunjucks.js:132:14
at /Users/XXXe/eleventy/skeleventyStarter/node_modules/@11ty/eleventy/src/Engines/Markdown.js:65:47
at Template.render (/Users/XXX/eleventy/skeleventyStarter/node_modules/@11ty/eleventy/src/TemplateContent.js:167:28)
at processTicksAndRejections (internal/process/task_queues.js:89:5)
at async Template._getContent (/Users/XXX/eleventy/skeleventyStarter/node_modules/@11ty/eleventy/src/Template.js:450:15)
at async Template.getTertiaryMapEntry (/Users/XXX/eleventy/skeleventyStarter/node_modules/@11ty/eleventy/src/Template.js:622:24)
Copied 2 items and Processed 0 files in 0.55 seconds`
What have I made wrong? Any advice?
I really would like to get this script up and running
Cheers Gerhard
A la
const pluginRss = require("@11ty/eleventy-plugin-rss");
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(pluginRss);
};
There are two open pull requests by @brob that would seem very useful:
Adds extra argument for appending classes to the img tag returned
#8
Adds Lazy loading functionality based on global config value
#7
Would it be possible to merge and release these or comment on why they should not be merged?
Thanks!
Extra whitespace in your shortcode will be problematic in markdown files: See 11ty/eleventy#180
Example:
{%- for banner in home_slides.slides -%}
<a href="{{ banner.link }}" title="{{ banner.title }}">
{% respimg "https://egv54645.netlify.app/{{ banner.image }}", "{{ banner.title }}", "1200px" %}
</a>
{%- endfor -%}
@eeeps I found #6 and saw your comment for using #4's merged code, but I'm still getting the same error on my end.
TemplateWriterWriteError` was thrown
> (./_includes/layouts/home.njk) [Line 4, Column 6]
unknown block tag: respimg
`Template render error` was thrown:
Template render error: (./_includes/layouts/home.njk) [Line 4, Column 6]
unknown block tag: respimg
at Object._prettifyError (D:\repos\spectrumac-website\node_modules\nunjucks\src\lib.js:36:11)
at Template.render (D:\repos\spectrumac-website\node_modules\nunjucks\src\environment.js:536:21)
at D:\repos\spectrumac-website\node_modules\@11ty\eleventy\src\Engines\Nunjucks.js:236:14
at new Promise (<anonymous>)
at D:\repos\spectrumac-website\node_modules\@11ty\eleventy\src\Engines\Nunjucks.js:235:14
at TemplateLayout.render (D:\repos\spectrumac-website\node_modules\@11ty\eleventy\src\TemplateLayout.js:152:31)
at process._tickCallback (internal/process/next_tick.js:68:7)
Problem writing Eleventy templates: (more in DEBUG output)
> Having trouble writing template: _site/index.html
Hey Eric!
I'm fairly new to Cloudinary and Eleventy, so I'm just trying to get my head around the best process for this stuff. If I'm developing my site locally, and I add a new image to my images folder, that obviously not yet anywhere publicly remote that Cloudinary can fetch or upload from, so until I deploy the site, those image references will be broken, right? Is there any way to get around that at this point?
I noticed you have "allow relative src paths" on the to-do list - will that allow something like referencing local images in a DEV env, and then using the cloudinary URLs when building for a remote/PROD env?
Different images have different sizes
values, so it would be great to be able either to set the srcsetWidths
list in the shortcode, or be able to define multiple sets of srcsetWidths
in the configuration, like presets in Jekyll Cloudinary.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.