Prepend text to each array item

Help
#1

I have an array of categories in my yaml data file such as:

category: [travel, landscape]

I then render that within a for loop as:

{% assign item_classes = photos.category | join: ' ' %}
<div class="{{ item_classes }}">

which shows as:

<div class="travel landscape">

However I’d like to prepend some text to each class.

If I try:

<div class="category-{{ item_classes }}">

It shows as:

<div class="category-travel landscape">

As you can see only the first item in the array gets category prepended so I can’t figure out how to get:

<div class="category-travel category-landscape">

#2

hacky but may work:

{% assign item_classes = photos.category | join: ' category-' %}
<div class="category-{{ item_classes }}">
#3

This does not look like a for loop to me…

What you could do instead is…:

{% for entry in photos.category %}
  <div class="category-{{ entry }}">
    Lorem ipsum dolor
  </div>
{% endfor %}