[Support request] Different icon for each category in Elements

[Michelle]

In Elements, I created a template with a Headline block set to show dynamic categories (4 categories total). I see how to add an SVG icon, but don’t know how to make the icon dynamic as well. I want each category to have it’s own icon.

[David]

Hi there,

thats much more complicated and not something built into dynamic data options.
How would WP know what icon belongs to what category ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michelle]

I tried approaching this a different way. I created a Category/Taxonomy image field with “image array” using Advanced Custom Fields (so far, so good), and will have to use a png icon instead of svg (I think). The field shows up in the Categories edit page. I am now trying to figure out what code I will need for the next step.

I saw this online, and am wondering if a variation of this could work, added in snippets:

add_action( 'loop_end', 'output_before_taxonomy_loop' );
function output_before_taxonomy_loop(){
	if (is_tax()) {
		
		// Display category/taxonomy image
		$queried_object = get_queried_object();
		$taxonomy = $queried_object--->taxonomy;
		$term_id = $queried_object->term_id;
		$terms = get_field( 'category_image', $taxonomy.'_'.$term_id);
		
		if( $terms ) {
			
			echo '<img src="'. $terms['url'] .'" />';
		    
		} else {
		    //do nothing
		}
   
	}
}

Here is a link I was looking at: https://themightymo.com/display-image-taxonomy-advanced-custom-fields-acf/

[Fernando]

Hi Michelle,

Can you share the link where you’re trying to implement this?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Michelle]

Sure. I attached the page and login credentials below.

One category is AM (morning post) The icon should be a sun
One category is PM (nightly post) The icon should be a moon
One category is Lite The icon should be a feather
One category is Subscriber (posts only for subscribers) The icon is our site logo

[Fernando]

To clarify, are you trying to create a Query Loop, with a category Headline Block in each post, and beside this, you want to display an image depending on the Category? If so, do all your posts contain just One category?

Let me know, I’ll try to think of the best way to approach this.

[Michelle]

Yes, this is what I’m trying to do. I will only have one category per post.

What I’ve done so far is add an ACF field to create a post meta box where I can manually put the category name in, and attached an icon. (If I leave the box blank, no icon shows.) It would be great to not have to do this manually each time.

On a side note, I’m having trouble using the query loop design as the template for my Single post and archive pages. I’ve tried creating a Block Content Template, but must be doing something wrong. The icons I’ve added in the query loop aren’t showing up, even when I add them to the Elements Block Content Template.

[Fernando]

I believe it would be best to this through ACF with a custom field type of Radio Button. So you can select if it’s going to be AM, PM etc.

Then you can have a GB Image Block, and a GB Headline Block, and alter the output of these two depending on the radio button.

Using categories for this wouldn’t be ideal.

[Michelle]

I will give it a go, thanks

[Fernando]

You’re welcome Michelle!

[Michelle]

I am finding this challenging.

Is this something that you would recommend?
https://github.com/cyberwani/ACF-Image-Select

or this?
https://support.advancedcustomfields.com/forums/topic/is-there-an-image-radio-field/

I don’t see how to set images to choose from the radio buttons

[Fernando]

I’m not sure about those methods. It would be best to ask ACF support regarding that.

With regards to the Radio Button, there should be one in ACF: https://share.getcloudapp.com/7KukpOry

If you use a GB Headline Block, you should be able to retrieve the value of that radio button.

As for the image, we can base the image source relative to the option selected through custom code.

[Author]

Posts