Nesting Shortcodes #2039

tusamni · 2021-10-20T19:01:18Z

tusamni
Oct 20, 2021

I'm hoping that I'm missing something here. I've been struggling with figuring out how to make this piece of code reusable. It's a simple featured posts section using a shortcode for the 11ty image plugin.

{% for featured in collections.featuredShoots %}
<a href="{{ featured.url }}" class="relative">
	{% image 
		src=featured.data.hero,
		imgClass="object-cover rounded-sm h-[300px] md:h-[500px]",
		showTitle=false,
		showDesc=false
	%}
	<div class="absolute px-2 py-1 text-sm font-medium text-black capitalize align-middle bg-white rounded-sm dark:text-gray-200 dark:bg-gray-700 top-4 right-4">
		{{ featured.data.category }}
	</div>
	<div class="relative block p-6 space-y-6 bg-white shadow-2xl bg-opacity-90 dark:bg-opacity-90 dark:bg-gray-700 lg:rounded-l-sm lg:rounded-br-sm lg:absolute lg:-bottom-20 lg:left-16">
		<h3 class="text-xl font-normal dark:text-gray-100">{{ featured.data.title }}</h3>
		<p class="text-lg font-light dark:text-gray-300">{{ featured.data.description }}</p>
		<div class="flex flex-row items-center w-full space-x-2 text-lg font-semibold group dark:text-gray-100">
			<p>View Photos</p>
			<div class="transition duration-300 transform group-hover:translate-x-2 arrow">
				&rarr;
			</div>
		</div>
	</div>
</a>
{% endfor %}

My initial thought was to just create another shortcode, but this didn't work. So I tried a Nunjucks includes, but that wouldn't render the image shortcode.

cfjedimaster · 2021-10-20T19:08:06Z

cfjedimaster
Oct 20, 2021

I'm having difficulty understanding what is going on - can you explain what isn't working? Are you saying when you take the code above, put it in a file that gets included, everything but the image works?

6 replies

tusamni Oct 20, 2021
Author

I understand that JS literal is processing the {% image %} shortcode as a string. So I guess I'm just wondering, how do I include a shortcode inside of a shortcode? Is that even possible?

cfjedimaster Oct 20, 2021

