How to show images from the static folder

hello everyone :slight_smile:
i have installed a theme on my website and im facing a problem with images not showing when i upload them on the static folder they only show if i made a separate folder for each post inside the content folder an upload them there.

i have tried modifying the list.html partial and changing this code <img src="{{ $resized.Permalink }}"/> with this one <img src="{{ .Params.image | relURL }}" > but it didn’t work

this is my repo : GitHub - SamHamou/Qalabi

Hardlink

If you got image in static folder like \static\picture.jpg then {{ "/picture.jpg" | absUrl }}

if i used what you are suggesting it will show the same image in all my posts and i don’t want that i want to use different images for every post

Of course. I guess you should adjust the image in your front matter. Instead of

image = "/images/banner-1.jpg
do something like
image = "/banner-1.jpg" _or_ create a directory imagesin/static` and don’t change your front matter.

Hi, i already have the images directory inside static, i think the problem is inside the list.html file since it’s the one responsible for showing the list of posts in my home page, i just don’t know what to change there to make the images appear

Add this to your site configuration:

[[module.mounts]]
source = 'assets'
target = 'assets'

[[module.mounts]]
source = 'static/images'
target = 'assets/images'

Then override the theme’s layout:

mkdir -p layouts/posts
cp themes/less/layouts/posts/list.html layouts/posts/

layouts/posts/list.html

<div class="post-tile">
  {{ $i := "" }}
  {{ with .Params.image }}
    {{ $i = resources.Get . }}
  {{ end }}
  {{ with or $i (.Resources.GetMatch "cover") (index (.Resources.ByType "image") 0) }}
    {{ with .Fill "500x300" }}
      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
    {{ end }}
  {{ end }}
</div>
2 Likes

i have made the changes, but still nothing, the images are not showing

I just cloned your repo, ran hugo server, and visited http://localhost:1313/posts/.

It’s working perfectly.

1 Like

iam using netlify, i’s not working in my blog https://qalabi.netlify.app/ what could be the problem

This looks fine to me:
https://qalabi.netlify.app/posts/

Are you trying to modify the home page?

yes :blush: i want the posts in my home page to show images

If you want to change the home page, you’re editing the wrong template.

isn’t that the partial responsible for showing the list of posts in the home page ?

No.

Your home page is rendered by:
https://github.com/SamHamou/Qalabi/blob/main/themes/less/layouts/_default/index.html

Which calls:
https://github.com/SamHamou/Qalabi/blob/main/themes/less/layouts/partials/post.html

i applied the same changes i made in list.html to post.html but it gave me an error in netlify, so i remove this line(index (.Resources.ByType "image") 0) and the site succeeded to build but the images are still absent

Look at how the partial is called:

{{ partial "post.html" (dict "post" $post "index" $index "ctx" $)}}

To access the page context within the partial you need to use .post instead of just .

diff --git a/themes/less/layouts/partials/post.html b/themes/less/layouts/partials/post.html
index c87d88a..2652007 100644
--- a/themes/less/layouts/partials/post.html
+++ b/themes/less/layouts/partials/post.html
@@ -1,6 +1,10 @@
 {{ $postScratch := newScratch }}
 <div class="post-tile">
-  {{ $image := .post.Resources.GetMatch "cover" | default (index (.post.Resources.ByType "image") 0) }}
+  {{ $i := "" }}
+  {{ with .post.Params.image }}
+    {{ $i = resources.Get . }}
+  {{ end }}
+  {{ $image := or $i (.post.Resources.GetMatch "cover") (index (.post.Resources.ByType "image") 0) }}
   {{ if (eq .index 0) }}
     {{ $size := "1180x630" }}
     {{ $postScratch.Set "coverSize" (printf "%s center" $size)}}
1 Like

thank you so much it’s working :blush: I very much appreciate your help

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.