hello everyone
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
idarek
November 11, 2022, 4:25pm
2
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 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 ?
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)}}
2 Likes
thank you so much it’s working I very much appreciate your help
system
Closed
November 13, 2022, 9:54pm
18
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.