Include working example of hugos image porcessing with netlify

[brasilikum]

Hugo has powerful image processing capabilities built in, however they are limited to a “Page Bundle” layout, where your images live in the same folder as the content that is referencing them. NetlifyCMS does not (yet?) support this layout. Instead, all images are stored in one folder under /static.

It is possible to make netlify and Hugo image processing work together by moving the image folder inside of content and making it a “headless” (non-rendered) section. Access can be provided via partials.

I got this to work after a lot of trail and error and I am not exactly sure if I am doing it the best way.

Building an example into this template could probably spare people a lot of experimentation.

[erquhart]

Agreed - can you add a description with a little more info?

[brasilikum]

Done

[easherma]

@brasilikum can you link to your approach? I'm wrestling with the same issue.

[brasilikum]

@easherma, sorry, it's not public, but here is the structure I ended up going with:

I am using the following snippet to get a specific image:

    {{ $page := . }}
    {{ with $.Site.GetPage "page" "img/index.md" }}
        {{ $imgPath := split $page.Params.images "/"}}
        {{ $img := index $imgPath 2 }}
        {{ with .Resources.GetMatch $img }}
            {{$img400 := .Fill "800x400 Center"}}
            <img src="{{ $img400.RelPermalink }}">
        {{ end }}
    {{ end }}

Images are flat under the img directory (because of netlify).

The only non image file is the index.md with the following content:

---
title: Images
headless: true
---

Hope it helps

[easherma]

Interesting! This does help, thanks. :-) On Wed, Nov 7, 2018 at 8:56 PM Georg Hartmann [email protected] wrote:

@easherma https://github.com/easherma, sorry, it's not public, but here is the structure I ended up going with: [image: screen shot 2018-11-07 at 9 51 41 pm] https://user-images.githubusercontent.com/3106990/48174817-7d219900-e2d7-11e8-8948-d906c8689272.png

I am using the following snippet to get a specific image:

{{ $page := . }}
{{ with $.Site.GetPage "page" "img/index.md" }}
    {{ $imgPath := split $page.Params.images "/"}}
    {{ $img := index $imgPath 2 }}
    {{ with .Resources.GetMatch $img }}
        {{$img400 := .Fill "800x400 Center"}}
        <img src="{{ $img400.RelPermalink }}">
    {{ end }}
{{ end }}

Images are flat under the img directory (because of netlify).

The only non image file is the index.md with the following content:

---

title: Images headless: true

Hope it helps

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/netlify-templates/one-click-hugo-cms/issues/19#issuecomment-436856018, or mute the thread https://github.com/notifications/unsubscribe-auth/AKDTT0c90SGRgYriVX-DPIAEARjXrbdzks5us51qgaJpZM4T15f1 .

[marcojakob]

Thanks. Interesting approach.

Using Hugo's image processing will be much more straight forward once NetlifyCMS allows images to be stored relative to content. See https://github.com/netlify/netlify-cms/issues/1472

Then we won't need the workaround with a separate img folder in content with a hack using a headless bundle.

[curzolapierre]

Hello, I can see that (https://github.com/netlify/netlify-cms/issues/1472) issue has been fixed now.

What is the current status of the issue here? What would be the best way to use the image processing now?

I tried to move the images to site/content/img but still, it seems that .Resources.GetMatch is not able to find them.