Topic: Blog pattern

[email protected]
March 11, 2024 at 5:21 am
Hi there,

I have created a static page that works like my blog page. I have four WP Query blocks with four different Post Templates inside:
- First row with one, big blog post including image, title, excerpt and date
- Next row with three blog posts without excerpt
- Third row has 2 blog posts including excerpt
- And then three blog posts without excerpt
In order to achive this, I am using the offset parameter in the WP Query.

Now, I want to repeat this layout maybe 3 or 4 times. I feel it would be a bad solution just to duplicate and change the offset due to the following reasons:
- Multiple WP queries consumes more ressources than one.
- Hard to maintain – e.g. change the size of a font in a specifc row-type (I can’t even make the blocks “Reusable” due to the different offset option).
- Weak scaling
- I can make mistakes in the offset option.
Is there another way around using GP Elements, GB etc.?
David
March 11, 2024 at 6:11 am

Hi there,

complex one, if the HTML for the posts in the different rows HAS to be different then you’re into custom loop template development.

If the excerpts could be hidden then it may be possible to treat a single loop with some CSS.

Is it possible to see the page with the loops ?
[email protected]
March 11, 2024 at 6:14 am

Hi David,

I think the HTML has to be different. Also due to the image sizing.

Do you mean PHP by “custom loop template development”?
David
March 11, 2024 at 6:48 am

The image sizing doesn’t really cause an issue, as WP returns all available src-set sizes in the img HTML regardless of the size you choose ( unless you choose Thumbnail ).
And we can provide some PHP to help treat the way WP handles resposnive loading if needed.

MY personal view would be to create a single loop and treat it with CSS to:

a) set the columns
b) hide the excerpt where applicable

Otherwise to change the HTML you could use a GP Content Template in the themes blog and archive pages.
See here for an example solution:

https://generatepress.com/forums/topic/content-template-for-archive-how-to-show-next-post-in-inverse-layout/#post-2393881

For that user he added two layouts inside a single Content Template. and then used the PHP render_block filter to remove the layout he did not require.

Let me know .

March 14, 2024 at 8:15 am

I have added the CSS below in order to set the columns and hide the excerpt.
(isn’t it considered bad to hide an excerpt? Is it considered as black hat SEO by Google?)

However, the issue is the image quality. Check the full and half width images in the bottom of the font page.

.posts_row.pattern > .gb-grid-column:nth-child(1) .excerpt,
.posts_row.pattern > .gb-grid-column:nth-child(2) .excerpt,
.posts_row.pattern > .gb-grid-column:nth-child(3) .excerpt,
.posts_row.pattern > .gb-grid-column:nth-child(7) .excerpt,
.posts_row.pattern > .gb-grid-column:nth-child(8) .excerpt,
.posts_row.pattern > .gb-grid-column:nth-child(9) .excerpt{
	display:none;
}

.posts_row.pattern > .gb-grid-column:nth-child(4){
	width:100%;
}

.posts_row.pattern > .gb-grid-column:nth-child(4) h2{
	font-size:36px;
	line-height:38px;
	font-weight:500;
	margin-bottom:5px;
}

.posts_row.pattern > .gb-grid-column:nth-child(4) img{
	width:100%;
}

.posts_row.pattern > .gb-grid-column:nth-child(5),
.posts_row.pattern > .gb-grid-column:nth-child(6){
	width:50%;
}

.posts_row.pattern > .gb-grid-column:nth-child(5) h2,
.posts_row.pattern > .gb-grid-column:nth-child(6) h2{
	font-size:26px;
	line-height:30px;
	font-weight:500;
	margin-bottom:5px;
}

.posts_row.pattern > .gb-grid-column:nth-child(5) img,
.posts_row.pattern > .gb-grid-column:nth-child(6) img{
	width:100%;
}

David
March 14, 2024 at 2:51 pm

Where can I see this change ?
The home page looks like the old layout
[email protected]
March 14, 2024 at 10:47 pm

