# Problem with Hero Image

**URL:** <https://discourse.gohugo.io/t/problem-with-hero-image/46015>\
**Category:** Uncategorized\
**Tags:** theme-building\
**Created:** [September 2, 2023, 3:23pm UTC](https://discourse.gohugo.io/t/problem-with-hero-image/46015 "2023-09-02T15:23:21Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![wilonweb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/wilonweb/32/20049_2.png) [@wilonweb](https://discourse.gohugo.io/u/wilonweb)\
**Post date:** [September 2, 2023, 3:23pm UTC](https://discourse.gohugo.io/t/problem-with-hero-image/46015/1 "2023-09-02T15:23:21Z")

</div>

Hello  
I build my first theme  
My code was okay but i don’t know what i did and now my hero image is not display.

So i got an image :  
`hugo-blank-theme-v3\themes\sandbox\static\images\Chaton.jpeg`

a page :  
`hugo-blank-theme-v3\content\a-propos.md`  
with this front-matter

```auto
---
title: "A Propos"
date: 2020-04-08T11:15:50+02:00
draft: false
layout: a-propos
heroimage: /images/Chaton.jpeg
herotext: Je m'appelle Whisper, pour vous servir !
---

```

and my layout page  
`hugo-blank-theme-v3\themes\sandbox\layouts\_default\a-propos.html`

```auto
{{ define "main" }}

<div class="hero is-dark is-fullheight-with-navbar" {{ with .Params.heroimage }}
    style="background: url({{ . }}) center top; background-size:cover;" {{ end }}>
    <div class="hero-body">
        <div class="container max-800px">
            <h1 class="title is-1 has-background-primary narrow-background">
                {{ .Title }}
            </h1>
            {{ with .Params.herotext }}
            <h2 class="title subtitle is-4 has-background-primary narrow-background">
                {{ . }}
            </h2>
            {{ end }}
        </div>
    </div>
</div>

<div class="section">
    <div class="container max-800px">
        <div class="content">
            {{ .Content }}
        </div>
    </div>
</div>

{{ end }}

```

But my image is not display.

maybe is because my baseURL in `config.toml` is :  
`baseURL = 'https://wilonweb.github.io/hugo-blank-theme-v3/'` ?

Can you help me ?  
[You can check my code on github](https://github.com/wilonweb/hugo-blank-theme-v3/tree/main)

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [September 2, 2023, 3:50pm UTC](https://discourse.gohugo.io/t/problem-with-hero-image/46015/2 "2023-09-02T15:50:01Z")

</div>

We’ve had this conversation before…  
[https://discourse.gohugo.io/t/how-deploy-hugo-website-on-gitpages-url-problem/45883/6](https://discourse.gohugo.io/t/how-deploy-hugo-website-on-gitpages-url-problem/45883/6)

---

<div class="post-metadata">

**Author:** ![wilonweb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/wilonweb/32/20049_2.png) [@wilonweb](https://discourse.gohugo.io/u/wilonweb)\
**Post date:** [September 3, 2023, 2:56pm UTC](https://discourse.gohugo.io/t/problem-with-hero-image/46015/3 "2023-09-03T14:56:41Z")

</div>

Hi,  
It’s not really the same problem, I preferred to open a new topic because I started the project from scratch.

But if I take what you told me in the old post, should I transform my code in this way?

```auto
<div class="hero is-dark is-fullheight-with-navbar" {{ with .Params.heroimage }}
    style="background: url({{ index . 0 | relLangURL }}) center top; background-size:cover;" {{ end }}>
    <div class="hero-body">
        <div class="container max-800px">
            <h1 class="title is-1 has-background-primary narrow-background">
                {{ .Title }}
            </h1>
            {{ with .Params.herotext }}
            <h2 class="title subtitle is-4 has-background-primary narrow-background">
                {{ . }}
            </h2>
            {{ end }}
        </div>
    </div>
</div>

```

because at the moment it is not working…

---

<div class="post-metadata">

**Author:** ![chrillek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/chrillek/32/19797_2.png) [@chrillek](https://discourse.gohugo.io/u/chrillek)\
**Post date:** [September 3, 2023, 2:59pm UTC](https://discourse.gohugo.io/t/problem-with-hero-image/46015/4 "2023-09-03T14:59:27Z")

</div>

> [@wilonweb](#):
>
> `index . 0 `

In that case, dot is `.Params.heroimage`, and that is a string. What do you expect `index <string> 0` to be?

---

<div class="post-metadata">

**Author:** ![wilonweb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/wilonweb/32/20049_2.png) [@wilonweb](https://discourse.gohugo.io/u/wilonweb)\
**Post date:** [September 3, 2023, 3:05pm UTC](https://discourse.gohugo.io/t/problem-with-hero-image/46015/5 "2023-09-03T15:05:58Z")

</div>

I went back to this code because it worked before.  
But I don’t know what I did to make it stop working…

```auto
<div class="hero is-dark is-fullheight-with-navbar" {{ with .Params.heroimage }}
    style="background: url({{ . }}) center top; background-size:cover;" {{ end }}>
    <div class="hero-body">
        <div class="container max-800px">
            <h1 class="title is-1 has-background-primary narrow-background">
                {{ .Title }}
            </h1>
            {{ with .Params.herotext }}
            <h2 class="title subtitle is-4 has-background-primary narrow-background">
                {{ . }}
            </h2>
            {{ end }}
        </div>
    </div>
</div>

```

[This is my repo on github](https://github.com/wilonweb/hugo-blank-theme-v3)

PS - I think it’s a cache problem because on another page which displays an avatar for the author.  
I have the correct url but the link is broken…  
`<img src="/images/avatar-musk.jpg" class="author-image">`  
And i got this file :  
`hugo-blank-theme-v3\themes\sandbox\static\images\avatar-musk.jpg`

Maybe is because i generate the website in the public folder ?  
with the command `hugo` ?

---

<div class="post-metadata">

**Author:** ![chrillek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/chrillek/32/19797_2.png) [@chrillek](https://discourse.gohugo.io/u/chrillek)\
**Post date:** [September 3, 2023, 3:23pm UTC](https://discourse.gohugo.io/t/problem-with-hero-image/46015/6 "2023-09-03T15:23:10Z")

</div>

The simplest way to debug this kind of problem is to open the site in your favorite browser and use its developer tools to see what they can tell you. In your case, it’s dead simple:

 ![Bildschirmfoto 2023-09-03 um 17.10.27](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/d/c/dc91e80415241b9015799d1387af797209569bf8.png)

The browser can’t find your image. Which you told it to be at `images/Chaton.jpeg` … ah, no, you didn’t, that’s just what you posted here. In your Git repo, you have something else – this is **not** helpful. If you post code here, it should be the code you’re using, not something else.

Just _look_ at your definition of the image that can’t be loaded in your front matter and fix that. There’s no point opening new threads for problems that have already been solved.  
Hint: Learn about absolute vs. relative URLs.

And ensure your code works with what you put in frontmatter – just decide if you have an _array_ of images or a single one.

---

<div class="post-metadata">

**Author:** ![wilonweb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/wilonweb/32/20049_2.png) [@wilonweb](https://discourse.gohugo.io/u/wilonweb)\
**Post date:** [September 3, 2023, 3:29pm UTC](https://discourse.gohugo.io/t/problem-with-hero-image/46015/7 "2023-09-03T15:29:15Z")

</div>

I think the easiest thing is for me to start the code from the beginning because it worked.  
And it was when I wanted to publish it on the github page that I made modifications and in the end it didn’t work either on the github page or locally…

But the project is quite simple, I will start from the beginning.

PS the old post was to make urls work on github page.  
And this is to make them work locally…

and now it’s too rough I’m going to start from the beginning.  
But I’m leaving the post and the repo open in case anyone figures out what’s going on…

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [September 3, 2023, 3:44pm UTC](https://discourse.gohugo.io/t/problem-with-hero-image/46015/8 "2023-09-03T15:44:02Z")

</div>

> [@wilonweb](#):
>
> It’s not really the same problem

Yes, it is.

---

<div class="post-metadata">

**Author:** ![chrillek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/chrillek/32/19797_2.png) [@chrillek](https://discourse.gohugo.io/u/chrillek)\
**Post date:** [September 3, 2023, 4:22pm UTC](https://discourse.gohugo.io/t/problem-with-hero-image/46015/9 "2023-09-03T16:22:18Z")

</div>

What’s the point starting at zero if you don’t _understand_ what’s happening? Committing the same error over and over will not lead to success.

And what’s the point in asking for advice if you then ignore it?

> [@wilonweb](#):
>
> in case anyone figures out what’s going on…

Exactly the same as before.

---

<div class="post-metadata">

**Author:** ![wilonweb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/wilonweb/32/20049_2.png) [@wilonweb](https://discourse.gohugo.io/u/wilonweb)\
**Post date:** [September 3, 2023, 4:37pm UTC](https://discourse.gohugo.io/t/problem-with-hero-image/46015/10 "2023-09-03T16:37:18Z")

</div>

So to resume  
I got an image :  
`hugo-blank-theme-v3\themes\sandbox\static\images\Chaton.jpeg`

I got a page with this front matter

```auto
---

title: "A Propos"
date: 2020-04-08T11:15:50+02:00
draft: false
layout: a-propos
heroimage: /images/Chaton.jpeg
herotext: Je m'appelle Whisper, pour vous servir !

---

```

And i got a template

```auto
{{ define "main" }}

<div class="hero is-dark is-fullheight-with-navbar" {{ with .Params.heroimage }}
    style="background: url({{ . }}) center top; background-size:cover;" {{ end }}>
    <div class="hero-body">
        <div class="container max-800px">
            <h1 class="title is-1 has-background-primary narrow-background">
                {{ .Title }}
            </h1>
            {{ with .Params.herotext }}
            <h2 class="title subtitle is-4 has-background-primary narrow-background">
                {{ . }}
            </h2>
            {{ end }}
        </div>
    </div>
</div>

<div class="section">
    <div class="container max-800px">
        <div class="content">
            {{ .Content }}
        </div>
    </div>
</div>

{{ end }}

```

my code worked at the beginning only locally.  
And while configuring github page I got lost with modifications and Repos.

For me the code is supposed to currently work locally.

But this is not the case.

If you understand the error tell me because I don’t understand why it worked before and it doesn’t work anymore…

Otherwise starting from the beginning allowed me to see more clearly…

> [@chrillek](#):
>
> And what’s the point in asking for advice if you then ignore it?

Wich advice do you talk ?

---

<div class="post-metadata">

**Author:** ![chrillek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/chrillek/32/19797_2.png) [@chrillek](https://discourse.gohugo.io/u/chrillek)\
**Post date:** [September 3, 2023, 4:53pm UTC](https://discourse.gohugo.io/t/problem-with-hero-image/46015/11 "2023-09-03T16:53:13Z")

</div>

> [@wilonweb](#):
>
> Wich advice do you talk ?

Let’s see…

> [@chrillek](#):
>
> The simplest way to debug this kind of problem is to open the site in your favorite browser and use its developer tools to see what they can tell you

…

> [@chrillek](#):
>
> . In your Git repo, you have something else – this is **not** helpful. If you post code here, it should be the code you’re using, not something else.

…

> [@chrillek](#):
>
> Learn about absolute vs. relative URLs.

---

<div class="post-metadata">

**Author:** ![wilonweb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/wilonweb/32/20049_2.png) [@wilonweb](https://discourse.gohugo.io/u/wilonweb)\
**Post date:** [September 3, 2023, 5:08pm UTC](https://discourse.gohugo.io/t/problem-with-hero-image/46015/12 "2023-09-03T17:08:44Z")

</div>

ok I will take another example to take into account your advice

I got an image in my project  
`hugo-blank-theme-v3\themes\sandbox\static\images\avatar-musk.jpg`

This is my template where i have to see my image  
`hugo-blank-theme-v3\themes\sandbox\layouts\blog\single.html`

```auto
<div class="columns is-vcentered is-mobile">
                                {{ with .Site.Params.authorImage }}
                                <div class="column is-narrow">
                                    <img src="{{ . }}" class="author-image">
                                </div>
                                {{ end }}
                                <div class="column">
                                    <p>{{ .Site.Params.Author }}</p>
                                    <p><time>{{ .PublishDate.Format "January 2, 2006" }}</time> | {{ .ReadingTime }} {{
                                        if eq .ReadingTime 1 }} minute {{ else }} minutes {{ end }}</p>
                                </div>
                            </div>

```

This is what i see in my html ( from the devTools )  
`<img src="/images/avatar-musk.jpg" class="author-image">`

So i got my image in my installation.  
My code generate the URL relative of my image.

But i can’t see my image …

Do you have an explication ?  
I have to get an absolute URL ?  
I have to analys it with another tool froom my googleChrome devTools ?

[My Repo GitHub](https://github.com/wilonweb/hugo-blank-theme-v3.git)

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [September 3, 2023, 5:32pm UTC](https://discourse.gohugo.io/t/problem-with-hero-image/46015/13 "2023-09-03T17:32:51Z")

</div>

In your site configuraiton, the baseURL is:

```plaintext
http://localhost:1313/hugo-blank-theme-v3/

```

This image URL:

```plaintext
/images/avatar-musk.jpg

```

Resolves to:

```plaintext
http://localhost:1313/images/avatar-musk.jpg

```

Which is wrong. Hence the repeated advice to understand relative vs. absolute URLs.

It needs to resolve to:

```plaintext
http://localhost:1313/hugo-blank-theme-v3/images/avatar-musk.jpg

```

So you have two choices:

1) Change the URL to `/hugo-blank-theme-v3/images/avatar-musk.jpg`. This is a terrible idea, because your image will break if you change the `baseURL`.

2) Specify a URL without a leading slash: `images/avatar-musk.jpg`, and use the `relLangURL` function to properly resolve the URL to your `baseURL`.

We’ve had this conversation before…  
[https://discourse.gohugo.io/t/how-deploy-hugo-website-on-gitpages-url-problem/45883/6](https://discourse.gohugo.io/t/how-deploy-hugo-website-on-gitpages-url-problem/45883/6)

```plaintext
{{ with .Site.Params.authorImage }}
    <img src="{{ . | relLangURL }}" class="author-image">
{{ end }}

```

---

<div class="post-metadata">

**Author:** ![wilonweb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/wilonweb/32/20049_2.png) [@wilonweb](https://discourse.gohugo.io/u/wilonweb)\
**Post date:** [September 3, 2023, 5:43pm UTC](https://discourse.gohugo.io/t/problem-with-hero-image/46015/14 "2023-09-03T17:43:59Z")

</div>

thank you very much,  
I understand a little better,  
however, I changed my code like this:

```auto
{{ with .Site.Params.authorImage }}
<div class="column is-narrow">
  <img src="{{ . | relLangURL }}" class="author-image">
</div>
{{ end }}

```

And in my config/toml  
`baseURL = 'http://localhost:1313/hugo-blank-theme-v3/'`

But the problem is still here …

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [September 3, 2023, 5:48pm UTC](https://discourse.gohugo.io/t/problem-with-hero-image/46015/15 "2023-09-03T17:48:05Z")

</div>

Please push your changes to your GitHub repository.

---

<div class="post-metadata">

**Author:** ![wilonweb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/wilonweb/32/20049_2.png) [@wilonweb](https://discourse.gohugo.io/u/wilonweb)\
**Post date:** [September 3, 2023, 5:55pm UTC](https://discourse.gohugo.io/t/problem-with-hero-image/46015/16 "2023-09-03T17:55:30Z")

</div>

i have another probleme with git 🤬

```auto
On branch main
Your branch and 'origin/main' have diverged,
and have 1 and 1 different commits each, respectively.
  (use "git pull" to merge the remote branch into yours)

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified: ../../config.toml
        modified: ../../themes/sandbox/layouts/_default/list.html
        modified: ../../themes/sandbox/layouts/blog/list.html
        modified: ../../themes/sandbox/layouts/blog/single.html
        modified: ../../themes/sandbox/layouts/partials/widgets/post-card.html
        modified: ../../themes/sandbox/layouts/shortcodes/blogposts.html
        modified: ../../themes/sandbox/layouts/shortcodes/hero-index.html

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        ../../sd

```

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [September 3, 2023, 5:57pm UTC](https://discourse.gohugo.io/t/problem-with-hero-image/46015/17 "2023-09-03T17:57:17Z")

</div>

You need to look elsewhere for help with Git. Let us know when you have updated your repository.

---

<div class="post-metadata">

**Author:** ![wilonweb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/wilonweb/32/20049_2.png) [@wilonweb](https://discourse.gohugo.io/u/wilonweb)\
**Post date:** [September 3, 2023, 6:02pm UTC](https://discourse.gohugo.io/t/problem-with-hero-image/46015/18 "2023-09-03T18:02:44Z")

</div>

Now is okay  
[my repo](https://github.com/wilonweb/hugo-blank-theme-v3.git)  
[my layout single with the author image](https://github.com/wilonweb/hugo-blank-theme-v3/blob/main/themes/sandbox/layouts/blog/single.html)  
[my config](https://github.com/wilonweb/hugo-blank-theme-v3/blob/main/config.toml)

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [September 3, 2023, 6:17pm UTC](https://discourse.gohugo.io/t/problem-with-hero-image/46015/19 "2023-09-03T18:17:54Z")

</div>

I asked you to do this:

```auto
authorImage = "images/avatar-musk.jpg"

```

You did this instead:

```auto
authorImage = "/images/avatar-musk.jpg"

```

---

<div class="post-metadata">

**Author:** ![wilonweb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/wilonweb/32/20049_2.png) [@wilonweb](https://discourse.gohugo.io/u/wilonweb)\
**Post date:** [September 3, 2023, 6:21pm UTC](https://discourse.gohugo.io/t/problem-with-hero-image/46015/20 "2023-09-03T18:21:36Z")

</div>

O yeahhhhhhh  
thanks you !!!  
Is done !!!  
I was losing my mind and no longer understood anything…

But i have always the probleme with my heroImage.  
`hugo-blank-theme-v3\themes\sandbox\layouts\_default\a-propos.html`

```auto
<div class="hero is-dark is-fullheight-with-navbar" {{ with .Params.heroimage }}
    style="background: url({{ index . 0 | relLangURL }}) center top; background-size:cover;" {{ end }}>
    <div class="hero-body">
        <div class="container max-800px">
            <h1 class="title is-1 has-background-primary narrow-background">
                {{ .Title }}
            </h1>
            {{ with .Params.herotext }}
            <h2 class="title subtitle is-4 has-background-primary narrow-background">
                {{ . }}
            </h2>
            {{ end }}
        </div>
    </div>
</div>

```

And the front matter of my page

```auto
---
title: "A Propos"
date: 2020-04-08T11:15:50+02:00
draft: false
layout: a-propos
heroimage: images/Chaton.jpeg
herotext: Je m'appelle Whisper, pour vous servir5 !
---

```

It’s a different way when the url is define in the style ?

[Next page](https://discourse.gohugo.io/t/problem-with-hero-image/46015.md?page=2)