Keep images & content together

dbdevtop · January 25, 2018, 3:35pm

I know this is a real old topic. But after 2 days searching as a Hugo-Rookie I wasn’t able to show images from the same folder as the md-file.

Could you recommend a shortcode or another way to accomplish this?

kaushalmodi · January 25, 2018, 3:37pm

Check out Page Bundles feature in Hugo 0.32 and newer. Here are notes from the release announcement, but official documentation for that is in works right now.

dbdevtop · January 25, 2018, 6:47pm

Thank you for the input. The HUGO community gives newbies a warm fuzzy feeling, that everything will become alright…

Maybe I need to learn more about the mechanism, but by now I’m stuck on how to implement the Page Resources in a single page (see ref 4 in the picture).

Ref 1: Content folder with mix of .md and .jpg files
Ref 2: Front matter copied from http://hugotest.bep.is/resourcemeta/bundle-with-resource-meta-toml/
Ref 3: Result on server
Ref 4: (How to show .jpg image from ref 1?)

Another push in the right direction would be appreciated…

kaushalmodi · January 25, 2018, 8:19pm

I have a test/sandbox site for Hugo where I experimented with the resources parameters…

The example bundle name is resources-order-a.

resources-order-a bundle content
That Page Bundle’s index.md
single.html layout from my sandbox site’s bare_min theme — Search for {{ with .Resources }} in there.
… and here’s the Hugo generated output

Hope this helps.

Update

Actually, also look at the source layout single.html for that hugotest.bep.is resources meta-data example.

bep · January 25, 2018, 8:49pm

The layout for the right link is here:

github.com

bep/hugotest/blob/master/layouts/_default/bundle-resource-meta.html

{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ highlight (readFile .Filename) "bash" ""  }}
{{ range .Resources.ByType "image" }}
{{ $scaled := .Resize "200x" }}
<h3>{{ $scaled.Title }}</h3>
<img src="{{ $scaled.RelPermalink }}" alt="{{ $scaled.Title }}">
<h4>Metadata</h4>
<ul>
	<li>Title: {{ $scaled.Title }}</li>
	<li>Name: {{ $scaled.Name }}</li>
	{{ range $k, $v := $scaled.Params}}
	<li>{{ $k | title }}: {{ $v }}</li>
	{{ end }}
</ul>
{{ end }}
{{ end }}

Note that output on that test site is Hugo 0.35 (is coming to the interweb Monday), which is slightly different in the params metadata merging (see the byline).

kaushalmodi · January 25, 2018, 8:54pm

Ah yes, missed the layout set in the front-matter. Thanks!

dbdevtop · January 26, 2018, 12:40pm

Thank you for all those references.

The resource bundles are a huge benefit, but the examples give “list of resources” whereas I need only one specific image here and there in the md file.

For an inexperienced HUGO user it is hard to extract the relevant code from the examples to just insert one single image.

Is my setup ok? -> Hugo v34, theme:docdock, content folder see green frame, md file front matter see purple area, layout see yellow area.

If it is ok, then what would be the code to insert the image “overview_i001.jpg” between the yadda-lines?

Thanks again for your efforts…

kaushalmodi · January 26, 2018, 12:46pm

Using the Resources list is needed if you want to use the Image Processing feature. But if you want to simply insert the image, you can do it the old style:

{{<figure src="images/overview_i001.jpg">}}

Note the lack of “/” before images/...

dbdevtop · January 26, 2018, 1:08pm

Thank you!
Since src=“images/…jpg” didn’t work I fiddled some relativity and found that src="…/images/…jpg" did it.

Now I have to check if it works online too…

kaushalmodi · January 26, 2018, 1:11pm

Ah of course… I misread your folder organization… basically you need to get the correct relative path.

kaushalmodi · January 26, 2018, 1:22pm

I just noticed that your image/ folder is not inside any bundle. A bundle is simply a style of organization where you folder contains a index.md or _index.md. In your case, the images are not in any folder. So the Resources based image fetching and manipulation wouldn’t even work… so using figure would be the only way to go.

If you ever want to use Resources for images, make sure it lives in the same directory as the index.md or _index.md.

dbdevtop · January 26, 2018, 1:29pm

Yes. I will try with the bundle concept again…

kaushalmodi · January 26, 2018, 1:38pm

If you don’t want to move the images into the bundle directory, you can even simply symlink it (this would work or not, depending on your OS… I have tested only on a GNU/Linux system) from inside the bundle directory.

rcarmo · March 24, 2018, 6:59pm

I’ve been trying to build a section listing that can render the images from a set of pages, and coming up short since whenever I use .Content the image URLs are wrong (I get image.jpg instead of section/YY/MM/DD/image.jpg).

Any way to work around that?

cdupont · April 12, 2018, 5:03pm

Hi guys,
how to make this work with both Hugo and Github?
I have my documentation in markdown with images in the same folder. I would like to render it both with Hugo and Github…
I use Hugo V0.38 with bundles.
If I understood, I need to add some code in the markdown, such as:

But this won’t work with Github.

alexandros · April 12, 2018, 5:10pm

This has been deprecated. Use .GetMatch. See the Docs for more info.

Also please don’t cross post here and on Github. The Github repo issues serve as the bug tracker. This forum is for support.

cdupont · April 12, 2018, 5:18pm

@alexandros OK thanks and understood for the issue on Github.

But my question is, how do you keep compatibility with github when using code like GetMatch?
I was hoping to be able to reference my images with relative paths in markdown:

![alt text](myimage.jpg)

alexandros · April 12, 2018, 6:38pm

Page Bundles is not the same as plain Markdown syntax images.

There are 2 ways of going about it.

The shortcode way and the template way to call .Resources images.

The template way is not ideal for many images as it’s not very flexible.

The shortcode way is the most flexible and the one that is used more often and documented.

However both of these ways don’t work with markdown editors for image previews. And I suppose that this is what you mean by GitHub compatibility.

If you use plain markdown image syntax in your content Hugo will not find them if they’re not called with the above methods.

There are a couple of things you could do here but they might cost you in the long term if you have a large site.

See my hack over here: Add a class to images

You can modify it to include a .Resources shortcode within the alt attribute of a markdown image.

Like this: ![{{% class %}}](1.jpg)

And then perform a replaceRE to remove everything between the parentheses from .Content so that it’s not rendered when your Hugo site is generated.

It’s a bit of a sneaky and convoluted way of going about it but it would give you what you want. Markdown image previews and access to Hugo’s .Resources and image processing.

Now that was a long post…

cdupont · April 12, 2018, 8:28pm

Thanks a lot.
What I don’t understand is that the HTML code generated by Hugo seems to be compatible.
For example with these files:

content/posts/mypost.md
content/posts/images/myimage.jpg

Markdown:

![alt text](images/myimage.jpg)

This generates:

<img src="images/myimage.jpg" alt="alt text" />

The image is correctly served from mywebsite.com/posts/images/myimage.jpg

But the webpage doesn’t render the picture. Why?

kaushalmodi · April 12, 2018, 8:30pm

It’s difficult to tell without looking at your site source.

Topic		Replies	Views
Image path support	14	59181	November 26, 2019
Images alongside content support	2	946	November 27, 2019
Article compatibility with Github	11	611	May 16, 2018
Discussion: Content Organization Best Practice support	11	7373	March 4, 2018
File-Based CMS and Hugo as Static Site Generator feature	11	8437	January 13, 2016

Keep images & content together

Related Topics