Fix: Show images stored alongside *.md sections

[goingforbrooke]

No description provided.

[ipetkov]

Not fully sure how zola's internals interact with this, but as of 733f1c1 I'll see image urls built like: https://example.comblog/2022-05-21-title-of-the-post/image.jpg (yes the domain is malformed due to a missing slash), when in reality the image is available at https://example.com/blog/title-of-the-post/image.jpg

[goingforbrooke]

The trailing slash issue seems to be long running, though it's behaving as expected. There's also a chance that shortcodes are broken or that I'm missing something important about how they work.

[goingforbrooke]

I'm testing a version of my site with zola serve and I'm not getting @ipetkov's slash issue. My post is defined in content/post_title/index.md, which uses content/post_title/test_image.jpeg via shortcode the same way that @ipetkov does in his posts.

@ipetkov, are you using zola serve when you get the trailing slash issue?

[ipetkov]

Yeah I see the issue with both zola serve and zola build. I'm on zola 0.17.2 fwiw

[goingforbrooke]

Strange-- I'm on 0.17.2 as well. Would you mind pushing a branch of your site with the issue? Post a link to the code here and I'll see if I can reproduce it locally.

[ipetkov]

@goingforbrooke sure!

Here's the source which builds this broken version of the site

Here is an example of the broken URLs and this is the corresponding shortcode which generates it

Here is what the non-broken version looks like

[goingforbrooke]

Thanks! I haven't run it locally yet, but at first blush, you might be missing a trailing slash in your config.toml's base_url.

I'm going off my blog's base_url, which has a trailing slash. On the other hand, my (Zola) site's base_url doesn't have a trailing slash (and perhaps it should).

I'll try adding a slash to the end of my site's base_url and see what happens.

[ipetkov]

Doesn't seem to help :/

It adds a redundant (through harmless) slash in some places. The broken image urls are slightly less broken, though now they end up pointing to the root of the domain but not nested under the blog content 🤔

[goingforbrooke]

Zole might not like the dates that you're prefixing to your blog post directories.

For example, your blog post ipetkov.github.io.content/blog/2022-05-21-steam-deck-first-impressions is generated as public/blog/steam-deck-first-impressions (with the date stripped). For this reasons, the page fails to retrieve blog/2022-05-21-steam-deck-first-impressions/deck.jpg because the path doesn't exist.

I would suggest that you remove the date prefixes from your blog posts, but figure shortcodes are working fine with no path to the image at all. For example, case_switch.jpg. tells me that I'm still missing something about asset colocation. On the other hand, this fix works on my test site, which uses a mix of directory-style and markdown-style posts.

What do you think, @ipetkov?

[ipetkov]

Zola automatically handles stripping dates from pages (or it's documented as a "feature" at least) because all the other links still work

I did a quick test with the various properties that zola's pages are available in the templates:

  path: /blog/steam-deck-first-impressions/
  permalink: http://127.0.0.1:1111/blog/steam-deck-first-impressions/
  relative_path: blog/2022-05-21-steam-deck-first-impressions/index.md
  colocated_path: blog/2022-05-21-steam-deck-first-impressions/

Seems like page.path gives the actual URL the page will fully be generated at while colocated_path represents the relative URL of the markdown page before processing. Actually page.permalink seems to pretty much already have the base URL we want, and appending the image name (assuming the argument doesn't include ../) makes the images resolve for me!

[goingforbrooke]

Thanks for going the extra mile to post output and for trying out different properties!

Sadly, using page.permalink breaks my site. Where do you see the docs for date stripping in Zola?

ipetkov.github.io (dates in post titles, subdir style)

✅config.base_url+page.path: http://127.0.0.1:1025/blog/steam-deck-first-impressions/deck.jpg

• Date stripped

✅page.permalink: http://127.0.0.1:1025/blog/steam-deck-first-impressions/deck.jpg

• Date stripped

❌config.base_url+page.relative_path: http://127.0.0.1:1025blog/2022-05-21-steam-deck-first-impressions/index.md

• Date not stripped
• Adding a / to base_url in Cargo.toml doesn't help.

❌config.base_url+page.colocated_path: http://127.0.0.1:1025blog/2022-05-21-steam-deck-first-impressions/deck.jpg

• Date not stripped
• Adding a / to base_url in Cargo.toml doesn't help.

My Blog (no dates in post titles, top-level style)

❌config.base_url+page.path: http://127.0.0.1:1111//pages-ssg/jekyll_quickstart.png

❌page.permalink: http://127.0.0.1:1111/pages-ssg/jekyll_quickstart.png

❌config.base_url+page.relative_path: http://127.0.0.1:1111/pages_ssg.md/jekyll_quickstart.png

• / inserted after relative_path

✅config.base_url+page.colocated_path: http://127.0.0.1:1111/jekyll_quickstart.png

• page.colocated_path is null because the .md file isn't colocated

Summary

I'd like to use page.colocated_path, but it doesn't include the date stripping that your blog needs.

[goingforbrooke]

I found the docs on removing dates from slugs. As an aside, why are you defining post dates in the frontmatter of index.md (date = 2022-05-21)? It's overriding the dates extracted from the post's subdirectory title (2022-05-21 in 2022-05-21-steam-deck-first-impressions.

[goingforbrooke]

Solution

Let's use the resize_image built-in function for all images (and figures) because it's a reliable way to get a valid "output URL". It works with the directory-post-style that @ipetkov uses and the *.md-post-style that I use.

We can preserve the look of existing sites by setting the resize dimensions for fit large enough (5000x5000), that no resizing actually happens. This feels unnecessarily hacky, but it provides a stable fix for both posting styles.

Research

@ipetkov, never mind about the docs reference on date stripping-- I found it.

I looked into the docs a bit more and my interpretation is that page.path and page.permalink are "output paths" on the generated site. The "input paths" page.relative_path and page.colocated_path are "input paths" before the site is generated. "Input paths" need further processing to be valid. For example, page.relative_path doesn't strip dates from slugs.

As for @ipetkov's page.permalink suggestion, it doesn't work for my (*.md-post-style) site because it assumes the directory-post-style.

We want to use page.colocated_paths to reference images on the input side because (1) Zola recommends it for shortcodes and (2) it works on *.md-post-style sites by defaulting to null when *.md isn't colocated.

The trouble is getting page.colocated_path into the HTML's src. In this PR, I convert it to a string and append it to config.base_url, but that breaks images in @ipetkov's directory-post-style. The get_url builtin offers "Get the permalink for the given path," but it also doesn't strip dates.

I don't think that there's a built-in way to strip dates from output paths/URLs. We could manually remove dates in the image shortcode with an if, but that would be fragile.

[goingforbrooke]

Incorporated changes into (new) PR #46.