Using a variable inside a function inside a shortcode

Support
1

I have this shortcode:

<div class="cover-image">
  <img src="{{ src }}"/>
  <p class="desc">
    {{ body }}
  </p>
</div>

I am calling the shortcode like this:

{% cover(src="/posts/justice.jpg") %}
No light can compare with the light of justice.
{% end %}

I want to include image processing in it, so that I can automatically process images passed in, so something like this:

<div class="cover-image">
  {% set image = resize_image(path=config.base_url ~ src, width=1200, height=700, op="fill", format="webp") %}
  <img src="{{ image }}"/>
  <p class="desc">
    {{ body }}
  </p>
</div>

Now I error with:

Error: Reason: Failed to render cover shortcode
Error: Reason: Failed to render 'shortcodes/cover.html'
Error: Reason: Function call 'resize_image' failed
Error: Reason: `resize_image`: Cannot find file: http://127.0.0.1:1111/posts/justice.jpg

However when I click the file, it loads right fine in the browser. Any idea how I can do this?

2

2 issues with using config.base_url ~ src as path for resize_image:

  1. Shortcode happen before the image is copied to the public directory so it won’t be there
  2. resize_image expect a filepath and not a URL anyway so you need to point the shortcode to the on disk path
1 Like
3

It wasn’t working either with the src variable alone which held: “/posts/justice.jpg”, could you show me a working example?

With just src, the images do get processed, but they appear as [object] in the html. image.path did not work either. which raises another question, how would I log and debug what the image object is?

[I overlooked the docks showing image.url] Thanks for the help.

So the working code is:

<div class="cover-image">
  {% set image = resize_image(path=src, width=1200, height=700, op="fill", format="webp") %}
  <img src="{{ image.url }}"/>
  <p class="desc">
    {{ body }}
  </p>
</div>