Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] Displaying posts in columns

Home Forums Support [Resolved] Displaying posts in columns

Home Forums Support Displaying posts in columns

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #222503
    David

    Hello!

    We are setting up our site to display posts in columns, as we prefer having grid-style layouts to masonry. We have figured out how to achieve this, but would like to know if the following would be possible?

    1. On our home page we have 2 columns of posts plus a side bar, but on our category pages we want to have 3 columns of posts and no sidebar. We have worked out how to remove the the sidebar (thanks to the knowledgebase), but can’t seem to make it so that we have 3 columns of posts on the categories.

    2. We like the idea of using the option to have the first post display full width on our home page, and then have two columns of smaller posts below it. However, on our category/archive pages we would prefer it if all the posts displayed the same size.

    3. Finally, Is there any way to reduce the sizes of the images when displayed in columns? For example, on our home page most of the posts (aside from the first full-width one) will only be around 450px wide – so it would be better if these didn’t use the full sized featured images.

    Thanks!

    #222547
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. This filter might help: https://generatepress.com/forums/topic/different-blog-columns-layout-on-specific-category/#post-202965

    2. You could try something like this:

    .category .generate-columns.featured-column,
    .archive .generate-columns.featured-column {
        width: 50%;
        float: left;
    }

    3. Something like this might work:

    .generate-column:not(.featured-column) .post-image img {
        max-width: 300px;
    }
    #222580
    David

    Thanks Tom.

    1. I actually tried this filter already. For some reason it makes all posts single column and full width – even on the home page. I tried adjusting it to target both specific and all categories, and got the same results.

    2. This works (with some minor tweaking) πŸ™‚

    3. Sorry, what I want to do is have smaller images (in file size) show on the category pages – where we are planning on a grid layout (three columns). The concern here is the speed that the pages load.

    #222596
    David

    Realized I can get a three column layout on the category pages with just CSS by doing the following, and then adjusting the width for other screen sizes so they go back to double and single columns:

    .category .grid-50{
      width: 33.32%!important;
    }

    So, the only issue remaining is getting the site to use smaller (file size) images on the category pages instead of pulling in the original, full-sized versions.

    #222610
    Lyle

    Unless I am misunderstanding David’s requirements, this is a snap to do with Tom’s fantastic WP Show Posts plugin πŸ™‚

    I just tried the desired layouts and it works slick πŸ™‚

    Set up 3 Show Posts “Post Lists”, one for the featured post at the top of the home page (1 column, tag = featured), one for the 2 column grid on the home page and one for the 3 column grid on the category “page”.

    Place the first two on the home page and the third on another page named “Category Whatever” and set the Sidebar Layouts accordingly for each page.

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #222621
    Tom
    Lead Developer
    Lead Developer

    That’s definitely one way to do it, Lyle! Thanks! πŸ™‚

    To do it with GP, you should be able to use the generate_page_header_default_size filter.

    So in your conditional it would be:

    add_filter( 'generate_page_header_default_size','generate_change_default_image_size' );
    function generate_change_default_image_size()
    {
        if ( is_category() ) {
            return 'medium';
        } else {
            return 'full';
        }
    }
    #222837
    David

    Thanks Tom & Lyle.

    The plugin could come in handy for the home page.

    I added the conditional to functions.php inside a generatepress-child theme, and regenerated the images but it doesn’t seem to have done anything. Is there anything else I need to do?

    This is what I have in functions.php so far:

    
    <?php
    
    add_filter( 'generate_sidebar_layout','generate_custom_category_sidebar_layout' );
    function generate_custom_category_sidebar_layout( $layout )
    {
     	// If we are on a category, set the sidebar
     	if ( is_category() )
     	 	return 'no-sidebar';
    
     	// Or else, set the regular layout
     	return $layout;
    
     }
    
    add_filter( 'generate_page_header_default_size','generate_change_default_image_size' );
    function generate_change_default_image_size()
    {
        if ( is_category() ) {
            return 'medium';
        } else {
            return 'full';
        }
    } 
    
    ?>

    Here’s the category where I’m expecting to see the images change.

    #222844
    Tom
    Lead Developer
    Lead Developer

    Grr, the filter isn’t integrated into the Blog add-on function. I’ve just made that change.

    If you’re comfortable editing files, you can:

    1. Go to wp-content/plugins/gp-premium/blog/functions/images.php
    2. At the bottom, find:

    the_post_thumbnail('full', array( 'itemprop' => 'image' ));

    And replace it with:

    the_post_thumbnail( apply_filters( 'generate_page_header_default_size', 'full' ), array( 'itemprop' => 'image' ) );

    #222858
    David

    Thanks Tom, that seems to have got it working πŸ™‚

    #222859
    Tom
    Lead Developer
    Lead Developer
    #231277
    Paul

    Hi Tom,

    With regards to the above changes to try and get the theme to use smaller image sizes, can you think of any reason why it wouldn’t work on Macs with Retina displays?

    We’ve looked at the site on a few different machines and the result always seem to be the same – on Macs with Retina screens the original full-sized images show, but on machines with non-retina displays the correct sizes show.

    For example, on the home page, the images are the correct size on non-retina displays (they have 800×450 in the file name), but on Retina displays they are the original full images (and don’t have a size in the file name).

    We’ve tried all the usual tricks – different browsers, and cleared the cache multiple times.

    BTW, this relates to the same site as the original query – David is a colleague.

    My GeneratePress-based portfolio: http://www.pauldixonwebdesign.co.uk

    #231367
    Tom
    Lead Developer
    Lead Developer

    I wouldn’t think the code itself would know if it was being viewed on a retina display or not.

    I wonder if it has anything to do with the responsive image function added in WP 4.4: https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

    #231416
    Paul

    Yes, it looks like it is related to the responsive image function.

    I did a bit of further reading, and it seems like I can use max_srcset_image_width to limit the width on images in the sections I need to (such as the categories).

    Thanks Tom!

    My GeneratePress-based portfolio: http://www.pauldixonwebdesign.co.uk

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