Skip Navigation

[Resolved] I'm trying to build a grid of custom posts

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

This topic contains 5 replies, has 2 voices.

Last updated by Luo Yang 1 month, 3 weeks ago.

Assigned support staff: Luo Yang.

Author
Posts
#1725951

Tell us what you are trying to do? I have created the custom post "pins". I'd like to have all of the posts display in a grid.

Is there any documentation that you are following? They all mention the Toolset Views -- but looks like that's gone. Do you have a video or documentation on how to create the grid using blocks?

Is there a similar example that we can see?

What is the link to your site?

#1726399

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

Hello,

Yes, it is built-in feature of Toolset Blocks plugin, you can follow below document to setup a Toolset View block, and display it in grid layout:
https://toolset.com/2019/06/visually-create-and-design-views-using-block-editor/

See screenshot:
https://toolset.com/wp-content/uploads/2019/06/views-beta-selecting-output.png

And there is a video in above document, for your reference.

#1726989

Thanks for the help. I set up a grid with 3 columns -- and the preview shows the 3 columns. When I view the page -- each post fills an entire row (no longer 3 columns). I can't figure out how to fix that.

hidden link

#1727737

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

The Toolset Blocks plugin is based on WordPress Blocks editor(Gutenberg editor), but you are using Elementor editor to design the problem page you mentioned above, both Elementor and Blocks editor are page builders, it is not recommend to design the same page/post with two page builders, this will conduct unexpected result.

Please create a new page with WordPress Blocks editor, then follow the document I mentioned above to setup the view block, and test again.

More help:
https://developer.wordpress.org/block-editor/

#1728491

Is there any option to make the height of all items in the row of grid all the same? This page shows what I'm referring to:
hidden link

#1728883

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

It is possible with CSS codes, for example:

.tb-grid-column>* {
    height: 100%;
}

See screenshot same-height.JPG

You can setup above CSS codes in Views Block by following the document I mentioned above:
https://toolset.com/2019/06/visually-create-and-design-views-using-block-editor/
Section "Control the View’s Loop Item", screenshot:
https://toolset.com/wp-content/uploads/2019/06/views-beta-loop-item-settings.png
Click "Custom JS and CSS"