Associate and display an icon image with taxonomy categories

Support
1

Hello, I’ve begun experimenting with Grav and perhaps this is a basic question since I haven’t been able to find a similar question here.

I’d like to display an image in a sidebar based on whatever name is present in a (blog) post’s taxonomy category.

In other words, suppose I have 20 blog posts that each include a category called Dog, then whenever someone looks at one of those posts, the same image associated with Dog would display.

Is there a good way to do something this?

2

You’d need to extend a blog item template and add that icon depending on a category

4

Thanks, not sure I’ve actually done the right thing but your hint got me looking at some things that helped figure out a way to (I think) do this.

5

@owlyph, Would you mind sharing your solution? It might help someone else some day…

6

Certainly, here I’ll explain what I did below. One caveat though, I’m certainly no professional and I am fairly certain that there are more elegant/better ways to accomplish what I did. It is working for what I wanted though.

I’ve been extending the Gateway theme and in that theme there is a sidebar.html.twig that is useful for showing various things in a sidebar blog-like format.

As mentioned, I wanted to show an image that is associated with a category, in that sidebar, depending on what is being browsed next to it.

In most cases that would probably be a blog post (which would have 1 or more categories–though I only want the first) but it could also be if someone were to click on the category name to see all posts in the category. Furthermore, I’ve organized my site in 4 main topical sections (these are top level pages, with many child pages). Those sections do not have categories (because they’re at a “higher” hierarchy concept level) but they each have an icon that I want to appear in the place where a category image would otherwise have appeared in the sidebar. I added a metadata.section to those pages to help me distinguish them.

So, I put the following in my sidebar.html.twig and made a new template in partials/catimageassoc.html.twig that I use to associate each category (or section) with a specific image.

{% if uri.params != '' %}
<aside class="widget widget_caticondesc">
	<h2>{{ uri.param('category') }}</h2>
    {% include 'partials/catimageassoc.html.twig' %}
</aside>

{% elseif page.header.metadata.section|string(1) %}
<aside class="widget widget_caticondesc">
	<h2>{{ page.title }}</h2>
	<img src="user/themes/mytheme/img/catimage/{{page.header.metadata.catimage|e}}"></img>
	<p>{{ page.header.metadata.metadescription|e}}</p>
</aside>

{% elseif page.taxonomy.category != '' %}
<aside class="widget widget_caticondesc">
    {% include 'partials/catimageassoc.html.twig' %}
</aside>

{% endif %}

And in my catimageassoc.html.twig file I have the following:

{% block content %}
	{% set catname = page.header.taxonomy.category|first|string %}
	{% set catnameb = uri.param('category') %}
		
	{% if catname|contains('First Name') or catnameb|contains('First Name') %}
	<img src="../user/themes/mytheme/img/catimage/firstname.png"></img>
	{% endif %}
	
	{% if catname|contains('Second Name') or catnameb|contains('Second Name') %}
	<img src="../user/themes/mytheme/img/catimage/secondname.png"></img>
	{% endif %}

	{% if catname|contains('Third Name') or catnameb|contains('Third Name') %}
	<img src="../user/themes/mytheme/img/catimage/thirdname.png"></img>
	{% endif %}
{% endblock %}

I just put 3 category (or section) names there for the sake of an example but my actual file has 16.

1 Like
7

@owlyph, Thanks!

By the way:

  • An <img> tag does not have a closing tag.

  • Instead of <img src="../user/themes/mytheme/img/catimage/firstname.png"></img>, you could use:

    <img src="/user/themes/quark/images/favicon.png" >
                    or
<img src="{{ url('theme://images/favicon.png') }}" >
                    or
{{ page.media['theme://images/favicon.png'].html | raw }}
2 Likes