I have created a data file with images which I use normally for posts.
ImageKey:
- url: "/assets/logos/Image.png"
title: "Image Title"
Now I want to use this image paths in my post headers.
---
layout: page
image:
- site.data.images.ImageKey
---
And my HTML looks like
{% for image in page.images %}
<div>
<div class="img-thumbnail">
<img class="img-responsive" src="{{site.baseurl}}{{image.url}}" alt="{{image.title}}">
</div>
</div>
{% endfor %}
But anything is wrong here. There will no picture be rendered.
It works if I use values in the fronter matter directly.
---
layout: page
image:
- url: "..."
title: "..."
---
I have the problem / request solved.
My _data\images.yml
looks like
Image_Key_Name
url: /assets/file.png
alt: ....
title: ....
copyright: ....
My _posts\postXYZ.md
---
layout: post
author: Ben
titleImages:
- Image_Key_ Name
- Another_Image_Key_Name
abc...
---
And my _layouts\post.html
now iterates over the keys and uses them as array index.
<div class="title-images">
{% for titleImageKey in page.titleImages %}
{% assign titleImage = site.data.images[titleImageKey] %}
<img src="{{site.baseurl}}{{titleImage.url}}" alt="{{titleImage.title}}" />
{% endfor %}
That's it!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With