Classic Recent Posts element limited to 4 posts / how show category and full post title?

[andygmove]

Hello,

I’m trying to add some blog post thumbnails to a site.

I want it to show all posts for a category.

Also, I want the full title of the post to display, and for the post category to display.

Am I using the wrong element? Seems like Classic Recent Posts is extremely limited in customization options. What would you recommend as a solution with Pro theme’s tools?

Thank you!

[prakash_s]

Hello @andygmove,

Thanks for writing to us.

I would suggest you please add the Post element where you set the looper provider as Query builder and then set the category from the taxonomy select box.

Hope it helps
Thanks

[andygmove]

Hi @prakash_s,

Thanks, I appreciate that.

One thing I’m noticing is that the Post element (bottom row in screenshot, no border around posts) has the date before the title, whereas Classic Recents Posts (top row in screenshot, posts outlined in yellow border) has the date below the title.

Is it possible to put the date after the the title, using the Post element?

Also, can I include the post category? I didn’t see that as a query option.

Thank you,
Andy

[prakash_s]

Hello Andy,

In case you want to display the post-filter by the category you need to go to the Post element where Looper provider is set —>customize —>Looper provider —>Query builder and set the category.

Now if you want to display the category you need to insert the Text/headline element and call the dynamic contact code {{dc:term:name}}

If you want to change the order of the Title and Date, you need to go to the article —>The Title(Headline element)—>Call the Date in the heading text box using dynamic content code {{dc:post:publish_date format=‘M. d, Y’}}
and in the subheading, you can call the post title {{dc:post:title}} or you can insert a different Text/Headline element for the title and date where you can insert the date and title dynamic content code as per your design.

Hope it helps
Thanks

[andygmove]

@prakash_s

{{dc:term:name}}

Thank you @prakash_s, this is really helpful.

Take care,
Andy

[prakash_s]

Hello Andy,

Glad that we were able to help you.

Thanks

[andygmove]

Hi @prakash_s,

I got the Posts element working well. It looks good on desktop with three posts per column. However, on mobile I want it to go to just one post per column. Right now it’s still cramming in three posts in a one row

can also see this at https://blog.movementlabs.xyz

I’m trying to target the posts with CSS and not having success with it.

Just to double check, is there a way to specify the mobile style in Cornerstone? I tried changing the row layout in mobile view but it changed the layout for all screen sizes. I didn’t see a way to change the layout for mobile only in Cornerstone.

Any tips on how to make this Posts element mobile reponsive so it goes to one post per column only on moble? (screen max-width: 767px)?

Thank you!
Andy

[andygmove]

Looks like I solved this with

@media (max-width: 767px) {
    .posts-element .post-inner {
        flex-basis: auto!important;
    }
}

but if there’s a way to target specific screen sizes for specific styles in Cornerstone, I’d still be interested in knowing, thank you!

[tristup]

Hi Andy,

You can adjust the number of columns from the Post element as shown in the given screenshot. You can also adjust the number of columns you want in the different screen sizes.

Hope it helps.
Thanks