Discussion about tools available and how to handle a "Dynamic Grid" Layout or a "Masonry" type layout display of content within Tiki: articles, blog posts, tracker items, etc.
Let's imagine that we would like to mimic Pinterest-like "cards" layout in Tiki or e.g. this type of display of objects:
http://hhottawa.sparkboard.com/
Like a visual display of elements with sorting in a table by rows first and columns later.
Bootstrap and Masonry
From version 5 Bootstrap allow the integration of an external Javascript to setup a masonry grid system and cards component.
See: https://getbootstrap.com/docs/5.3/examples/masonry/
- Add the script line in your Tiki, Look&Feel, Customization, Custom HTML head content field
- Add the data-masonry attribute to the .row wrapper of your grid.
- If used in a Smarty template, the attribute must be added inside a "literal" block
IE:{literal}data-masonry='{"percentPosition": true }'{/literal}
- If used in a Smarty template, the attribute must be added inside a "literal" block
1.2. Masonry
Code: https://github.com/desandro/masonry
Demo: http://masonry.desandro.com/
MIT licensed
Jonny wrote:
I've been using Masonry (e.g. on http://londonfieldworks.com/Projects and http://jfw-photography.com) and it seems to work ok. Was wondering about including it in Tiki but it's ever so easy to add: Add this to "Custom code just before the closing </body> tag" <script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script> Wrap your list plugin in a div.grid in the wiki page like this: {DIV(class="grid")} {LIST()} {pagination max="100"} {filter field="tracker_id" content="1"} {OUTPUT()}{DIV(class="tile")}{display name="image"}{DIV(class="info")}{DIV(class="h3")}[Project-{display name="object_id"}-{display name="title"}|{display name="title"}]{DIV}{display name="tracker_field_description"}{DIV}{DIV}{OUTPUT} {FORMAT(name="image")}{display name="wikiplugin_img" format="wikiplugin" fileId="tracker_field_mainImage" thumb="y" responsive="n" width="250" default="fileId=1" link=""}{FORMAT} {LIST} {DIV} Then add this to a javascript document ready (in custom.js of a {JQ} plugin) $grid = $('.grid').masonry({ itemSelector: 'div.tile', columnWidth: 350, fitWidth: true }); and finally add your CSS, something like this: .grid { margin: 0 auto; } .tile { cursor: pointer; margin: 0 50px 20px; } .tile .info { width: 250px; padding: 0 18px 20px 0; font-size: 16px; line-height: 1; } ...etc HTH :) jonny
1.3. CSS-only Masonry
This is very simple and achieved using CSS only properties column-count and column-gap and inline-blocks. Inspired by the Creating a CSS-only Responsive Masonry article.
Demo:
Some text for the first "card"
- list item 1
- list item 2
- list item 3
#6 Something else... This is actually a span.
Code:
{HTML()}<style>.masonry {-moz-column-count: 3; -moz-column-gap: 1.5rem; column-count: 3; column-gap: 1.5rem} .masonry > * {border: solid 1px #ccc; border-radius: .5rem; display: inline-block; margin-bottom: 1rem; padding: 1rem; width: 100%} .masonry * {max-width: 100%}</style>{HTML} {DIV(class=masonry)} {DIV()}#1 {img src=display12?x=240}%%%Some text for the first "card"{DIV} {DIV()}#2 Text only item.{DIV} {DIV()}#3 {img src=display13?x=240}{DIV} {DIV()}#4 Here is an ordered list: # list item 1 # list item 2 # list item 3 {DIV} {DIV()}#5 {img src=display14?x=240}{DIV} {DIV(type=span)}#6 Something else... This is actually a span.{DIV} {DIV}
1.3.1. Alternative Row Layout Using CSS Flex Display Property
Demo:
Some text for the first "card"
- list item 1
- list item 2
- list item 3
#6 Something else... This is actually a span
in a p
.
Code:
{HTML()}<style>.flexmasonry {display: flex; flex-wrap: wrap} .flexmasonry > * {border: solid 1px #ccc; border-radius: .5rem; flex-grow: 1; margin: 1rem; min-width: 25%; padding: 1rem} .flexmasonry * {max-width: 100%}</style>{HTML} {DIV(class="flexmasonry")} {DIV()}#1 {img src=display12?x=240}%%%Some text for the first "card"{DIV} {DIV()}#2 Text only item.{DIV} {DIV()}#3 This item has centered image: {img imalign=center src=display13?x=240}{DIV} {DIV()}#4 Here is an ordered list: # list item 1 # list item 2 # list item 3 {DIV} {DIV()}#5 {img src=display14?x=240}{DIV} {DIV(type=span)}#6 Something else... This is actually a -+span+- in a -+p+-.{DIV} {DIV()}#7 {img src=display15}{DIV} {DIV}
We can also easily randomize the order of items using JS and by adding randomize
class to the flexmasonry
div:
{JQ()}$(".randomize > *").each(function() { var nr = Math.round(Math.random() * 100); $(this).css("order", nr); });{JQ}
Result:
Some text for the first "card"
- list item 1
- list item 2
- list item 3
#6 Something else... This is actually a span
in a p
.
1.3.2. Alternative Column Layout Using CSS Flex Display Property
To achieve simmilar result as with columns property we need to limit the height of the flex container.
Demo:
Some text for the first "card"
- list item 1
- list item 2
- list item 3
#6 Something else... This is actually a span
in a p
.
1.3.3. Other masonry related
See:
https://www.openhub.net/p?query=masonry%20layout
1.4. Gridstack.js
Drag and drop support!
Code: https://github.com/troolee/gridstack.js
Sample: https://troolee.github.io/gridstack.js/
MIT licensed
1.5. Shapeshift
Looks very capable but sadly latest commit is 2 years ago :-/
Code: https://github.com/McPants/jquery.shapeshift
Demo: http://mcpants.github.io/jquery.shapeshift/
MIT licensed
1.6. Gridlex
The nicest look and feel but row based (flex row?) layout.
Code: https://github.com/devlint/gridlex
Sample: http://gridlex.devlint.fr/cards.html
Openhub: https://www.openhub.net/p/gridlex/
MIT licensed
1.7. Chewing-grid
A So-So.
Code: https://github.com/tzi/chewing-grid.css
Sample: http://tzi.github.io/chewing-grid.css/
Openhub: https://www.openhub.net/p/chewing-grid_css/
MIT licensed
1.8. Minigrid
The minimalistic.
Code: https://github.com/henriquea/minigrid
Sample: http://jsbin.com/wamele/edit?js,output
MIT licensed
1.9. Others
Perhaps at http://bootsnipp.com ?
Links, etc.
- http://www.fusioncharts.com/blog/2014/09/comparing-jquery-grid-plugins-masonry-vs-isotope-vs-packery-vs-gridster-vs-shapeshift-vs-shuffle-js/ (Last updated on March 22, 2016.)
- {http://jqueryhouse.com/jquery-grid-plugins/} - 40 Best jQuery Grid Plugins
- http://w3bits.com/css-masonry/ - Creating a CSS-only Responsive Masonry (<-- This is cool.)
- Main disadvantage is it allows only order of items by column
Dynamic Grid | Grid Display | Masonry | Cards