Using variable in a shortcode?

[manforowicz]

I have a collection "news" where every item has an associated photo file at the same path.

I succeeded in looping over the collection and displaying the correct photo file path text for every item.

However, when I try to pass this PathStem variable to my image shortcode, I get an error saying no such file or directory, stat '{{ article.filePathStem }}.jpg. It seems the shortcode takes the variable literally, without looking at its actual data.

Here's my .md file:

{% for article in collections.news %}

// This successfully reads the filePathStem variable
"{{ article.filePathStem }}.jpg" 

// This doesn't read the variable successfully
{% image "{{ article.filePathStem }}.jpg", "Argument" %} 

{% endfor %}

How do I get around this? I feel like I'm missing something obvious.

[pdehaan]

I'll assume you're using LiquidJS as the default .md layout engine, but this should do the trick.
Not sure how nicely LiquidJS plays w/ string+variable concatenation, so I usually opt to just pre-set the value in a variable and then pass that along (see assign tag below):

{% for article in collections.news %}
  {% comment %} This successfully reads the filePathStem variable {% endcomment %}
  "{{ article.filePathStem }}.jpg"

  {% comment %} This doesn't read the variable successfully {% endcomment %}
  {%- assign src = article.filePathStem | append: ".jpg" -%}
  {% image src, "Argument" %}
{% endfor %}

OUTPUT

"/news/five.jpg"
<img src="/news/five.jpg" alt="Argument" />

"/news/four.jpg"
<img src="/news/four.jpg" alt="Argument" />

"/news/one.jpg"
<img src="/news/one.jpg" alt="Argument" />

"/news/three.jpg"
<img src="/news/three.jpg" alt="Argument" />

"/news/two.jpg"
<img src="/news/two.jpg" alt="Argument" />

Repo: https://github.com/pdehaan/11ty-2842

[pdehaan]

In fact, if you're using Nunjucks, you can just do this:

  {# {%- set src = article.filePathStem + ".jpg" -%} #}
  {% image article.filePathStem + ".jpg", "Argument" %}

[manforowicz]

Thanks, that helps!