Skip to content

Tips: category images in your listing

Lodewijk Evers edited this page Dec 21, 2016 · 2 revisions

If you want to add category images you first have to create an image for each category.

Suppose you have 3 categories: Category 1, Category 2 and Category 3

categories:
    name: Categories
    slug: categories
    singular_name: Category
    singular_slug: category
    behaves_like: categories
    multiple: true
    options: { category-1: "Category 1", category-2: "Category 2", category-3: "Category 3" }

Create an image for each category that has the name the same as the category slug. (In this example all images are .png images, you can use other types as long as they are all the same and you update the twig code to match.)

If you place those images in the images folder of your theme it should look like this:

mytheme/images/category-1.png
mytheme/images/category-2.png
mytheme/images/category-3.png

In your twig file you can then list the categories with images like this:

    {% set list = taxonomylist('categories') %}
    <ul>
    {% for item in list %}
        <li>
            <a class="taxonomy-{{ item.slug }}" href="{{ item.link }}" title="{{ item.name }}">
                <img src="{{ paths.theme }}/images/{{ item.slug }}.png" alt="{{ item.name }}">
            </a>
        </li>
    {% endfor %}
    </ul>
Clone this wiki locally