The last 9 post is new. They are in a single WP Query with the wrapper class “pattern”.

I left the original rows in order to keep the site usable.
David
March 15, 2024 at 2:09 am

Ah ok
You will need to set the featured Image Block to display a larger attachment.
And for mobile, see my reply here:

https://generate.support/topic/image-size-vs-pagespeed/#post-95379

It will tell the browser to load the smaller image size on small screens.
[email protected]
March 15, 2024 at 9:49 am

The issue is also at the desktop version. Here, the big image is used for the small columns even tough there is another version that fits very well.
David
March 16, 2024 at 5:05 am

Without building custom templates there is no easy solution for that.
However I would not be overly concerned that a larger image is being loaded on desktop, as those devices are generally going to be on wifi or a wired network.
[email protected]
April 3, 2024 at 11:37 pm

Hi David,

Sorry for my late reply due to holidays.

Are you by “custom template” meaning building the template directly in PHP?

Would it be possible to use the render block filter in order to walk through the HTML and insert the right image?
David
April 4, 2024 at 7:29 am

Are you by “custom template” meaning building the template directly in PHP?

Yes, or custom blocks.

Using render_block not saying its impossible but it would be tricky.
As you would need to pass down the “post count” from the query loop to figure out which size image to render. But you’re into a real custom development there.

I would personally measure if the performance on desktop is being adversely effected by the larger images.
[email protected]
April 17, 2024 at 7:53 am
That seems like a dead end – apart from the custom template. But we are not into that at the moment.

I will go with the mobile friendly solution here: https://generate.support/topic/image-size-vs-pagespeed/#post-95379

I have modified the function to this. However, it does not seem to have any effect.
```
function db_modify_srcset_sizes($sizes, $size) {
	if (is_front_page()){
		$sizes = '(max-width: 420px) 390px, (max-width: 1024px) 800px, 100vw';
	}
	
	return $sizes;
}
add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);
```
Ying
April 17, 2024 at 9:14 am

Most high resolution mobile devices use 2x screen width as the standard to load the images, so if you set the image size to 390px on screens that are narrower than 420px, it will likely load 780px width image, if this size is not available, it will load the closest one.

For example, if you want it to load the medium-size image which is 300px width by default, then it should be:
$sizes = '(max-width: 420px) 150px, (max-width: 1024px) 800px, 100vw';
[email protected]
April 17, 2024 at 9:37 am

Hi Ying,

Interesting! I just want to load a smaller version for mobile devices. I have the following image sizes. what would be good for a full width mobile image?

thumbnail: 150×150 pixels (Tilpasset beskæring)
medium: 300×300 pixels (proportionelt skaleret for at passe ind i dimensioner)
medium_large: 768×0 pixels (proportionelt skaleret for at passe ind i dimensioner)
large: 1024×1024 pixels (proportionelt skaleret for at passe ind i dimensioner)
post-main-image: 1195×675 pixels (Tilpasset beskæring)
page-main-image: 800×450 pixels (Tilpasset beskæring)
post-loop-medium-image: 390×220 pixels (Tilpasset beskæring)
post-loop-small-image: 255×145 pixels (Tilpasset beskæring)
woocommerce_thumbnail: 300×300 pixels (Tilpasset beskæring)
woocommerce_single: 600×0 pixels (proportionelt skaleret for at passe ind i dimensioner)
woocommerce_gallery_thumbnail: 100×100 pixels (Tilpasset beskæring)
Ying
April 17, 2024 at 10:19 am

I think using medium_large would be fairly good, so something like this, and it will load the 768px image on mobile.
$sizes = '(max-width: 420px) 384px, (max-width: 1024px) 800px, 100vw';

But if you want to load post-loop-medium-image: 390×220 pixels, then just change 384px to 195px.

Viewing 16 posts - 1 through 16 (of 20 total)

1 2 →

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Blog pattern