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

It is already in the docs and is the most common Go template Gotcha; I’m not repeating it again in my docs …

1 Like

But note that the Image resource will also probably get its .Params eventually … but not tonight :slight_smile:

1 Like

Hey !

I had time to test the Resources, and it’s really cool and easy to use.
I managed to replace the use of readDir to build my gallery of photos, and it’s much much cleaner :wink:

Resizing worked fine too, I tried Fit and Resize and it did the job.

However I ran in a minor issue when applying this to my site : I’m using readFile on a very small image to include this image in my HTML (via base64). Previously the path was built manually, but with the resource I had trouble building the path properly.
The issue is, readFile expects a path from the root site folder, but with resources we seem to only have .AbsSourceFilename, which is the full absolute system path.
I found a workaround by using the .Permalink and adding the resources/_gen/images/, but it’s not really clean, in case the permalink is different than the system path.

I do not expect anything for the coming release of course, but it may be nice in the future to have a proper way to get the resource path from the root site folder (or change readFile function, I don’t know).
Actually after I had a look at the code, I may be able to do a pull request, but I have no experience in Go so it may take some time :stuck_out_tongue:

I’ll have a look into it anyhow :smiley:

A great release is coming, thank you !

1 Like

This is exactly what I’m also doing right now.

This will be a great release indeed. :star_struck:

1 Like

@carab what is described in this thread is not meant to use in combination with readFile, readDir etc. Take that discussion in another thread.

Thanks very much for this. It all seems to be working for me.

I could easily restructure /content/post/2017-05-01-whatever.md to /content/post/2017-05-01-whatever/index.md and get it to pick up whatever image in that folder. Simple markdown syntax just picks up the name, which makes it quite easy to build a page. A lot easier to explain to someone (for some reason people just can’t get paths… ).

What I am trying to do next, is to figure out how I can make a figure shortcode, and resize one image, inside an index.md markdown file.

If I want to resize one image, I need a shortcode to resize or manipulate the image, correct?

~> hugo env
Hugo Static Site Generator v0.32-DEV-245212A5 darwin/amd64 BuildDate: 2017-12-31T10:19:52+09:00
GOOS="darwin"
GOARCH="amd64"
GOVERSION="go1.9.2"

No. You don’t need any shortcode to wrap a .Resources image into a figure element or when you need to resize it etc. You simply do something like this:

 {{ range .Resources.ByType "image" }}
  {{ $scaled := .Resize "560x" }}
<figure><img class="thumb" src="{{ $scaled.Permalink }}" alt="{{ with $.Page.Params.title }}{{ . }}{{ end }}"></figure>
{{ end }}

Thanks @alexandros. I assumed that would work in a single.html but, I want to render the image wherever I need it within text. I tried pasting your example into my index.md and hugo’s just rendering it literally. I have a bunch of markdown text, followed by that bit pasted in, followed by more markdown. It renders like this screenshot:



The above code block was meant for single.html indeed.

But if you need to have a scaled .Resources img in between text etc.

Why don’t you just copy the generated image from/resources/_gen/ into your bundle folder and then simply call it with markdown like: ![](filename.jpg) in your index.md

I think that it will render as you need it. Right?

EDIT
No it doesn’t. You are right @RickCogley

To generate it so it appears in resources, I assume you need to run that code somewhere, so, to me it seems easier to just write the shortcode.

Looks like it. But I haven’t tested how to get a generated image through a shortcode yet.

Open up a new thread or something for whatever you are talking about.