Add Taxonomy Images

[Janet Davis]

Hello,
Is there a way to add taxonomy images so that each category or tag can have it’s ow icon in front of it.

Thank you.
Jan

GeneratePress 2.0.2

GP Premium 1.5.6

[Tom]

I think CSS might be the best bet.

For example, our Development category here on this site:

.category-development .page-header h1:before {
    content: url(URL TO YOUR IMAGE);
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Janet Davis]

Hi Tom,

Thank you but it didn’t do anything. This is what I put in the CSS.

.category-food .page-header h1:before {
content: url(https://simpleorganicguide.com/wp-content/uploads/2018/01/1024-x-682.png);
}

Maybe I am not calling what I am trying to do correctly. I wanted to change the icon before the category and tag label. These are below my blog posts.
By default the icon is a folder for the category, and for the tag it looks like a sales tag. I didn’t see where I could attach a screen shot.

I hope this makes more sense. Thank you
Jan

[Tom]

Ah, I misunderstood.

Try this instead:

.entry-meta .tags-links:before {
    content: url(URL TO IMAGE);
}

.entry-meta .cat-links:before {
    content: url(URL TO IMAGE);
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Janet Davis]

Tom,
Sorry I’m not communicating very well what I am trying to do. Mainly because I am not sure what it is called. I thought it would be simple to add little images before tags and categories. I a not sure if they are called icons, images, or ?. Should I be looking for a plug in that does this? Thank you again?

I used the following code for a tag in my css:

.entry-meta .tags-links:before {
content: url(https://simpleorganicguide.com/wp-content/uploads/2018/01/1024-x-682.png);
}

and it put a huge image on the page.
But it didn’t connect to a specific tag.

[Tom]

To make the image smaller, we can specify a width and height:

.entry-meta .tags-links:before {
    background-image: url(https://simpleorganicguide.com/wp-content/uploads/2018/01/1024-x-682.png);
    background-size: 100% 100%;
    display: inline-block;
    width: 10px;
    height: 10px;
    content: "";
}

When it comes to smaller spaces like this, icons are usually preferred, as the images aren’t large enough to tell what they are.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Janet Davis]

Tom,

Thank you this worked much better.

I will play with it for size.

I appreciate your help!!!
Jan

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts