Skip to content
This repository was archived by the owner on Dec 30, 2022. It is now read-only.

Progressive loading clashing with Hugo path fixup #117

Open
neurocline opened this issue Feb 26, 2019 · 0 comments
Open

Progressive loading clashing with Hugo path fixup #117

neurocline opened this issue Feb 26, 2019 · 0 comments

Comments

@neurocline
Copy link

Hi there. I'm working on fixing Hugo path handling (there are a number of cases that are broken, related to baseURL more than just a host, but also use of canonifyURLs and relativeURLs).

"Good" news is that your theme didn't work with the existing Hugo for the cases I'm fixing. But bad news is that your theme stays broken. The reason is the progressive loading div; since there's an image URL tucked away in an attribute Hugo knows nothing about, that link can't get fixed up at the end of page generation. This is where currently Hugo does things like "if canonifyURLs, then make all the URLs absolute". And what I added was "if you like path-absolute URLs (this is a URL like "/path/to/my/page"), then fix those up properly from baseURL as well.

In case this is not sounding familiar, the progressive load template is making output like this

<p><figure class="progressive"><img class="progressive__img progressive--not-loaded" data-progressive="/img/2019-02-08-hugo-primer-home.png" src="../../img/low/2019-02-08-hugo-primer-home.png" alt="Home page" /></p></figure>

Notice that the data-progressive element has a broken link (broken for the site it was generated for), because it didn't get fixed up at page-output time, because its attribute isn't known to Hugo (in the site at hand, the link has to be a page-relative-URL, because this is in a site inside a site).

I can't just have the Hugo code replace anything that looks like a link, as this could rewrite non-link user content. I can't even just have it fix anything in an element attribute, because that could break HTML that was working (unlikely, but possible).

Any suggestions? I know you can't use src, because that's already used for the low-resolution image.

This is what Hugo does at the end of page generation. It goes through the HTML looking for these attributes:

  • src
  • href
  • srcset

and fixes up links contained in them to match what the user config says (at the moment, this is baseURL, canonifyURLs, and relativeURLs). Note that you need this fixup done if baseURL has a path in it instead of just a hostname (because the Markdown processor doesn't know about baseURL).

I could add config that lets your theme declare more element attributes to fix up; that would only be used when rendering your theme. This could also be done with a template function, I guess, that you would need to remember to call to register your new attribute to fix up. And while I was going to tighten up the link-fixer (right now it's all attributes of a certain name, instead of "if img element, fix up src attribute"), any config or registration could take that into account.

I'd love to hear if you have a way to handle this without extra Hugo features.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant