What are the Pros/Cons of adding resources to Content Folder (in branches) vs. Static Folder?

support
3

In Markdown files, your inline image references will use the files from /static/:

I made [a picture](/images/a-picture.jpg).

will use /static/images/a-picture.jpg.

It is a convention to use page bundle resources only from subdirectories. You might use directories further up, also. Given you had nice long holidays and you want to publish some posts about it. You already have to images organized as you like it:

images/
  - 2019-10-25 Haloween costumes/
  - 2019-10-30 Haloween preps/
  - 2019-10-31 Haloween at home/
  - 2019-10-31 Haloween dinner/
  - 2019-10-31 Haloween walk/

and you want your URLs to be /blog/haloween-2019/(costumes|preps|at-home|dinner|walk), you might consider this directory layout:

/posts/haloween-2019/index.md
/posts/haloween-2019/images (below here comes the layout from above)
/posts/haloween-2019/costumes/index.md
/posts/haloween-2019/preps/index.md
/posts/haloween-2019/at-home/index.md

Now your costumes/index.mds front matter would look like this:

---
resources:
- src: "../images/2019-10-25 Haloween costumes/DCP088.jpg"
  name: title-image.jpg
  title: "All our costumes finally finished"
  params:
    persons:
    - Peter
    - Jane
- src: "../images/2019-10-25 Haloween costumes/DCP022.jpg"
  title: "The ghost"
- src: "../images/2019-10-25 Haloween costumes/DCP001.jpg"
  title: "Ready to get started"
- src: "../images/2019-10-31 Haloween walk/DCP217.jpg"
  title: "In action"
---

Sadly you can not use markdown syntax to reference resources. You can either write native HTML:

<img src="{{ .Resources.Get('title-image.jpg').RelPermalink }}" />

Or you create a shortcode like this in a file /layouts/shortcodes/img.html:

{{ $img := $.Page.Resources.GetMatch (.Get 0) }}
<img src="{{ $img.RelPermalink }}" />
}}}

And use it like this:

{{< img "title-image.jpg" >}}

Lastly, resources can be used over hierachies (spell "Give me all title-image.* from /blog/haloween-2019/ and filtered for stuff like thumbnails:

File /layouts/shortcodes/img-thumb-gallery.html:

<section class="gallery">
    {{ range $.Page.Resources.Match (.Get 0) }}
    <a href="{{ .RelPermalink }}">
        <figure style="width: {{ $.Site.Params.imgThumbSize }}px">
            {{ $thumb := .Fill (printf "%vx%[1]v" $.Site.Params.imgThumbSize) }}
            <img src="{{ $thumb.RelPermalink }}" alt="{{ .Title }}" />
            <figcaption>{{ .Title }}</figcaption>
            <ul class="visible-persons">
            {{ range .Params.persons }}
              <li>{{ . }}</li>
            {{ end }}
            </ul>
        </figure>
    </a>
    {{ end }}
</section>

Use it like this:

{{< img-thumb-gallery "../images/**/*.jpg" >}}

This will show thumbnails of the last three images with their description below. They link to the original size image.

Also, resources can have arbitary metadata (like persons in my example).

Consider: not everything I wrote is tested :blush:

2 Likes