Keep images & content together

I don’t find that to be the case. Standard markdown image links work fine for bundled images here …

Thanks for the corrections. I have some experiments to do then.

Do they? Last time I checked Hugo couldn’t find them.

Calling .Resources in the template without shortcodes generates the Bundle images but the markdown syntax images in a Bundle content file render as broken images in the source of the generated page.

Markdown syntax images are different from .Resources images as far as I know.

I would love for them to be the same but that is simply not the case.

As long as you canonicalize the figure link, it works…

Here’s an example from my site:

Look for the figure shortcode in the Markdown source.

I saw the figure shortcode in your markdown. It’s a shortcode not a plain markdown syntax image in the form of ![alt](some.jpg) and I thought that this is what @bluefuzz meant.

The plain Markdown image link would also work, if you create a shortcode to canonicalize the image link…

![foo]({{< canonicalize "images/bar.png" >}})

I would do that if I didn’t want to use the figure shortcode.


Haven’t tried but may be setting canonifyURLs to true also does the same, and then you might not need that shortcode.

I’ve already done that and posted about it above. My hack puts the shortcode within the angle brackets that are meant for the alt attribute of a markdown image.

I’ll try yours. I’m curious to see if the image gets rendered in an editor with Markdown preview with your version.

No it doesn’t. It’s the old catch 22 pre Page Bundles. Hugo cannot find assets alongside content files. That’s why Page Bundles were developed.

Hmm. Perhaps I misunderstand, but I can’t get them to not work. IOW I can link to any image in a bundle folder directly with a standard markdown ![MyImage](myimage.jpg) without doing anything clever. I don’t know how to do anything clever … :wink:

@bluefuzz
That image link will break if that happens to end up in your post summary, and you are printing post summaries on your homepage or a section page.

After the R&D about baseURLs with subdirs in the other thread, I have updated my figure shortcode. The absURL doesn’t do the “right thing” if the baseURL has a subdir… this update to my custom figure shortcode fixes that.

Sure. I’m aware of that, but straight images in the content seem to work fine.

1 Like

That’s what my experience is too. So I am not aware of the catch 22 issue that @alexandros mentioned… It could also be that whatever that issue was got fixed once the Page Bundles feature was added… admittedly I didn’t try putting image in content dir before that happened.

1 Like

Ok. I just had to see this with my own eyes @kaushalmodi and @bluefuzz and you’re both right.

Cool. This wasn’t the case with Page Bundles when they were first released in Hugo around 0.32-0.33 (I had tested again and again because I work mainly with images).

This must have been fixed at a later Hugo version and I hadn’t noticed. Thank you both for the heads up.

You’re welcome. Sadly, vanilla markdown’s lack of support for classes on anything makes the point rather moot.

You can always do something like this:

{{ .Content | replaceRE "<p><img" "<figure><img" | replaceRE "></p>" "></figure>" | safeHTML }}

You can adapt it to add whatever classes or HTML you need.

People complain about Blackfriday wrapping everything in <p> tags but this quirk is particularly useful in cases like this.

Also you can do the above for a specific post type if you don’t need it site-wide.

:wink:

So maybe I’m daft, but how does one go about doing what you say? I’d like to have images along side a blog post, and have those image show up on my homepage which lists the most recent 5 or so posts.

Just download my custom figure shortcode that I linked earlier and save it to your site’s shortcodes directory in layouts. And then use the figure shortcode as usual.

Then, even if the summaries showing up on the home page have the images from page bundles, they will show up fine.

I have been battling with this issue today and came up with a “decent enough” solution for myself that supports the standard markdown image reference but will append the relative location of page level images where needed. This supports using standard markdown for both page bundle level images as well as images in the static directory.

TL;DR - The code finds all images by the src indicator, determines if they are in the page resources, and adds in the relative location before the image source. I would recommend limiting the scope of this to a specific page type where needed.

This code is fairly brittle but works for my narrow use case. I’m not strong in Go and fairly new to Hugo so let me know if this can be improved. :slight_smile:

<section class="container page">
   <article>
     <header>
       <h1>{{ .Title }}</h1>
     </header>
     <div class="container gallery">
       {{ $imgs := findRE "src=\"(.*?)\"" .Content }}
       {{ $link := replace .Permalink .Site.BaseURL "" }}
       {{ $resources := .Resources }}
       {{ $scratch := newScratch }}
       {{ $scratch.Set "Content" .Content }}

       {{ range $imgs }}
           {{ $imgRef := strings.TrimRight "\"" (substr . 5) }}
           {{ if $resources.Match $imgRef }}
               {{ $replace := $imgRef | printf "%s%s" $link }}
               {{ $scratch.Set "Content" (replace (string ($scratch.Get "Content")) $imgRef $replace) }}
           {{ end }}
       {{ end }}
       {{ safeHTML ($scratch.Get "Content") }}
     </div>
   </article>
 </section>
2 Likes