Closest equiv of img() shortcode using components?

Support
1

I just upgraded from 0.22 to 0.23 and I’m noticing that the shortcodes are gone in favor of Tera components, and I’m totally on board with the change!

I looked through the docs and the other posts in the forum, and I might just be using the wrong search terms, but I’m not having much luck figuring out how to do the following with components.

In my pre-0.23 code, I had an img shortcode like this to resize and display the img in one line.

{{ img(src="./book.jpg" class="x" alt="Description" w="156" h="45") }}

I saw there are a few builtin components like img and image that look VERY CLOSE to what I want, but when I go to use them I’m getting the following:

ERROR Reason: error: Argument `config` missing.

So clearly this isn’t just a drop-in replacement for the img shortcode, but… what WOULD be the closest analog to the common img() shortcode use above?

2

You need to add the config param to your component and pass it in the content (config={config}). There will be an easier way to handle it (How to handle fully global context? · Issue #996 · Keats/tera · GitHub) but not released yet.

3

Thanks for the quick response!

That makes sense, and I’ll try that.

Is there any docs on what the config option needs to be/contain? Or… how to create it? I don’t see the component docs in the site, and I’m not sure how to create the config object or what it needs to contain.

I’m skimming the templates/components/img.html file and properties like base_url is… probably the path to the original file. The only other property I’m seeing is default_language …

Oh, it’s looking like config is a page global variable. But next it’s telling me I need page… and I don’t know what that looks like either.

Is there an example of this I can use as a reference to infer how this works so as not to make noise asking what everyone else seems to know already?

4

Okay, it looks like page is also another global.

A couple other snags I hit:

  • integer parameters cannot be "-quoted or bare. They must be wrapped in {/}. E.g., w={156}.
  • the {{<img ... />}} components don’t seem to work inside Markdown links: [Text](url) and [Text][url_ref] render as [IMAGE][url_ref]. Trying to find the most elegant around this at the moment. Tips/examples welcome!

But if it helps anyone else here, here is a rough analog:

Original w/ shortcode:

{{ img(src="./book.jpg" alt="Description" w="156" h="45") }}

New with Tera component:

{{<img config={config} page={page} src="./book.jpg" alt="Description" w={156} h={45} />}}