Data to accompany images?

64 views
Skip to first unread message

Duane

unread,
Jul 18, 2012, 5:15:00 PM7/18/12
to Bonsai
A recent post asks about image meta data, and I have a similar but
different question.

In a website with a catalog of products (i.e. products have things
like titles, descriptions, and images) how do you go about showing
accompanying data with the images?

For example, I have a subfolder called "images" with product images. I
tried creating a hash key in the default.yml file for the page with an
"images" key, and then adding data about products. That didn't quite
work (the images folder overwrites the "images" key in the yml file).

Is there a "suggested way" of achieving this?

Thanks,
Duane

BTW, I inherited a bonsai project from a colleague and I'm quite happy
with the ramp-up period for understanding things. Thanks for a great
project.

Duane

unread,
Jul 18, 2012, 8:45:10 PM7/18/12
to Bonsai
For future readers:

I'm not sure if this is the best way to do it, but it seems simple
enough. I've created a products.yml file that includes an array of
product hashes, like this:

:products:
-
name: Thing for sale 1
desc: "This is a product for sale"
image: thing1.png
-
name: Thing for sale 2
desc: "This is also a product for sale"
image: thing2.png
-
name: Thing for sale 3
desc: "This is a final product for sale"
image: thing3.png

Then I created an images subfolder, and put the png files in there.
The display loop looks like this:

{% for product in products %}
<div class="display {% cycle 'left', 'right' %}">
<h2 class="headline">{{product.name}}</h2>
<img src="{{product.image | prepend:'images/'}}"
alt="{{product.name}}" />
<div class="content">{{product.desc}}</div>
</div>
{% endfor %}

-- Duane
http://makerhome.ca/
Reply all
Reply to author
Forward
0 new messages