Webflow Hack: Create a Blog Summary in Webflow Using CSS & Combo Classes


So had import about 600 posts from Wordpress for a client, but had no post summaries for the blog feed so did a quick hack to display a 3 line summary of the legacy posts using custom CSS and a combo class.

Seemed to work well so did a quick how-to post if anyone needs to create a post summary using the rich text field in their CMS collection list by just applying a combo class and pasting in 4 lines of code. Hope this helps some folks: https://www.milkmoonstudio.com/post/create-a-blog-summary-or-excerpt-in-webflow-using-css-combo-classes-without-a-summary-field

The problem with this approach is you are still loading the full content for each post on the page which results in terrible performance and SEO issues.

@webdev In terms of performance I’m not too worried. I’ve styled it to not load images in those sections and then at the same time the pagination is limiting the amount of posts on the page.

For SEO I’ve added a meta tag:
So this will allow Google to ignore the content on the page while still allowing the bot to follow the links and crawl the blog posts, or that what MOZ says anyway.

My response was not based on your implementation, rather a caution to others that may try to implement it without taking this into consideration. Generally speaking it is best to use line-clamp on smaller blocks of text as a way of visually adjusting them to be similar height. I personally would refrain from using it on large content elements due to the reasons I indicated in my previous post. Thanks for sharing!

@webdev Yeah, ideally we can one day convince the client to create summaries for all the posts but right now they just don’t have capacity, however, all post going forward will at least have summaries. I did look into some AI services that summarise large pieces of content, but the ones I tried came back very messed up. Would love Webflow to one day have the ability to limit characters in a field for a excerpt.

I sent a client to https://www.text-summarize.com to help automate the process. They had to do edits but it saved them time.

1 Like