# Image processing inside content using shortcode

**URL:** <https://discourse.gohugo.io/t/image-processing-inside-content-using-shortcode/15657>\
**Category:** support\
**Created:** [December 4, 2018, 7:31am UTC](https://discourse.gohugo.io/t/image-processing-inside-content-using-shortcode/15657 "2018-12-04T07:31:41Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Yudy\_Ananda](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/yudy_ananda/32/5664_2.png) [@Yudy\_Ananda](https://discourse.gohugo.io/u/Yudy_Ananda)\
**Post date:** [December 4, 2018, 7:31am UTC](https://discourse.gohugo.io/t/image-processing-inside-content-using-shortcode/15657/1 "2018-12-04T07:31:41Z")

</div>

I’m using [headless bundles as image resource](https://forestry.io/blog/how-to-use-hugo-s-image-processing-with-forestry/), in this case is `content/uploads`

what I need is to make Hugo processing the image inside the content by using shortcodes. There is 2 scenariom the first one is get the image from the front matter param and the other one is directly from the value inside the shortcode it self

so far i manage to make the first scenario working, here’s my workaround

shortcodes/recipe.html

```
{{ $hero := $.Page.Params.recipe.hero }}
<div class="recipe-hero">
		{{ with $hero }}
            {{ $imageResource := ($.Site.GetPage "/uploads").Resources.GetMatch (strings.TrimPrefix "/uploads/" . ) }}
            {{ $desktop := $imageResource.Fill "690x300 q50 Center" }}
               <img src="{{ $desktop.RelPermalink }}">
        {{ end }}
	</div>

```

then call the image using `{{< recipe >}}`

the problem is i’m stuck in the second scenario where i have to define the image src inside my shortcode eg `{{< image src="takoyaki.jpg" >}}` my goal is to have responsive image using src-set

I’m using generic version from Hugo doc [shortcode template](https://gohugo.io/templates/shortcode-templates/#single-named-example-image)

shortcodes/image.html

```
<figure class="image-caption">
        <img data-sizes="auto" class="lazyload"
        data-srcset="/uploads/{{ .Get "src" }}" />
    <figcaption>{{ if isset .Params "title" }}
        <h5>{{ .Get "title" }}</h5>{{ end }}
    </figcaption>
</figure>

```

the missing link is how to define `$imageResource` from `.Get "src"`?

```auto
{{ $imageResource := ($.Site.GetPage "/uploads").Resources.GetMatch (strings.TrimPrefix "/uploads/" . ) }}
{{ $desktop := $imageResource.Fill "1200x800 Center" }}
{{ $tablet := $imageResource.Fill "726x402 Center" }}
{{ $mobile := $imageResource.Fill "458x254 Center" }}

<figure class="image-caption">
<img data-sizes="auto" class="lazyload"
     data-srcset={{ ? }} 458w,
                 {{ ? }} 762w,
                 {{ ? }} 1200w />
<figcaption>{{ if isset .Params "title" }}
        <h5>{{ .Get "title" }}</h5>{{ end }}
    </figcaption>
</figure>

```

thank you

---

<div class="post-metadata">

**Author:** ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)\
**Post date:** [December 4, 2018, 8:45am UTC](https://discourse.gohugo.io/t/image-processing-inside-content-using-shortcode/15657/2 "2018-12-04T08:45:22Z")

</div>

> **[.Get](https://gohugo.io/functions/get/)**
>
> Accesses positional and ordered parameters in shortcode declaration.

You can use the parameter position (from zero up) or a named parameter.

`{{< imag "param" >}}`

```auto
$imageResource := (.Get 0).Resources.GetMatch 

```

If you want to use named params call it this way

`{{< imag src="param" >}}`

```auto
$imageResource := (.Get "src").Resources.GetMatch 

```

---

<div class="post-metadata">

**Author:** ![Yudy\_Ananda](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/yudy_ananda/32/5664_2.png) [@Yudy\_Ananda](https://discourse.gohugo.io/u/Yudy_Ananda)\
**Post date:** [December 4, 2018, 11:08am UTC](https://discourse.gohugo.io/t/image-processing-inside-content-using-shortcode/15657/3 "2018-12-04T11:08:31Z")

</div>

> [@ju52](#):
>
> Get

I tried this

```Go
<figure class="image-caption">
    {{ with .Get "link"}}<a href="{{.}}">{{ end }}
        <img data-sizes="auto" class="lazyload" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }}
         <!-- image processsing -->
        {{ $imageResource := (.Get "src").Resources.GetMatch (strings.TrimPrefix "/uploads/" . ) }} 
        {{ $desktop := $imageResource.Fill "200x200 Center" }}
        data-srcset="{{ $desktop.RelPermalink }}" />
    {{ if .Get "link"}}</a>{{ end }}
    {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
    <figcaption>{{ if isset .Params "title" }}
        <h5>{{ .Get "title" }}</h5>{{ end }}
        {{ if or (.Get "caption") (.Get "attr")}}<p>
        {{ .Get "caption" }}
        {{ with .Get "attrlink"}}<a href="{{.}}"> {{ end }}
            {{ .Get "attr" }}
        {{ if .Get "attrlink"}}</a> {{ end }}
        </p> {{ end }}
    </figcaption>
    {{ end }}
</figure>

```

then call the image inside content with `{{< image src="takoyaki.jpg" title="Takoyaki" >}}` and the errors still the same

```auto
ERROR 2018/12/04 17:58:03 "E:\YUDY\WEB PROJECT\TIAVI\sites\newdev\content\culinary\recipe\ini-loh-cara-membuat-takoyaki-yang-lezat-dan-praktis\index.md:64:1": failed to render shortcode "image": "E:\YUDY\WEB PROJECT\TIAVI\sites\newdev\themes\gogirl\layouts\shortcodes\image.html:4:35": execute of template failed: template: shortcodes/image.html:4:35: executing "shortcodes/image.html" at <"src">: can't evaluate field Resources in type string

```

---

<div class="post-metadata">

**Author:** ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)\
**Post date:** [December 4, 2018, 11:25am UTC](https://discourse.gohugo.io/t/image-processing-inside-content-using-shortcode/15657/4 "2018-12-04T11:25:10Z")

</div>

> [@Yudy\_Ananda](#):
>
> (.Get “src”)

This gives you a string! .Resources is a Page function.  
Build a string for GetMatch with your parameter

```
{{ printf "/uploads/%s" (.Get "src) }}
.. .Resources.GetMatch $file ...

```

(this is quick and dirty)

Sorry the error was in my text above

---

<div class="post-metadata">

**Author:** ![Yudy\_Ananda](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/yudy_ananda/32/5664_2.png) [@Yudy\_Ananda](https://discourse.gohugo.io/u/Yudy_Ananda)\
**Post date:** [December 4, 2018, 11:53am UTC](https://discourse.gohugo.io/t/image-processing-inside-content-using-shortcode/15657/5 "2018-12-04T11:53:09Z")

</div>

Ok it seems more difficult than I thought 😅

if you don’t mind can you give me more detail code, let me simplified the shortcode

```auto
<figure class="image-caption">
    {{ with .Get "link"}}<a href="{{.}}">{{ end }}
        <img data-sizes="auto" class="lazyload"
        data-srcset="/uploads/{{ .Get "src" }}" />
    <figcaption>{{ if isset .Params "title" }}
        <h5>{{ .Get "title" }}</h5>{{ end }}
    </figcaption>
</figure>

```

so how t implemented `{{ printf "/uploads/%s" (.Get "src) }} .. .Resources.GetMatch $file ...`

thanks for your patience

---

<div class="post-metadata">

**Author:** ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)\
**Post date:** [December 4, 2018, 1:40pm UTC](https://discourse.gohugo.io/t/image-processing-inside-content-using-shortcode/15657/6 "2018-12-04T13:40:57Z")

</div>

looks good, little chages

```
<figure class="image-caption">
    {{ with .Get "link"}}<a href="{{.}}">{{ end }}
        <img data-sizes="auto" class="lazyload"
        src="/uploads/{{ .Get "src" }}" />
	{{with .Get "title" }}<figcaption><h5>{{.}}</h5></figcaption>{{ end }}
</figure>

```

I tryed this with this shortcode picture.html

```
{{< picture src="fl1.png" link="/" title="title">}}

```

You have to put the pictures to **/static/uploads**!

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [December 4, 2018, 2:01pm UTC](https://discourse.gohugo.io/t/image-processing-inside-content-using-shortcode/15657/7 "2018-12-04T14:01:04Z")

</div>

> [@ju52](#):
>
> You have to put the pictures to **/static/uploads**!

This topic is about **image processing** which does not work from /static.

---

<div class="post-metadata">

**Author:** ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)\
**Post date:** [December 4, 2018, 5:32pm UTC](https://discourse.gohugo.io/t/image-processing-inside-content-using-shortcode/15657/8 "2018-12-04T17:32:12Z")

</div>

right, I only tryed to get the last shortcode working

---

<div class="post-metadata">

**Author:** ![Yudy\_Ananda](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/yudy_ananda/32/5664_2.png) [@Yudy\_Ananda](https://discourse.gohugo.io/u/Yudy_Ananda)\
**Post date:** [December 4, 2018, 6:48pm UTC](https://discourse.gohugo.io/t/image-processing-inside-content-using-shortcode/15657/9 "2018-12-04T18:48:40Z")

</div>

Sorry guys please excuse any mistakes, just to make a little bit more clear I edit the question

> [@Yudy\_Ananda](#):
>
> I’m using [headless bundles as image resource](https://forestry.io/blog/how-to-use-hugo-s-image-processing-with-forestry/), in this case is `content/uploads`…

---

<div class="post-metadata">

**Author:** ![Yudy\_Ananda](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/yudy_ananda/32/5664_2.png) [@Yudy\_Ananda](https://discourse.gohugo.io/u/Yudy_Ananda)\
**Post date:** [December 4, 2018, 7:04pm UTC](https://discourse.gohugo.io/t/image-processing-inside-content-using-shortcode/15657/10 "2018-12-04T19:04:46Z")

</div>

another experiment borrow from [Image processing](https://discourse.gohugo.io/t/image-processing/15501/3?u=yudy_ananda)

```auto
<figure class="image-caption">
        <img data-sizes="auto" class="lazyload"
        {{ $imageResource := .Page.Resources.GetMatch (printf "*/uploads/%s*" (.Get "src")) }}
        {{ $mobile := $imageResource.Fill "458x254 Center" }} <!-- i assume this part is the source of the error -->
        data-srcset="{{ .Get "src" }}" />
    <figcaption>{{ if isset .Params "title" }}
        <h5>{{ .Get "title" }}</h5>{{ end }}
    </figcaption>
</figure>

```

output error

```auto
"E:\YUDY\WEB PROJECT\TIAVI\sites\newdev\content\culinary\recipe\ini-loh-cara-membuat-takoyaki-yang-lezat-dan-praktis\index.md:64:1": failed to render shortcode "image": "E:\YUDY\WEB PROJECT\TIAVI\sites\newdev\themes\gogirl\layouts\shortcodes\image.html:5:36": execute of template failed: template: shortcodes/image.html:5:36: executing "shortcodes/image.html" at <$imageResource.Fill>: can't evaluate field Fill in type resource.Resource

```

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [December 4, 2018, 8:52pm UTC](https://discourse.gohugo.io/t/image-processing-inside-content-using-shortcode/15657/11 "2018-12-04T20:52:57Z")

</div>

Hey, so:

- You were never setting the `src` attribute for your `<img>`
- The Forestry article you linked is cool, but they have one thing wrong. In order for `content/uploads/_index.md` to be headless, it must be a leaf bundle. So change `_index.md` to `index.md`
- I’m also not sure how the `.GetMatch` example they gave is working

With all that said, give content structure like this:

```nohighlight
content/
└── uploads
    ├── index.md
    └── some-img.png

```

And shortcode usage like this:

```nohighlight
{{< recipe src="some-img" title="some title" >}}

```

Then this definition should work:

```nohighlight
{{ $src := .Get "src" }}
{{ $title := .Get "title" }}

{{ $uploads := $.Site.GetPage "section" "uploads" }}
{{ $match := printf "*%s*" $src }}

{{ $imageResource := $uploads.Resources.GetMatch $match }}
{{ $mobile := $imageResource.Fill "458x254 Center" }}

<figure class="image-caption">
  <img 
  data-sizes="auto" 
  class="lazyload" 
  src="{{ $mobile.RelPermalink }}" 
  data-srcset="{{ $mobile }}" />
  
  <figcaption>
    {{ if isset .Params "title" }}
      <h5>{{ $title }}</h5>
    {{ end }}
  </figcaption>
</figure>

```

---

<div class="post-metadata">

**Author:** ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)\
**Post date:** [December 4, 2018, 8:59pm UTC](https://discourse.gohugo.io/t/image-processing-inside-content-using-shortcode/15657/12 "2018-12-04T20:59:30Z")

</div>

Looks similar to my solution - the younger are faster 😉

Please read

> **[Page Bundles](https://gohugo.io/content-management/page-bundles/#readout)**
>
> Content organization using Page Bundles

---

<div class="post-metadata">

**Author:** ![Yudy\_Ananda](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/yudy_ananda/32/5664_2.png) [@Yudy\_Ananda](https://discourse.gohugo.io/u/Yudy_Ananda)\
**Post date:** [December 5, 2018, 5:14am UTC](https://discourse.gohugo.io/t/image-processing-inside-content-using-shortcode/15657/13 "2018-12-05T05:14:07Z")

</div>

> [@zwbetz](#):
>
> The Forestry article you linked is cool, but they have one thing wrong

You are right somehow I already change it to `index.md`

> [@zwbetz](#):
>
> You were never setting the `src` attribute for your `<img>`

haha silly me, anyway I make a little change and this is my final shortcode

```auto
{{ $src := .Get "data-src" }}
{{ $title := .Get "title" }}
{{ $caption := .Get "caption" }}
{{ $link := .Get "link" }}
{{ $alt := .Get "alt" }}
{{ $rel := .Get "rel" }}
{{ $target := .Get "target" }}

{{ $uploads := $.Site.GetPage "section" "uploads" }}
{{ $match := printf "*%s*" $src }}

{{ $imageResource := $uploads.Resources.GetMatch $match }}
{{ $large := $imageResource.Resize "858x q50" }}
{{ $medium := $imageResource.Resize "720x q50" }}
{{ $small := $imageResource.Resize "520x q50" }}
{{ $extraSmall := $imageResource.Resize "320x q50" }}

<figure class="image-caption">
    {{ with $link }}<a href="{{.}}" rel="{{ $rel }}" target="{{ $target }}">{{ end }}
    <img
        {{ if $alt }}
            alt="{{ $alt }}"
        {{ end }} 
        data-sizes="auto" 
        class="lazyload" 
        data-src="{{ $large.RelPermalink }}" 
        data-srcset="
        {{ $large.RelPermalink }} 800w,
        {{ $medium.RelPermalink }} 700w,
        {{ $small.RelPermalink }} 500w,
        {{ $extraSmall.RelPermalink }} 400w,       
    ">
    {{ if $link }}</a>{{ end }}
  
  <figcaption>
    {{ if $caption }}
        {{ $caption }}
    {{ end }}
  </figcaption>
</figure>

```

thanks to all of you guys 👍👍👍👍