How to show images on post pages if they're located in the assets folder?

support
14

Hi guys,

To be able to access images as resources, I’m doing this:

  1. add the images in “content/media”
  2. add in “content/media” also _index.md as below:

content/media/_index.md

+++
headless= true
title= "Media"
+++
  1. In the page where you need them ex:

content/about.md

---
date: "..."
title: "about"
featuredImage: "media/sample-image.jpg"
---

# About
  1. you can now access them in templates:
{{ $img := .Params.featuredImage }}
{{ $alt := .Title }}

{{ range wit $.Site.Pages }}
    {{ with .Resources.Match $sourceImage }}
        {{ range . }}
            {{ $imageXL := .Resize "..." }}
            {{ $imageL := .Resize "..." }}
            {{ $imageM := .Resize "..." }}
            <picture>
                <source data-srcset='{{ $imageM.RelPermalink }}' type='image/jpg' media='(max-width: 500px)'>
                <source data-srcset='{{ $imageM.RelPermalink }}' type='image/jpg' media='(max-width: 900px)'>
                <source data-srcset='{{ $imageXL.RelPermalink }}' type='image/jpg' media='(min-width: 901px)'>
                <img loading="lazy" data-src='{{ $imageXL.RelPermalink }}' class='lazyload img-fluid' alt='{{ $alt }}' />
            </picture>
            <noscript>
                <img src="{{ $imageXL.RelPermalink }}" alt="{{ $alt }}" />
            </noscript>
        {{ end }}
    {{ end }}
{{ end }}

Hope the above is helping you.

3 Likes