Skip Navigation

[Resolved] Need help to create a masonry type grid layout

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.

Tagged: 

This topic contains 2 replies, has 2 voices.

Last updated by Robert Campbell 6 years, 2 months ago.

Assigned support staff: Luo Yang.

Author
Posts
#317936

I am trying to create a masonry style layout within my Toolset based website.

I tried the standard grid layout in views

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<table width="100%">
<wpv-loop wrap="3" pad="true">
[wpv-item index=1]
<tr>
<td>              
[wpv-post-body view_template="Loop item in testgrid"]              
</td>
[wpv-item index=other]
<td>              
[wpv-post-body view_template="Loop item in testgrid"]             
</td>
[wpv-item index=3]
<td>     
[wpv-post-body view_template="Loop item in testgrid"]      
</td>
</tr>
[wpv-item index=pad]
<td></td>
[wpv-item index=pad-last]
<td></td>
</tr>
</wpv-loop>
</table>
<!-- wpv-loop-end -->
[/wpv-items-found]

which gets me to hidden link

But I need to stack the posts in each column in the masonry style.

I've had a look at a few of the third plug-ins but none of them offer enough flexibility in dealing with custom post types and slideshows.

Is it possible to construct a masonry style layout using views? It is such a popular style now so I hope you can suggest a way forward.

Regards

Robert

#318096

Luo Yang
Supporter

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

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

Dear Robert,

Are we talking about the masonry style layout like below site?
hidden link

I suggest you try create a view to output the HTML structure as the document:
hidden link

Hope it help

#318323

Dear Luo

The document is really good, thanks very much.

Regards

Robert