[SOLVED] Adding image to every post

support
1

I am trying to add image to every post that would appear on the home page. I am using the hyde-hyde theme.

I have been trying to follow these articles:


For example, the home page lists let’s say 10 articles, and for all of them there would be some relevant image that I want to add via my markdown file. So, the home page would have image followed by the permalink of the article, and the description as usual.

I tried adding this to the index.html:
<img src="{{ .Resources.ByType "image" }}" />

And I tried the following combinations in my MD file:

image: "/images/book.jpg"
thumbnail: "/images/book.jpg"
image: "/book.jpg"
thumbnail: "/book.jpg"

None of them worked. My images are located under static in images/book.jpg

Since I am fairly new to Hugo and Golang itself if it matters, I am wondering how to go about on what I want to achieve. I cannot seem to get my head around this.

1 Like
2

That theme appears to populate its top page via this template:

You should copy the index file to the equivalent location in your project (i.e. /layouts/index.html) to override, then edit the file to add your image, pulling from your page params within the paginator.

Look into using with so that you are not applying the conditional to pages with no image yet.

Also, note that /static/images/book.jpg in your project is the equivalent of http://mysite.com/images/book.jpg.

3

Hey Rick,

This is what I have done.

I added the code just above the <span class="item__title--big">

And yes, I am making the changes in the index file and the book.jpg indeed points to: http://mysite.com/images/book.jpg

Currently, the page looks like this:

09
26sad.09.png869×636 37.3 KB

When I do this:
<img src = "{{ with .Resources.ByType "image" }} {{ end }}" >

I get nothing!

4

Looks like the images are broken, but it’s hard to say what’s happening without source. Try something simple first, and reference the url path in frontmatter, pulling the image from static.

Note that in frontmatter, if you have multiple entries like you showed:

image: "/images/book.jpg"
thumbnail: "/images/book.jpg"
image: "/book.jpg"
thumbnail: "/book.jpg"

… I’m not sure what Hugo will pick up, the first? Last? None?

If you are using .Resources.ByType this normally looks in the bundle folder for the post (like, if you used it in a shortcode, inside a markdown file, and not in a loop like this), as far as I understand it, but, is Hugo looking for a bundle folder for index, or for each page.

5

This worked:
<img src="/images/book.jpg" />

But obviously, it is repeating the same image for every post which I dont want. I want to set the image from my markdown files. And, no. I meant, I tried different things from the 4 lines, and none worked. I did not put all 4 together.

Any help further?

6

Ok, then next would be to try to pull a param from each page you’re looping over.

<img src="{{ with .Params.image }}{{ . }}{{ end }}" />

Link a different image in the frontmatters so you can prove it is working.
Untested but it would be something like that.

7

Perfect. I added that line in the index.html and image: /images/book.jpg in the frontmatters, and it works like a charm.

Thank you!

2 Likes
8

A post was split to a new topic: How to resize images