Get image by resource name using images.inline shortcode

support
1

I am using page bundles with a number of images under an images directory, adjacent to my index.md.

I know I need to use the images.inline shortcode with markdown. What I don’t quite get is how to inline a specific image by resource name.

Here’s my front matter:

---
title: My awesome title
date: 2019-06-27
url: /my-page-slug-here/
resources:
 - name: select-engine
   src: images/select-engine.png
   title: Select RDS Engine
---

Beyond that, I’m not sure what magic incantation inside {{< images.inline >}} ... {{< /images.inline >}} will allow me to simply reference the image resource by name.

I am able to use ByType to get the image as follows:

<img class="img-fluid" src="{{< images.inline >}}{{ $img := (index (.Page.Resources.ByType "image") 0) }}{{ ($img.Resize "800x").Permalink}}{{< /images.inline >}}"/>

However, this doesn’t allow me to specify the resource by name.

This seems way harder than it needs to be.

Thanks,
Mark

2

You could accept the resource name as a parameter to your shortcode, then use .GetMatch on whatever arg is passed in

3

Okay cool, this worked:

<img class="img-fluid" src="{{< images.inline >}}{{ $img := (.Page.Resources.GetMatch "select-engine") }}{{ ($img.Resize "800x").Permalink}}{{< /images.inline >}}"/>

Need to read up on shortcodes so I can learn how to parameterize this and make it reusable.

Thanks!

4

I’m not sure how to do it via an inline shortcode, but based on what you have, I’d use a regular shortcode something like:

{{ $name := .Get "name" }}
{{ $size := .Get "size" }}
{{ $match := printf "*%s*" $name }}
{{ $img := .Page.Resources.GetMatch $match }}
{{ $img := $img.Resize $size }}

<img 
class="img-fluid"
src="{{ $img.Permalink }}">

Then call it like:

{{< img name="select-engine" size="800x" >}}
1 Like
5

This worked perfectly! Thank you again.