Image path in shortcode

support
1

Hi all,

Apologies if this has been answered already but I can’t find a solution here.

I have a shortcode in my theme called fig.html. It contains:

<figure>

  <img src="images/{{ .Get "img" }}">
  
  {{ with .Get "cap"}}
    <figcaption>
      <p>{{.}}</p>
    </figcaption>
  {{ end }}
  
</figure>

This works just fine with a shortcode like:

{{< fig img="the-image.jpg" cap="the caption" >}}

In both of the following scenarios:

├── content
│   ├── _index.md
│   ├── images
│   │   └── the-image.jpg

and

├── content
│   ├── articles
│   │   ├── single-article
│   │   │   ├── images
│   │   │   │   ├── the-image.jpg
│   │   │   └── index.md

However the exact same shortcode is not working when I use it in markets.md below:

├── content
│   ├── markets.md
│   ├── images
│   │   └── the-image.jpg

It must be a filepath issue because the image url for home page (_index.md) is:

http://localhost:1313/images/the-image.jpg

But in markets.md the img src is:

http://localhost:1313/markets/images/the-image.jpg.jpg

I tried creating a /content/markets/index.md & /content/markets/images/the-image.jpg to replicate the way it works in the /articles/ section, but that generated a list page.

I’m pretty new to Hugo, it must be something obvious. Any leads?

Thanks in advance.

R*

2

To achieve what you want you have to use .Resources in your shortcode.

The image path will always be relative to your content organization without Page Bundles.

If for some reason you don’t want to use the above feature then you should either move your images under /static/ or execute a replaceRE function to remove the part of the path you don’t need.

3

Thanks for your feedback. I do appreciate it. So I think my issue definitely bleeds into content organisation.

My current organisation looks similar to this:

├── content
│   ├── _index.md
│   ├── about.md
│   ├── membership.md
│   ├── newsletter.md
│   ├── contact.md
│   ├── images
│   │   └── img1.jpg
│   │   └── img2.jpg
│   │   └── img3.jpg
│   ├── articles
│   │   ├── first-article
│   │   │   ├── images
│   │   │   │   ├──img1.jpg
│   │   │   └── index.md
│   │   ├── second-article
│   │   │   ├── images
│   │   │   │   ├── img1.jpg
│   │   │   └── index.md

Where I have a bunch of articles and just a few “standalone pages” that I’d like to appear adjacent to the Base URL structure e.g.: site-root/about/ site-root/newsletter/

If I create:

├── content
│   ├── membership
│   │   ├── index.md
│   │   ├── images
│   │   │   ├── img1.jpg

I can probably solve the relative resource problem, but as it stands by doing that I am getting a list.html template rendering at site-root/membership/.

This makes sense according to the documentation because I’ve effectively created a section.

So how to I collate my pages (and their respective images) that are direct children of the site’s base URL?

Thanks for any help you can offer!

R

1 Like
4

I really think that you should check out Page Bundles. You have already organized your content to use them.

See: https://gohugo.io/content-management/organization/#page-bundles

It’s the simplest way currently in Hugo and it also offers image processing.

Or if you want the more involved way check out the readDir and readFile functions to collate your content and images.

5

Thanks again.

I’ve intentionally deployed them for the /articles section, but I don’t get how bundling pages and assets works at the root of /content/. I’ve read the (work in progress) documentation at that page a few times but it still doesn’t make sense to me.

If I’m bundling pages/resources at the root of /content do I need an /images/ DIR in there?

And will I need two different shortcodes for images - one for pages in my /articles, and one for the rest at root.

Thanks again!

6

I never closely read the caption under the first image at:

See: Content organization | Hugo

The illustration shows 3 bundles. Note that the home page bundle cannot contain other content pages, but other files (images etc.) are fine.

The tree in the image reference only shows pages that are children of /blog

image

What would I do to bundle my page/resources and also have them display as site-root/membership/ using my example above.

Sheesh - sorry to be clogging up the board with this but I think I’m stuck between the old and new methods.

7

Glad you figured it out.

8

Sorry to be a bore but I haven’t quite figured it out 100%.
:frowning:

If the home page bundle cannot contain other content pages (per the doc) how do I organise my content such (a) I use bundles exclusively, and (b) I have a bunch of pages that are direct children of the base url e.g:

example.com/about/
example.com/membership/

I hope it’s not something really obvious I’m missing, but to the best of my knowledge that is not reflected in the DIR tree image above.

Thanks much!

9

OK I think I found the same issue already in discussion:

I guess it was a bug in some respects as the discussion testifies. It’s great that it was fixed in v0.35 (I have been running 0.34). Will update hugo!