[Resolved] Categories on Archive page

Home Forums Support [Resolved] Categories on Archive page

Home Forums Support Categories on Archive page

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #891626
    Werner

    Hello,

    Is it possible to display the categories of the blog posts on the archive page, instead of the individual posts? And can I attach featured images to those categories? Thanks!

    #891670
    David
    Staff
    Customer Support

    Hi there,

    so Tom provides a similar solution here that creates a shortcode for outputting a category grid on a static page:

    https://generatepress.com/forums/topic/grid-gallery-of-category-images/#post-871841

    #891714
    Werner

    Hi David,

    Thanks, that is great. Where do I have to put the shortcode (not the CSS)?

    #891867
    David
    Staff
    Customer Support

    The shortcode function is PHP – this article explains:

    https://docs.generatepress.com/article/adding-php/

    Once the function is added just add the shortcode [category_grid] to the page.

    #891886
    Werner

    That is wonderful, thanks. How can I now customize the way this grid looks? I would like to change the font size of the category titles and the images should all be in the same size as well.

    #891905
    David
    Staff
    Customer Support

    Could you link us to a page where you have added the shortcode i can then provide some CSS.
    You can edit your original topic and use the Site URL to share the link privately.

    #891925
    Werner

    Done. This page is merely for testing that feature.

    #891987
    David
    Staff
    Customer Support

    Remove the CSS that was on the link as it was just the basic setup and has no responsive settings and use this:

    /* Set Image size and force to fit */
    
    .category-item img {
        min-height: 250px;
        object-fit: cover;
    }
    
    /* Style title */
    
    .category-item h3 {
        font-size: 24px;
        color: #000000;
        font-weight: 500;
    }
    
    /* Create Grid Mobile */
    
    .category-grid {
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 1em;
        margin: 1em 0 !important;
    }
    
    /* Grid Tablet */
    @media (max-width: 768px) and (min-width: 420px) {
        .category-grid {
            grid-template-columns: repeat(2, 50%);
        }
    }
    
    /* Grid Desktop */
    @media (min-width: 769px) {
        .category-grid {
            grid-template-columns: repeat(4, 25%);
        }
    }
    #892060
    Werner

    Thank you so much, David! Hopefully my last questions:
    (1) What would I have to do so that the images themselves link to the categories, just like the titles?
    (2) How can I increase the gap between the images?
    (3) How to center the grid?

    #892640
    David
    Staff
    Customer Support

    So first off use this code for the shortcode, i simply moved the closing anchor tag to include the image:

    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>';
    					
    
    					if ( function_exists( 'z_taxonomy_image' ) ) {
    						z_taxonomy_image( $category->term_id );
    					}
    					echo '</a>';
    					$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();
    	}
    } );

    Then i can take a look at the CSS for the other things.

    #898316
    Werner

    Thank you, I have worked out the CSS I needed.

    #898688
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.