Where should an img be placed that will be used in multiple sections?

support
1

Normally, I would place all images in static, but with the introduction of bundles I’m looking for input on this.

Consider the following two structures:

content
  products
    microsoft-surface.md
    _index.md
  companies
    microsoft.md
   _index.md
static
  img
    microsoft-logo.jpg

===

content
  products
    microsoft-surface.md
    _index.md
 companies
    microsoft
      _index.md
     microsoft-logo.jpg

The use case would be to have a company page about Microsoft and show their logo, and on the Microsoft Surface page also show the logo. Which structure is preferable when an image is to be used by two or more sections?

2

I don’t believe there is a better option between the two. It depends on your long term plans for media, and how you reference them in your templates/archetypes.

3

Thanks. Can you elaborate on this please? What should I consider in deciding between the two?

4

One of the advantages of images that live under page bundles is you can do image processing on them, which you cannot do if they live under static.

I’ve seen some folks make a bundle just for shared images, then use templates or shortcodes to reference a given shared image in their other content.

5

Call it from a partial in your templates. If you need it to be a Resource place it under /assets/ or whatever you prefer with the assetDir parameter and then fetch it on the fly with the method resource.Get.

It’s the fastest and most economical way of calling an image multiple times in a Hugo project.

6

Thanks @zwbetz and @alexandros for the helpful comments.