[Support request] Different icon for each category in Elements

Home Forums Support [Support request] Different icon for each category in Elements

Home Forums Support Different icon for each category in Elements

  • This topic has 11 replies, 3 voices, and was last updated 6 months ago by Fernando.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #2346136
    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.

    #2346483
    David
    Staff
    Customer Support

    Hi there,

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

    #2346766
    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/

    #2346919
    Fernando
    Customer Support

    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

    #2346940
    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

    #2346999
    Fernando
    Customer Support

    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.

    #2349012
    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.

    #2349091
    Fernando
    Customer Support

    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.

    #2349506
    Michelle

    I will give it a go, thanks

    #2350133
    Fernando
    Customer Support

    You’re welcome Michelle!

    #2350145
    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

    #2350184
    Fernando
    Customer Support

    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.

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.