problem with backgrounds when relativeURLs is needed

[pooh22]

Hi Jeremy,

I'm struggling to figure out how I can put the generated site (using theme HugoMDL) in a subdirectory. In several places in the template code, you use something like style="background-image: url('{{ .Site.Params.background }}');"

I've tried to explain it in the discuss forum: https://discuss.gohugo.io/t/need-help-understanding-url-conversions/4294/13
Basically when I place the site under a baseurl of http://example.com/subdir/ Some links are broken, which should not happen when relativeURLs is set to true in the config.toml.

Do you have any idea if this can be fixed in the theme?

Cheers

Simon

[jchatkinson]

Hey @pooh22 ,

I'm not sure of any easy fix. To be honest, i'm pretty inexperienced, so perhaps this wasn't the best approach for handling the background image. If you think of a better way, feel free to PR it or even just explain here how you handled it.

Can you provide more information about which links are broken? If I have time I will take a look this weekend.

[pooh22]

Hi Jeremy, that makes two of us ;-) I'm also quite new to hugo and not an experienced web developer...
(But I started with webpages ages ago, so my experience is also rather mature (as in cheese), but I'm learning)

I figure that everywhere you set the background image via (inline) css, hugo doesn't touch it after generating the string output. I can't judge whether hugo should process these links. From the commented-out lines in the css file I gleaned that you ran into similar problems when setting the background via the external css files, is that right?

My html+css experience is not great, so at the moment I can't think of an alternative way to do the same thing. I guess the relativeURLs thing in hugo looks for links in href and src references, so if you can figure out a way to do the background setting using these html elements, it might work...

Cheers,

Simon

[pooh22]

I just had a look at the sources of hugo, it seems I was right, but it's probably going to take quite a bit of work to fix it in hugo for the current state of HugoMDL...

look in hugo sources: transform/absurlreplacer.go

 60 // new prefixes can be added below, but note:
 61 // - the matches array above must be expanded.
 62 // - the prefix must with the current logic end with '='
 63 var prefixes = []*prefix{
 64         {r: []rune{'s', 'r', 'c', '='}, f: checkCandidateBase},
 65         {r: []rune{'h', 'r', 'e', 'f', '='}, f: checkCandidateBase},
 66         {r: []rune{'s', 'r', 'c', 's', 'e', 't', '='}, f: checkCandidateSrcset},
 67 }

So the fix could be in the theme, to avoid setting urls via css, or it could be fixed in hugo to also process urls in css when abs or rel URLs are requested.

[pooh22]

On 17-10-16 16:18, Bjørn Erik Pedersen wrote:

Does

|style="background-image: url('http://base/sub/image.jpg');" |

work?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#11 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALIwGAqkKX5X3OieCpFjVCSJ7rxOm464ks5q04PQgaJpZM4KW4xZ.

One of the suggestions in the thread mentioned was to put {{
.Site.BaseURL}}/image/ in front of the image-link in the url('')

This kind of works ok, but in the entire theme are a lot of these
references and getting them all to work right is a bothersome effort...

Cheers

Simon

[bep]

all to work right is a bothersome effort

Search and replace ...