Ah I see what you mean. So filters can access other filters (https://www.11ty.dev/docs/filters/#access-existing-filters), but I don't see access for that in shortcodes. You can try running eleventyConfig.getShortcode or getShortCode, but as it's not documented, I'm assuming you can't.

pdehaan Oct 20, 2021
Collaborator

I don't think I'm particularly happy with it, but here was my solution. I copied the initial shortcode and logic from the eleventy-img repo, and then my wrapper async shortcode had to use ${ await imageShortcode(...) }, which I probably should have done outside the template string (in hindsight). But I could see this being a bit trickier if your shortcodes were defined in separate files and not all in the .eleventy.js config file.

const Image = require("@11ty/eleventy-img");

async function imageShortcode(kwargs) {
  let metadata = await Image(kwargs.src, {
    widths: [300, 600],
    formats: ["avif", "jpeg"]
  });

  let imageAttributes = {
    alt: kwargs.alt || "",
    sizes: kwargs.sizes,
    loading: "lazy",
    decoding: "async",
  };

  // You bet we throw an error on missing alt in `imageAttributes` (alt="" works okay)
  return Image.generateHTML(metadata, imageAttributes);
}

module.exports = function(eleventyConfig) {
  eleventyConfig.addNunjucksAsyncShortcode("image", imageShortcode);
  eleventyConfig.addLiquidShortcode("image", imageShortcode);
  eleventyConfig.addJavaScriptFunction("image", imageShortcode);

  eleventyConfig.addNunjucksAsyncShortcode("featuredShoot", async function (featured={}) {
    const img = {
      src: featured.data.hero,
    };

    return `<a href="${ featured.url }" class="relative">
      ${ await imageShortcode(img) }
      <div class="absolute px-2 py-1 text-sm font-medium text-black capitalize align-middle bg-white rounded-sm dark:text-gray-200 dark:bg-gray-700 top-4 right-4">
        ${ featured.data.category }
      </div>
      <div class="relative block p-6 space-y-6 bg-white shadow-2xl bg-opacity-90 dark:bg-opacity-90 dark:bg-gray-700 lg:rounded-l-sm lg:rounded-br-sm lg:absolute lg:-bottom-20 lg:left-16">
        <h3 class="text-xl font-normal dark:text-gray-100">${ featured.data.title }</h3>
        <p class="text-lg font-light dark:text-gray-300">${ featured.data.description }</p>
        <div class="flex flex-row items-center w-full space-x-2 text-lg font-semibold group dark:text-gray-100">
          <p>View Photos</p>
          <div class="transition duration-300 transform group-hover:translate-x-2 arrow">
            &rarr;
          </div>
        </div>
      </div>
    </a>`;
  });

  return {
    dir: {
      input: "src",
      output: "www"
    }
  }
};

cfjedimaster Oct 20, 2021

That's kinda bad ass.

pdehaan Oct 20, 2021
Collaborator

Possibly this:

    const img = {
      src: featured.data.hero,
    };

    const imgHtml = await eleventyConfig.nunjucksAsyncShortcodes.image(img);
    return `<a href="${ featured.url }" class="relative">
      ${ imgHtml }
      <div class="absolute px-2 py-1 text-sm font-medium text-black capitalize align-middle bg-white rounded-sm dark:text-gray-200 dark:bg-gray-700 top-4 right-4">
        ${ featured.data.category }
      </div>
      ...
    `;

Although not sure how much @zachleat would hate me for potentially abusing eleventyConfig.nunjucksAsyncShortcodes directly, although I didn't see an obvious getter function similar to getFilter:

eleventy/src/UserConfig.js

Lines 224 to 231 in 48c0269

    
           getFilter(name) { 
        
             return ( 
        
               this.javascriptFunctions[name] || 
        
               this.nunjucksFilters[name] || 
        
               this.liquidFilters[name] || 
        
               this.handlebarsHelpers[name] 
        
             ); 
        
           }

One thing I was/am struggling with was passing of positional arguments vs using the nunjucks specific kwargs style like you were using; ref https://www.11ty.dev/docs/languages/nunjucks/#shortcode-named-argument-syntax-(nunjucks-only). Not sure which is better. One is definitely easier to read, but is Nunjucks specific, so not as portable.

tusamni · 2021-10-21T01:20:52Z

tusamni
Oct 21, 2021
Author

Thanks Peter,

An option for shortcodes like the getFilter would be nice.

The named paramaters aren't a big deal. I was only using them since it makes it a little easier to remember what I'm passing into the shortcode.

I'm going to give this a shot. If I can't make it work, then I'll probably just revert to using a CSS class for code reuse on the featured post and maintain the {% image %} shortcode for now.

2 replies

pdehaan Oct 21, 2021
Collaborator

A couple other random bits of things I learned today…

This did NOT seem to work (didn't output anything). I don't exactly know why, but I blame async shortcodes.

{% for featured in collections.featuredShoots %}
  <!-- #{{ loop.index }} -->
  {%- include "featured_shoot.njk" -%}
{% endfor %}

A bit of poking in the Nunjucks docs gave me an excuse to try asyncEach which seems to work for my use case:

{% asyncEach featured in collections.featuredShoots %}
  <!-- #{{ loop.index }} -->
  {% include "featured_shoot.njk" %}
{% endeach %}

Where my ./src/_includes/featured_shoot.njk file looks like this:

<a href="{{ featured.url }}" class="relative">
  {% image 
    src=featured.data.hero,
    imgClass="object-cover rounded-sm h-[300px] md:h-[500px]",
    showTitle=false,
    showDesc=false
  %}
  <div class="absolute px-2 py-1 text-sm font-medium text-black capitalize align-middle bg-white rounded-sm dark:text-gray-200 dark:bg-gray-700 top-4 right-4">
    {{ featured.data.category }}
  </div>
  <div class="relative block p-6 space-y-6 bg-white shadow-2xl bg-opacity-90 dark:bg-opacity-90 dark:bg-gray-700 lg:rounded-l-sm lg:rounded-br-sm lg:absolute lg:-bottom-20 lg:left-16">
    <h3 class="text-xl font-normal dark:text-gray-100">{{ featured.data.title }}</h3>
    <p class="text-lg font-light dark:text-gray-300">{{ featured.data.description }}</p>
    <div class="flex flex-row items-center w-full space-x-2 text-lg font-semibold group dark:text-gray-100">
      <p>View Photos</p>
      <div class="transition duration-300 transform group-hover:translate-x-2 arrow">
        &rarr;
      </div>
    </div>
  </div>
</a>

I wasn't sure if you were thinking of reusing the featured shoot singular, or if your shortcode should include the loop as well, but I think your snippet above was for displaying a single image. 🤷

pdehaan Oct 21, 2021
Collaborator

An option for shortcodes like the getFilter would be nice.

Filed as #2041. Feel free to add feedback and/or vote.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nesting Shortcodes #2039

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 8 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Nesting Shortcodes #2039

tusamni Oct 20, 2021

Replies: 2 comments · 8 replies

cfjedimaster Oct 20, 2021

tusamni Oct 20, 2021 Author

cfjedimaster Oct 20, 2021

pdehaan Oct 20, 2021 Collaborator

cfjedimaster Oct 20, 2021

pdehaan Oct 20, 2021 Collaborator

tusamni Oct 21, 2021 Author

pdehaan Oct 21, 2021 Collaborator

pdehaan Oct 21, 2021 Collaborator

tusamni
Oct 20, 2021

Replies: 2 comments 8 replies

cfjedimaster
Oct 20, 2021

tusamni Oct 20, 2021
Author

pdehaan Oct 20, 2021
Collaborator

pdehaan Oct 20, 2021
Collaborator

tusamni
Oct 21, 2021
Author

pdehaan Oct 21, 2021
Collaborator

pdehaan Oct 21, 2021
Collaborator