HUGO

Problem with the toha theme and the picture background

Hi,

I’ve a problem with the toha theme, when I try to change the background.

My config.toml :

baseURL = 'https://ezzmazz.gitlab.io/blog/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'toha'

[params]
gitRepo = "https://gitlab.com/Ezzmazz/toha.git"
background = "images/default-background.jpg"
enableBlogPost = true
enableTOC = true

[params.logo]
main = "images/main-logo.png"
inverted = "images/inverted-logo.png"
favicon = "images/favicon.png"

[params.newsletter]
enable = true

As you can see, I’ve a put the paramater background = "images/default-background.jpg" but the picture doesn’t appear as a background.

What I don’t understand is : for the parameters main, inverted and favicon, each pictures are displayed correctly so why the parameters background doesn’t works ?

I don’t really understand where is the problem…

And I’ve noted an other problem ( don’t know if this is the answer at my problem ). When I look the source code of my blog :

I can see that the URL of the picture is : https://ezzmazz.gitlab.io/blog/blog/images/default-background.jpg

Why there is two blog in the URL ? If I delete one of them, the pictures appears correctly…

There is some one to help me ?

Thanks a lot !

My fork of the theme => Ezzmazz toha theme fork
My blog repo => My New Hugo Site

The cause is in your /partials/sections/home.html :

background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $tiny.RelPermalink }}')

Not tested but I guess you can try something like : background-image: url('{{ $tiny.Permalink }}')

One comes from your BaseURL and the other from your RelPermalink.
Generally speaking you should avoid constructing URLs using BaseURL

Hi,

Thanks for the answer.

Indeed the problem is in the background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $src.RelPermalink }}'); part.

I’ve tested to delete the /blog at the end of the baseURL in my config.toml but it seems that gitlab need it to generate correctly the theme. Withouh the /blog, my blog looks like a simply html page.

I’ve tested your proposition : background-image: url('{{ $tiny.Permalink }}'), it didn’t work.

I’ve tested too this : background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}/{{ $src }}') and by adding the /blog at the end of my baseURL

The URL in my blog seems to be good :

#homePageBackgroundImageDivStyled {
    background-image: url('https://ezzmazz.gitlab.io/blog/images/default-background.jpg');
}

But still no picture as background :confused:

My fork : toha theme fork
My repo blog : blog

Did you check that the browser downloads the image (Developer Tools/Network)? If it doesn’t, you’ll not see a background image, of course. And “the URL seems” good seems dubious if you don’t see the image.

The browser can’t find the picture.

It is strange.

At the beginning, the URL was https://ezzmazz.gitlab.io/blog/blog/images/default-background.jpg. When I deleted one of the /blog, the picture appeared correctly. To show, I’ve created an other blog. I’ve no background.

With the developer tools, I can see that the URL to get the picture of the background is :

homePageBackgroundImageDivStyled {
    background-image: url('https://tim59176.gitlab.io/blog/blog/images/default-background.jpg');
}

If I delete one of the /blog, the picture appears.

Now, on my principal blog, I found a way to have only one /blog in the URL, and the picture doesn’t appear…

So it means that the change that I’ve done on the home.html doesn’t work. But I don’t know what to do to fix that.

Well, the image is not where you think it is. I suggest that you read

and put the image in /static/images. You should then be able to reference it as “images/my_image.png”

Thanks for the help @chrillek !

I’ve mixed your soluce with mine.

I’ve created a static/images/default-background.jpg and I’ve keep this change that I did before :

background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}/{{ $src }}')

With the /blog at the end of my baseURL and now it works !

Thanks a lot !

What is the value of {{ $tiny.Permalink }}' ? Is it not https://ezzmazz.gitlab.io/blog/images/default-background.jpg` ??

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.