If you can compile Hugo: Help Testing Page resources, image processing etc

Announcements
1

You may have noticed the recent commits related to page resources, image processing etc.

I have started some documentation of the different parts here:

https://next–gohugoio.netlify.com/about/new-in-032/

I would really appreciate that you, if you know how to compile Hugo from source, could take it for a spin. Windows users esp. welcome.

It would be cool if you could:

  1. Test your own site and verify that it works.
  2. Test out the new features described above (maybe clone the referenced test site and run that).

And note that I’m well beyond taking change requests/improvement suggestions on this. I just want to know if it works.

Thanks!

3 Likes
3

Have tested 0.32-DEV on my site with no changes, build runs fine, no obvious issues in the build output. Resources seem to work fine too, tested image resizing with no issues, multiple resources for a single page looks fine too.

This was done on both Linux (Arch) and Windows 10 (will latest updates applied)

Awesome work! :tada: Can’t wait for the release!

I can run more specific tests of this if needed

(Not sure how I feel about .Resources.GetByPrefix, as most places drop the Get, so .Resources.ByPrefix, just thought i’d raise it)

1 Like
4

Yea, naming is hard. I thought long and hard about that one too, but I have used in other placed to mark the distinction between one (Get) and potentially many.

I really appreciate you testing it on OSes I currently do not run (I have a bigger SSD for my Mac in order so I can have more virtual OSes on disk at the same time; then I can maybe improve my own testing).

1 Like
5

Hello there,

First, thank you for this promising release !

I’ve just tested it on my site with MacOS High Sierra, and everything seems to work as it were before.
I’ll try the new resource and image manipulation once I have more time and I’ll come back to you.

By the way, I was wondering if it were possible to get the resources from a specific folder ?

Thanks again for your work !

1 Like
6

Only if they are “part of a bundle”, and then indirectly via the “page container”, .e.g. (.Site.GetPage "page" "some/path").Resources.

It is not (currently) possible to create resources from “ad hoc folders”. I’m not sure I ever want to open that worm hole.

7

To add a little to that: See https://github.com/bep/hugotest/blob/master/layouts/_default/list.html#L5

This is, I guess, a common use for this in the list templates: List all pages with some kind of thumbnail as an illustration. You will need to come up with some kind of naming standard for this and use .Resources.GetByPrefix "main-image" or something, or pick the first or whatever.

You can see that it is actually working here:

http://hugotest.bep.is/section3/

8

Sorry I wasn’t clear in my question actually : what if I need to get the image resources from a specific folder of a bundle ?

For example I may have this organization in the future:

  • my-bundle/
    • index.md
    • photos/
      • 01.jpg
      • 02.jpg
    • images/
      • something-which-is-not-a-photo.jpg

Is there a way to only get the resources included in photos ?

I’m sorry if this question does not belong here. If it pollutes the chat I’ll repost somewhere else.
Thank you.

9

You would currently need to use .Resources.ByType "image" and filter them with some other means (where?). This is possibly related to the GetByPrefix discussion above (which with .GetByPrefix "something" in your example will return that one photo), but I will not add any more API to this until I see how people use this.

10

Alright I understand !
Thank you for explaining this, I’ll keep you in touch once I had time to test the image resizing.

11

@bep So I went the extra mile to compile Hugo from source on Ubuntu Gnome 16.04. (had to remove the Hugo snap, update Go etc)

My 4 Hugo projects are served as they used to, so I haven’t encountered any breaking bugs with:
Hugo Static Site Generator v0.32-DEV linux/amd64 BuildDate: 2017-12-29T13:31:34+02:00

I’ll give you further feedback on the new features later today.

Thank you so much for your hard work!

1 Like
12

Good to hear. I have tested a fair amount of sites myself, so if nothing substantial pops up I’m planning on a New Year’s Eve release … I notice my main commit on all of this has a commit date back in July (plenty rebase going on there), so I’ll have to get this out before 2018 …

2 Likes
13

Ok. I just tested .Resources and it is AMAZING!.

And I’m very happy because now I can move away from Hugo shortcodes to pure markdown syntax images and be able to wrap them in whatever html I need with something like:

{{ range .Resources.ByType "image" }}
<figure><img src="{{ .Permalink }}"></figure>
{{ end }}

It’s really cool that a simple markdown image within a content file like ![](after-as-before-1.jpg) is now recognized and served by Hugo without resorting to hacks.

So for this feature alone I am very happy! And thank you @bep :four_leaf_clover:

Hugo 0.32 makes things much easier. Now even a non dev can easily update a Hugo site with an editor like Atom. :tada:

PS.1. I haven’t tested Image Processing yet and I have to go now. But I plan to check this out tomorrow and try to see how I can construct an <img> with the srcset attribute using the new features.

PS.2 Your hugo-test site was really indispensable for me to understand how .Resources work. Make sure to mention it when Hugo 0.32 is released.

2 Likes
14

I just discovered something interesting.

With the following content organization:

└── content/
    └── blog/
         └── 2017/
             └── after-as-before/
                  └── index.md
                  └── 1.jpg

And a permalinks setting of blog = "/:year/:month/:filename/"

The :filename is picked up from the bundle folder name.

And the final URL will be /2017/12/after-as-before/

Very cool!

1 Like
15

Yes, the “index” name would not make much sense.

1 Like
16

Ok. I just tested Image Processing.

Resizing 12 images that were 1280px wide, was done in the blink of an eye!

No need to waste anymore time fiddling with external scripts (image magick etc). :tada:
No need to set front matter parameters for the thumbnails of list pages. :tada:
No need to copy paste images into the appropriate folders. :tada:

I do have a question though.

Hugo does not regenerate already processed images under /resources/_gen/. Only if hugo --gc is used will Hugo waste time regenerating. Correct?

Again thank you @bep ! Great stuff! :four_leaf_clover:

P.S. I haven’t tried constructing an img with srcset yet, but now I think that I know how to go about it.

17

Correct. Resizing 12 images is pretty fast; doing this for thousands will still feel slow, so I have spent a considerable amount of brain power to cache as intelligently as possible.

1 Like
18

No, the --gc will only remove unused images. It is a cleaning tool. If you, for some reason, want to regenerate, you will need to delete the directory yourself.

1 Like
19

Ok. Got it. This is great! :tada::tada::tada:

20

@bep I just found out that to call a bundled content page’s .Title from within the .Resources range I had to call it like we do from within a shortcode :

{{ range .Resources.ByType "image" }}
<figure><img src="{{ .Permalink }}" alt="{{ with $.Page.Params.title }}{{ . }}{{ end }}"></figure>
{{ end }}

Calling the title with alt="{{ .Title }}" fails with the following console error:

ERROR 2017/12/30 20:21:01 in .Render: Failed to execute template...etc.

If you think it will be helpful to others, you can include the above code block as an example in the Docs.