- This topic has 13 replies, 4 voices, and was last updated 6 years, 8 months ago by
Tom.
-
AuthorPosts
-
August 30, 2016 at 8:01 am #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!
August 30, 2016 at 10:32 am #222547Tom
Lead DeveloperLead DeveloperHi 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; }
August 30, 2016 at 12:01 pm #222580David
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.
August 30, 2016 at 1:40 pm #222596David
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.
August 30, 2016 at 2:28 pm #222610Lyle
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.
August 30, 2016 at 3:09 pm #222621Tom
Lead DeveloperLead DeveloperThat’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'; } }
August 31, 2016 at 11:57 am #222837David
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.
August 31, 2016 at 12:17 pm #222844Tom
Lead DeveloperLead DeveloperGrr, 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' ) );
August 31, 2016 at 1:00 pm #222858David
Thanks Tom, that seems to have got it working π
August 31, 2016 at 1:03 pm #222859Tom
Lead DeveloperLead DeveloperAwesome π
October 2, 2016 at 6:40 pm #231277Paul
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.
October 2, 2016 at 11:26 pm #231367Tom
Lead DeveloperLead DeveloperI 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/
October 3, 2016 at 2:23 am #231416Paul
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!
October 3, 2016 at 9:05 am #231606Tom
Lead DeveloperLead DeveloperNo problem! π
-
AuthorPosts
- You must be logged in to reply to this topic.