Terms and Category Based Posts Widget support the Masonry framework

Masonry is a JavaScript UI framework and we decided to support it for “Terms and Category Based Posts Widget” from the version 4.6 and higher. The framework do this “masonry” arrangement for posts and much more – we need some time to understand how the framework works – and now we can proudly say, we know a little part of it. This little part in understanding was enough for support thas UI framework.

Masonry with Thumbnail > Position > Background
Masonry with Thumbnail > Position > Background

The problem(s) which Masonry solve and how is unique

Every time we get to deal with the UI framework we discover and learn something new. Therefore, it is difficult to find one suitable set to describe it. Masonry solve many small and big problems in a simple way. For an entry, following remarks:

“Masonry is used for responsive websites, different screen sizes and all mobile devices and without that media-queries must be defined in the CSS file.”

Especially relevant it’s the second UI framework which is added to the core code beside jQuery which must have a reason. That’s why we want to explain how we use it, which features we start implementing with this Masonry framework and which features we want implement with it further versions of our widget.

Edit the Masonry settings with the customizer
Edit the Masonry settings with the customizer

As a result edit the settings with the WordPress customizer, after Terms and Category Based Posts Widget is added to the widget area or with shortcode. Choose in the Styles panel for Layout: Masonry and our posts should rearrange in a masonry pattern. On the screenshots and at the demo.tiptoppress.com page we use post item width or the thumbnails panel width for position. Thumbnails panel width means “background“, so the text, excerpt and other text content is positioned over the image. So you need to define a width for posts which is enough for the Masonry framework to know to make this posts responsive. Change the Browser width and you can see how the post take place of the page width. Once with three columns, two or one.

Hence for the version 4.6 this should be good to use it. And it will be good, you should try it. Simple to use and solve a lot – for responsive webpages.

Responsive webpages and more

Finally in 4.7 we want to implement two other features for Masonry. We want to add pagination and Ajax scripts which perform infinite page loading effects. If you’re interested in grids and columns for your posts we recommend you should try it out.

In Conclusion the masonry feature is available in the 4.6-beta wich we’ll release in a less days. If you’re already interested in a beta version, please write us: http://tiptoppress.com/contact/