[Support request] How can I achieve Masonry on my blog page?

[Michelle]

The excerpts on my blog page vary in length because I am using custom excerpts. Is there a way to make the blog layout masonry so the blog posts beneath don’t have varying gaps above?

https://imgur.com/xnzoobE

https://imgur.com/btGOIA2

Or–alternatively, how can I make my excerpts end evenly? (Perhaps character counts instead of word counts?)

[Fernando]

Hi Michelle,

In Appearance > Customize > Layout > Blog, there’s a “Display posts in masonry grid” setting. Reference: https://docs.generatepress.com/article/using-columns-in-the-blog/

In Appearance > Customize > Layout > Blog, you can also set an Excerpt word count. Reference: https://docs.generatepress.com/article/blog-content-layout/

[Michelle]

Thank you, but I’m using query loops and elements (also Custom excerpts). The word count settings work, but since long words have several characters and short words have few, the excerpts don’t have the same amount of lines so the Read More buttons are not uniform across grids. Any design advice is appreciated.

[Fernando]

I see. Query Loops don’t have a Masonry feature yet.

Does this excerpt length setting not work?: https://share.getcloudapp.com/llugPv2X

Moreover, in the upcoming update for GB which should come out hopefully before the month ends, you should be able to align the Read More button you have at the bottom for the posts in the Query.

[Michelle]

The update will be wonderfully helpful!

As for the excerpt length setting shown in your screenshot: Right now I have it set at 25. It isn’t 25 characters, it isn’t 25 words, so what is “25” referring to? I have a grid of 3 across. The left excerpt, middle, and right are all different lengths.

https://imgur.com/N6rrJle

If I change the setting to 50, they all show longer excerpts, but none of them are the same.

UPDATE– I found that manual excerpts work well with excerpt length settings because they truncate off when they reach the set length but CUSTOM excerpts sometimes show in their entirety, ignoring the excerpt length settings.

[Fernando]

It’s word count, not character count.

I see. You’re using a Custom Excerpt. This overrides the excerpt count settings.

You can try adding trim-cu-excerpt to the Headling Block for the excerpt.

Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

Then, add this snippet:

add_filter('generateblocks_dynamic_content_output', function($content, $attributes, $block){
	if ( ! is_admin() && ! empty( $attributes['className'] ) && strpos( $attributes['className'], 'trim-cu-excerpt' ) !== false ) {
		$content = substr($content,0,30) . '...';
	}
	return $content;
}, 10, 3);

[Michelle]

FERNANDO! You’re a genius!

I am so happy with this. It looks so much better.

Thank you!

[Michelle]

Oh…I do have one more concern. Which part of the snippet sets how many words to show? The back end editor shows the correct excerpt length when I adjust it, but the front end only shows a small portion of the excerpt.

Setting:
https://imgur.com/pjfxiuP

Back End:
https://imgur.com/NfoZoWx

Front End:
https://imgur.com/JiF3Y74

UPDATE:

I think I figured it out. I changed this part (it must be a character count)

https://imgur.com/d67gqkg

[Michelle]

Thank you again!

[Fernando]

Yes, you’re correct. That value alters the excerpt length.

You’re welcome, Michelle!

[Author]

Posts