Relative page resource paths in index.html and .Summary

Hi all,

I’ve switched few of my single pages into Page Bundles because there are images included and I loved using relative paths (more Markdown-editor-friendly) instead of putting under /static.

So far Page Bundles work well, the images were shown properly in each page. Unfortunately, the {{ .Summary }} of the page in my main index.html file does not show these images.

The root cause is obvious, as the relative resource paths are correctly recognized within the page but not within index.html.

Are there any existing options or shortcodes that help to transform relative resource paths into appropriate, if better also relative, paths that can be shown/referenced? For instance, takes two inputs, paths $1 and $2, and yields a relative path of $2 with respect to $1?

Many thanks in advance.

I don’t have a solution for the .Summary problem (which is a hard problem), but … I suspect that you will get a better overall site if you model your content-images differently,

I would recommend that you:

  • Do not use images in summary
  • Create some kind of naming standard and establish a featured image per article – e.g. “featured.jpg”
  • Then in your index.html template you can use (.Resources.ByType “image”).GetMatch “featured**” and use the .Fill method to create thumbnails that fits nicely into the index layout.
  • You can then do similar for the single.html template
1 Like

Check out the custom figure shortcode that I share in this post:

The solution is to expand the figure src argument to include the Page Permalink (if it does not begin with /), and not leave it to be relative.

Many thanks for your suggestions, @bep. I learn many new things and will look into them.
Actually I did not intend to use images in .Summary but as some of the images were within the default 70-word limit. So, by chance I’ve noticed the issue.

@kaushalmodi: your figure shortcode seems a really good idea, thanks. I may prefer to keep the Markdown files in tact and devise a filter shortcode then. Nevertheless, yours is truly an inspiration.

I didn’t quite understand that … But of course the figure shortcode wouldn’t be directly useful to you… I wanted to highlight the tweak that used either | absURL or prefixed the relative link (when src does not begin with /) with the Page Permalink. You should be able to do the same with the Resource image link too.

I didn’t quite understand that … But of course the figure shortcode wouldn’t be directly useful to you…

Indeed your solution is very useful. I tried to replace existing img tags with figure and it worked. For new posts it totally makes sense. Nevertheless, I would prefer not to manually replace/regex every img tag when there are many Markdown files (e.g. migrating from existing blogs).

Thus, it comes to the parts you mentioned, | absURL. It possibly fits better to my preference. I will investigate a bit further and get back in case of figuring things out.

Thanks again, @kaushalmodi.

You should have a look at the manual summary delimiter.