Happy Halloween! Get 20% off GP Premium with the discount code: HALLOWEEN20

[Resolved] Grid/gallery of category images

Home Forums Support Grid/gallery of category images

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #868103
    Callista

    Hi Tom and all,
    I have been trying to figure out how to do this for days with plugins, etc. But maybe there is a simple solution? I want to display on a “Categories” page and a section on my homepage and “Start Here” pages, a grid or gallery view of my categories with their featured images or thumbnails, similar to what you can do for post archives using the blog module in GP Premium or with WP Show Posts. I’m not trying to show actual posts, but the category name, with an image, and maybe a description, that links to that category archive page. Can GP do this? Or am I better off just creating images for my categories, uploading them, creating a gallery, and linking them to the archive pages individually (ie doing it manually)?
    Thanks so much!
    Callista

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #868197
    Tom
    Lead Developer
    Lead Developer

    Hey Callista,

    This is something David has asked me to add to WP Show Posts for a while now, but I haven’t figured out a good way to do it.

    It’s not something that GP can do by default either, unfortunately.

    Have you considered just using the Columns block in Gutenberg and manually adding the categories? Or does that not work for you?

    Let me know 🙂

    #868682
    Callista

    Hi Tom,
    Thanks for getting back to me so quickly! I suspected as much… I’m using the Classic Editor (don’t like Gutenberg), with Elementor on the homepage. I can do it manually. It seems like that’s going to be the simplest solution at this point in time. Thanks for confirming that for me! Let me know if you do ever figure it out.
    Have a great day!
    Best,
    Callista

    #868844
    Tom
    Lead Developer
    Lead Developer

    Let me think on it – there might be a simple way to build a shortcode that does it for you. I’ll update you tomorrow 🙂

    #868866
    Callista

    Thanks so much, Tom! 🙂

    #870782
    Tom
    Lead Developer
    Lead Developer

    Playing with this. How are you adding featured images for your categories? Are you using a specific plugin?

    #870821
    Callista

    Hi Tom!
    I’ve tried all 3 of these plugins, and I’m not sold on any one of them so far.

    • Post Category Image With Grid and Slider is promising, but has less than 1k installs. Plus the grid output was not visually appealing and would need some CSS.
    • Categories Images has the most installs at over 80k and seems to do the job well enough, but hasn’t been updated in a year and its support forum seems to go unanswered, so I am not sure I should be using it.
    • I might go with Category and Taxonomy Image, which has 6k installs and was updated 3 months ago – although again, the support forum seems silent.

    I suppose I could also add some code myself, but a plugin is just a simple way to do it. I fear I might break something if I start trying to write my own code.

    I also tried Advanced Custom Fields, but that was overkill. And, although I could create an image field for the category, that field didn’t show up in the category table on the right side. I’m sure there’s a way to do it but I didn’t feel like investing the time to learn how to do it.

    If you have any suggestions as to the best plugin (or other method) to add images to categories, I’m all ears! Something simple, lightweight, and trustworthy would be ideal.

    I appreciate you looking into this for me (and for everyone else!).

    Have a great day!
    Callista

    #870991
    Tom
    Lead Developer
    Lead Developer

    K, let me do some testing and I’ll post the solution ASAP 🙂

    #871841
    Tom
    Lead Developer
    Lead Developer

    So here’s a shortcode you could use:

    add_shortcode( 'category_grid', function() {
    	$args = array(
    		'orderby' => 'name',
    		'order' => 'ASC',
    		'hide_empty' => 1,
    	);
    
    	$categories = get_categories( $args );
    
    	if ( $categories ) {
    		ob_start();
    
    		echo '<div class="category-grid">';
    
    			foreach ( $categories as $category ) {
    				echo '<div class="category-item">';
    					echo '<a href="' . get_category_link( $category->term_id ) . '">';
    						echo '<h3>' . $category->name . '</h3>';
    					echo '</a>';
    
    					if ( function_exists( 'z_taxonomy_image' ) ) {
    						z_taxonomy_image( $category->term_id );
    					}
    
    					$description = term_description( $category->term_id );
    
    					if ( $description ) {
    						echo '<div class="category-description">';
    							echo $description;
    						echo '</div>';
    					}
    				echo '</div>';
    			}
    
    		echo '</div>';
    
    		return ob_get_clean();
    	}
    } );

    And this CSS will put it in a simple grid:

    .category-grid {
        display: flex;
        flex-wrap: wrap;
    }
    
    .category-item {
        padding: 40px;
        width: 25%;
        box-sizing: border-box;
    }
    
    .category-item img {
        margin-bottom: 20px;
    }

    This is using this plugin for the image: https://wordpress.org/plugins/categories-images/

    #872017
    Callista

    Again, this is amazing! Perfect and ready for styling!
    I so appreciate all your hard work on this and the other questions I had.
    Have a great day!
    Callista

    #872056
    Tom
    Lead Developer
    Lead Developer
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.