Links to assets in blogdown page bundles get "too shallow" relative links in HTML

[solarchemist]

I think there is a problem with how knitr::include_graphics() or ![]() produces links when relative links to assets in page bundles are used. Whether the source file is .RMarkdown or .Rmd made no difference.

I have described the issue in detail in this StackOverflow question (so far no comments/answers, I suppose the wall of text is disheartening ;-). So I'll try to be short and to the point here.

I've created a new blogdown site at https://joys.solarchemist.se, and published its full source on github (I started from Alison Hill's nice guide). I originally observed this problem of relative links in the RSS full-text for my own site, but after observing the same issue for with this newly created site I've become more confident that the issue was not due to some configuration error in my site.

Let's look at a blog post with static images, say https://joys.solarchemist.se/blog/fonts/. If we compare the HTML source to the Rmd source, we will see that all images included using either include_graphics() or ![]() have what I like to call "shallow" relative links, i.e., relative to the blog post itself, like so: <img src="isaac-font.png" ... />.

If we do the same inspection for plots generated from knitr figure chunks (e.g., see this other post on the same blog, Rmd source here), we can see that those images get "deep" relative links, i.e., links that are relative to the blog site root, like this: <img src="//joys.solarchemist.se/blog/rmarkdown/index_files/figure-html/unnamed-chunk-1-1.png" .../>. (Note: in this case, our "deep" link became an absolute link because we've set baseURL: "//joys.solarchemist.se/" in the site's config).

Both of these link schemas (which I've labelled "shallow" and "deep" relative links) render fine in any browser I know of. But only the deep relative links render correctly in an RSS reader (I've only extensively tested TinyTinyRSS). The shallow relative links is just a broken image in the RSS full-text.

So it seems to me that knitr is already doing something smart when constructing a "deep" relative link when it renders links to chunk images. Could or should the same mechanism perhaps also be applied to include_graphics()?

Manually keeping tracking of the blog post's URL (albeit simple in this case, /blog/fonts/) is very cumbersome, especially since the permalink schema setting in the site config.yml can include year/month/date etc., and in that case simply changing the date in the post's frontmatter creates a new blog post URL.

Dammit, this still became a wall of text. Sorry everyone, I tried to be brief ;-)

---

By filing an issue to this repo, I promise that

• [x] I have fully read the issue guide at https://yihui.org/issue/.
• [X] I have provided the necessary information about my issue.
  • If I'm asking a question, I have already asked it on Stack Overflow or RStudio Community, waited for at least 24 hours, and included a link to my question there.
  • If I'm filing a bug report, I have included a minimal, self-contained, and reproducible example, and have also included xfun::session_info('knitr'). I have upgraded all my packages to their latest versions (e.g., R, RStudio, and R packages), and also tried the development version: remotes::install_github('yihui/knitr').
  • If I have posted the same issue elsewhere, I have also mentioned it in this issue.
• [X] I have learned the Github Markdown syntax, and formatted my issue correctly.

I understand that my issue may be closed if I don't fulfill my promises.

[yihui]

Sorry I've seen your SO post the day when you posted it and it has stayed in my browser since then, but I still don't have time to read the wall of text :) At the moment, I can only say that it has been logged in my todo list: https://yihui.org/todo/#todo

[solarchemist]

I didn't know you kept a public TODO - I skimmed through it, and was stunned to see this very question has already been discussed by yourself (no. 11 on your TODO) and none other than Alison Hill (whose theme I used for my demo site). I don't know how I missed that github issue during my research. :: really embarrassed :: Sorry for the noise.

Alison suggests a couple of different Hugo theme-level fixes, which I believe could work nicely. But I'm surprised the Apero theme (which is fairly new, right?) didn't include one of those fixes? (this is not a criticism, I'm just asking because perhaps I missed something when I setup my Apero demo-site?)

Yihui himself explains how chunk plot output gets absolute URLs, namely with a shortcode used like this ![]({{< blogdown/postref >}foo.png}). So that explains that part of my question.

I'll look into these suggested approaches and try to document the approach I take for my site on SO and/or here. I understand that we should perhaps demand more from RSS reader software, but I can't shake the feeling that site generators like Hugo are the ones that introduced bundling, and thus it's mostly on our generator to produce proper relative links.

I have one remaining question, I think. Will either of those approaches (theme-level hooks or shortcode) work for knitr::include_graphics("foo.png")?

[yihui]

I skimmed through it, and was stunned to see this very question has already been discussed by yourself (no. 11 on your TODO)

Right, I've revisited this thorny issue a couple of times because it has affected several people (e.g., pretty much anyone who uses R-bloggers). I think I know how to fix the RSS feeds but don't have the time yet.

really embarrassed :: Sorry for the noise.

No worries!

But I'm surprised the Apero theme (which is fairly new, right?) didn't include one of those fixes?

I haven't looked closely at Apero yet but it seems we should include one of those fixes. I'll remember to do that, or at least remind Alison. Yes, it's a new theme, and we should have applied the knowledge we learned. Thanks for the feedback!

Will either of those approaches (theme-level hooks or shortcode) work for knitr::include_graphics("foo.png")?

I'm thinking of automatically adding {{< blogdown/postref >}} to the image src when calling knitr::include_graphics(). That might solve your problem.

[solarchemist]

Really appreciate your kind comments!

Yeah, if include_graphics() would incorporate that functionality I think it would resolve my issue. It would also make it even more convenient to use include_graphics over ![]() (but that's just because I already prefer the knitr function to the markdown notation). You obviously have a better vantage point than me, but I don't see any drawback of making this the new default behaviour of include_graphics(). But even if was not default and required an argument (along the lines of error=F), that would be just fine if it also gets a global option (along the lines of knitr.graphics.error=F).

Appreciate the work that went into the Apero theme. It looks awesome and was very easy to get started with. In a sense, I was lucky that Apero did not incorporate those fixes, because then I would have had a much harder time identifying the cause of my broken image links ;-) Keep up the good work!

[ClaudiuPapasteri]

Hi. I tried @Yihui's solution of using a Hugo shortcode and replacing with  within Rmarkdown documents. Everything seems fine, but when I do the replacement I get:

Error: Error building site: "E:\path\blog\content\post\name_post\index.en.markdown:1:1": unrecognized character in shortcode action: U+003E '>'. Note: Parameters with non-alphanumeric args must be quoted

Any idea why this happens? Thank you. Also posted this question on SO.