[Resolved] Displaying posts in columns

[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!

[Tom]

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;
}

[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.

[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.

[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.

[Tom]

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';
    }
}

[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.

[Tom]

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' ) );

[David]

Thanks Tom, that seems to have got it working 🙂

[Tom]

Awesome 🙂

[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.

[Tom]

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/

[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!

[Tom]

No problem! 🙂

[Author]

Posts