Do I Have To Convert to Bundles to Process Images

support
1

Hey there!

I started using Hugo for my blog when Page Bundles weren’t quite mature. The idea seemed the most logical, but as far as I remember there were some issues with accessing images. I think one of them was the lack of support by NetlifyCMS. As a result, I ended up using what I believe is the classic structure.

- content
-- blog 
--- post-1-title.md
--- post-2-title.md

While all the images for posts are stored in static/images.

I’ve decided to put small thumbnail images in post-list view to make it more visual (so it’s inside a range). Since these images are large, I wanted to process and resize them first.

I’ve read through the docs and forum threads and it seems to me that I can’t actually get images as a resource and run processing on them unless I remake all my content into bundles?

Can’t say I have hundreds of posts, but it’d still be a lot of work, and I don’t really need bundles for anything else.

So here are my two questions:

  1. Do you know if DecapCMS actually supports them? I’m not sure.
  2. Is there any alternative to this?
1 Like
2

The short answer is no.

There are 2 ways to load an image that can be processed:

  • In bundles (.Resources.GetMatch "foo.jpg)
  • Or in the global assets folder (you can mount any folder into the virtual assets folder), and load the images with resources.GetMatch "foo.jpg" etc.
3 Likes
3

It seems the latter option would actually allow me to avoid rebuilding anything as bundles?

I wasn’t sure if I can refer to global resources without the full URL scheme based on the documentation. If I can just mount the images folder into assets, and then still resource.GetMatch the file mentioned in the front matter, that would be enough.

4

That’s correct.

5

Have been trying to make it work but still couldn’t.

I’ve added this in my config.toml

[module]
[[module.mounts]]
  source = 'images'
  target = 'assets'

Now I’m trying to get the resource for the image, but the result is just ‘nil’. The ‘with’ structure extracts the image from the front matter correctly, I’ve checked. Also, resources.GetRemote does actually retrieve the image (I used it with absURL), but for some reason, even if I build the link to it manually, it doesn’t work (when I checked the ‘/public’ I don’t actually see that image in the ‘/images’ folder for some reason).

{{ range after 1 .Paginator.Pages}}
             {{ with .Params.image }}         
                      {{ $image := resources.GetMatch ( . ) }}
                      {{ print $image }}                 
             {{ end }}
{{ end }}
6

What is the full path to your images directory?

7

What is the full path to your images directory?

static/images

Based on the examples in the documentation I though that you don’t need to include “static/”. But I don’t think it works with it as well.

8

Just mount static to assets, and remember to mount the default assets directory.

[[module.mounts]]
source = 'assets'
target = 'assets'

[[module.mounts]]
source = 'static'
target = 'assets'
1 Like
9

That was the problem, didn’t realize I needed to do this as well. Thank you!

So, if anyone else had the same problem, you don’t need to rebuild your blog in bundles.

1 Like