Problem with Hero Image

wilonweb · September 2, 2023, 3:23pm

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

---
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

{{ 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

jmooring · September 2, 2023, 3:50pm

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

wilonweb · September 3, 2023, 2:56pm

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?

<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…

chrillek · September 3, 2023, 2:59pm

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

wilonweb · September 3, 2023, 3:05pm

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

<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

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 ?

chrillek · September 3, 2023, 3:23pm

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:

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.

wilonweb · September 3, 2023, 3:29pm

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…

jmooring · September 3, 2023, 3:44pm

Yes, it is.

chrillek · September 3, 2023, 4:22pm

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?

Exactly the same as before.

wilonweb · September 3, 2023, 4:37pm

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

---

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

{{ 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…

Wich advice do you talk ?

chrillek · September 3, 2023, 4:53pm

Let’s see…

…

wilonweb · September 3, 2023, 5:08pm

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

<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

jmooring · September 3, 2023, 5:32pm

In your site configuraiton, the baseURL is:

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

This image URL:

/images/avatar-musk.jpg

Resolves to:

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:

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

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

wilonweb · September 3, 2023, 5:43pm

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

{{ 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 …

jmooring · September 3, 2023, 5:48pm

Please push your changes to your GitHub repository.

wilonweb · September 3, 2023, 5:55pm

i have another probleme with git

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

jmooring · September 3, 2023, 5:57pm

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

wilonweb · September 3, 2023, 6:02pm

Now is okay
my repo
my layout single with the author image
my config

jmooring · September 3, 2023, 6:17pm

I asked you to do this:

authorImage = "images/avatar-musk.jpg"

You did this instead:

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

wilonweb · September 3, 2023, 6:21pm

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

<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

---
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 ?

Topic		Replies	Views
Images not appearing w/ localhost and latest Hugo (0.54.0) support	4	1666	February 15, 2019
Odd build issues (theme layout not looking up correct template) support	5	359	December 9, 2022
Header Image for Home Page? header\backround image dimensions....? support	3	1677	July 1, 2019
Avatar not showing	7	5054	June 27, 2018
"No image" in static/img support	2	130	May 12, 2024

Problem with Hero Image

Related topics