Enable usage of relative URLs for avatars

[lcolladotor]

Hi @gcushen,

Based on these 3 comments on the blogdown repo:

• wrong relative paths when using other themes rstudio/blogdown#84 (comment)
• wrong relative paths when using other themes rstudio/blogdown#84 (comment)
• wrong relative paths when using other themes rstudio/blogdown#84 (comment)

I believe that hugo-academic doesn't support relative URLs for the avatar. That is https://github.com/gcushen/hugo-academic/blob/f45e2c0ca518c458cb3b6259ee2ccd1a100e09bd/layouts/partials/widgets/about.html#L13-L14 uses absURL in: {{ (printf "img/%s" $.Site.Params.avatar) | absURL }}'. Would changing this to {{ (printf "img/%s" $.Site.Params.avatar) | absURL | relURL }}' solve this? Or maybe changing to {{ (printf "img/%s" $.Site.Params.avatar) | relURL }}'? (I don't know the proper hugo syntax)

By the way, I currently see 9 results of absURL when searching the repo https://github.com/gcushen/hugo-academic/search?utf8=%E2%9C%93&q=absURL&type= that I guess could result in similar issues.

Best,
Leo

[lcolladotor]

I know that if we change lines 13 and 14 to:

      <div class="portrait" style="background-image: url('./{{ (printf "img/%s" $.Site.Params.avatar) | absURL }}');"></div>
      <meta itemprop="image" content="{{ (printf "img/%s" $.Site.Params.avatar) | absURL }}">

then it works. That is, adding ./ before {{ on line 13 and basically forcing the URL to be relative. We (me and @ShanEllis) tried using relURL instead of absURL, but we saw that it wasn't defined when we deleted (printf "img/%s" $.Site.Params.avatar) |. It would lead to an error like this:

error calling partial: template: partials/widgets/about.html:13:62: executing "partials/widgets/about.html" at <relURL>: wrong number of args for relURL: want 1 got 0

I'm hoping you have a more elegant, stable and robust solution than the one we found so that no one has to edit the about.html file.

Thanks!

[gcushen]

Hugo has known issues with relative URLs in style tags. We have tried to workaround it so that the about widget avatar works on most kinds of deployment by using absolute URLs. For example, the demo on the Hugo Themes Site doesn't work when the avatar image is a relative URL.

You mentioned that RStudio hosting doesn't support absolute URLs, but I believe this might cause issues in other aspects of your website such as SEO metadata and social sharing, where absolute URLs are required.

[gcushen]

We have made some updates that might improve the deployment to your RStudio host. However, note that the bug in your host's capability to use absolute URLs may affect the features mentioned above which require absolute URLs in order to operate.

[lcolladotor]

Awesome, thanks @gcushen!

Can you give it a try @ShanEllis?