Outputting multiple variables into a shortcode

[danielLee0721]

Hi everyone,

For simplicity sake, below is a really dumbed down version of my shortcode which outputs complex responsive image markup.

respImage: function (...args) {
   const altText = args[3];
   <img alt="${altText}">
}

When using this shortcode, is it possible to insert multiple variables as arguments into the altText variable?
So if I have the following data:
// _data/someData.js

{
   "patient": {
      "procedureName": "something",
      "treatmentNumber": "something2"
   }
}

I want to output my shortcode like this:
{%- respImage "{{ someData.patient.procedureName }} after {{ treatmentNumber }} treatments" -%}
Is it possible?

Thank you.

[pdehaan]

You could probably use LiquidJS's capture or Nunjucks' set paired tags, or eleventyComputed value, or just pass the global data file as an argument and do alt value in your shortcode function:

---
title: LiquidJS
eleventyComputed:
  altComputed: "{{ someData.patient.procedureName }} after {{ someData.patient.treatmentNumber }} treatments"
---

<h1>{{ title }}</h1>

{%- capture alt -%}
  {{ someData.patient.procedureName }} after {{ someData.patient.treatmentNumber }} treatments
{%- endcapture -%}

{%- respImage "a.jpg", alt %}
{%- respImage "b.jpg", altComputed %}
{%- respImage2 "c.jpg", someData %}

---
title: Nunjucks
eleventyComputed:
  altComputed: "{{ someData.patient.procedureName }} after {{ someData.patient.treatmentNumber }} treatments"
---

<h1>{{ title }}</h1>

{%- set alt -%}
  {{ someData.patient.procedureName }} after {{ someData.patient.treatmentNumber }} treatments
{%- endset -%}

{%- respImage "a.jpg", alt %}
{%- respImage "b.jpg", altComputed %}
{%- respImage2 "c.jpg", someData %}

/**
 * @typedef {import('@11ty/eleventy/src/UserConfig')} EleventyConfig
 * @typedef {ReturnType<import('@11ty/eleventy/src/defaultConfig')>} EleventyReturnValue
 * @type {(eleventyConfig: EleventyConfig) => EleventyReturnValue}
 */
module.exports = function (eleventyConfig) {
  eleventyConfig.addShortcode("respImage", function (src="", alt="") {
    return `<img src="${ src }" alt="${ String(alt).trim() }" />`;
  });

  eleventyConfig.addShortcode("respImage2", function (src="", data={}) {
    const { procedureName, treatmentNumber } = data.patient;
    const alt = `${ procedureName } after ${ treatmentNumber } treatments`.trim();
    return `<img src="${ src }" alt="${ alt }" />`;
  });

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

OUTPUT

<h1>Nunjucks</h1>
<img src="a.jpg" alt="something after something2 treatments" />
<img src="b.jpg" alt="something after something2 treatments" />
<img src="c.jpg" alt="something after something2 treatments" />

[danielLee0721]

Thank you very much. Always appreciate your help!

[TigersWay]

const altText = args[3];

I want to output my shortcode like this:
{%- respImage "{{ someData.patient.procedureName }} after {{ treatmentNumber }} treatments" -%}
Is it possible?

You pass only one parameter to a shortcode expecting at least 3, if I understood correctly...

You may have 2 different ways to solve that type of trouble

• eleventyComputed in the frontmatter

---
eleventyComputed:
  var: "{{ someData.patient.procedureName }} after {{ someData.patient.treatmentNumber }} treatments"
---
{% respImage "1", "2", var %}

• or directly

{% respImage "1", "2", someData.patient.procedureName + ' after ' + someData.patient.treatmentNumber + ' treatments' %}