eeeps / eleventy-respimg Goto Github PK

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

There are two open pull requests by @brob that would seem very useful:

Adds extra argument for appending classes to the img tag returned
https://github.com/eeeps/eleventy-respimg/pull/8

Adds Lazy loading functionality based on global config value
https://github.com/eeeps/eleventy-respimg/pull/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

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.

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 -%}

A la

const pluginRss = require("@11ty/eleventy-plugin-rss");
module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(pluginRss);
};

via https://www.11ty.io/docs/plugins/

@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?