Loading...
 

Grid

 Note
First of all please note it is a bit confusing name for this page as the Grid term can be confused for Bootstrap Layout Grid system or other Grid systems.
About

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.

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.2. 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:

#1 Image
Some text for the first "card"
#2 Text only item.
#3 Image
#4 Here is an ordered list:
  1. list item 1
  2. list item 2
  3. list item 3
#5 Image

#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.2.1. Alternative Row Layout Using CSS Flex Display Property


Demo:

#1 Image
Some text for the first "card"
#2 Text only item.
#3 This item has centered image: Image
#4 Here is an ordered list:
  1. list item 1
  2. list item 2
  3. list item 3
#5 Image

#6 Something else... This is actually a span in a p.

#7 Image


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:

#1 Image
Some text for the first "card"
#2 Text only item.
#3 This item has centered image: Image
#4 Here is an ordered list:
  1. list item 1
  2. list item 2
  3. list item 3
#5 Image

#6 Something else... This is actually a span in a p.

#7 Image

1.2.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:

#1 Image
Some text for the first "card"
#2 Text only item.
#3 This item has centered image: Image
#4 Here is an ordered list:
  1. list item 1
  2. list item 2
  3. list item 3
#5 Image

#6 Something else... This is actually a span in a p.

#7 Image

See:
https://www.openhub.net/p?query=masonry%20layout

1.3. Gridstack.js

Drag and drop support!

Code: https://github.com/troolee/gridstack.js
Sample: https://troolee.github.io/gridstack.js/
MIT licensed

1.4. 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.5. 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.6. 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.7. Minigrid

The minimalistic.

Code: https://github.com/henriquea/minigrid
Sample: http://jsbin.com/wamele/edit?js,output
MIT licensed

1.8. Others

Perhaps at http://bootsnipp.com ?


Dynamic Grid | Grid Display | Masonry | Cards

Keywords

The following is a list of keywords that should serve as hubs for navigation within the Tiki development and should correspond to documentation keywords.

Each feature in Tiki has a wiki page which regroups all the bugs, requests for enhancements, etc. It is somewhat a form of wiki-based project management. You can also express your interest in a feature by adding it to your profile. You can also try out the Dynamic filter.

Accessibility (WAI & 508)
Accounting
Administration
Ajax
Articles & Submissions
Backlinks
Banner
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Calendar
Category
Chat
Comment
Communication Center
Consistency
Contacts Address book
Contact us
Content template
Contribution
Cookie
Copyright
Credits
Custom Home (and Group Home Page)
Database MySQL - MyISAM
Database MySQL - InnoDB
Date and Time
Debugger Console
Diagram
Directory (of hyperlinks)
Documentation link from Tiki to doc.tiki.org (Help System)
Docs
DogFood
Draw -superseded by Diagram
Dynamic Content
Preferences
Dynamic Variable
External Authentication
FAQ
Featured links
Feeds (RSS)
File Gallery
Forum
Friendship Network (Community)
Gantt
Group
Groupmail
Help
History
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
jQuery
Kaltura video management
Karma
Live Support
Logs (system & action)
Lost edit protection
Mail-in
Map
Menu
Meta Tag
Missing features
Visual Mapping
Mobile
Mods
Modules
MultiTiki
MyTiki
Newsletter
Notepad
OS independence (Non-Linux, Windows/IIS, Mac, BSD)
Organic Groups (Self-managed Teams)
Packages
Payment
PDF
Performance Speed / Load / Compression / Cache
Permission
Poll
Profiles
Quiz
Rating
Realname
Report
Revision Approval
Scheduler
Score
Search engine optimization (SEO)
Search
Security
Semantic links
Share
Shopping Cart
Shoutbox
Site Identity
Slideshow
Smarty Template
Social Networking
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Staging and Approval
Stats
Survey
Syntax Highlighter (Codemirror)
Tablesorter
Tags
Task
Tell a Friend
Terms and Conditions
Theme
TikiTests
Timesheet
Token Access
Toolbar (Quicktags)
Tours
Trackers
TRIM
User Administration
User Files
User Menu
Watch
Webmail and Groupmail
WebServices
Wiki History, page rename, etc
Wiki plugins extends basic syntax
Wiki syntax text area, parser, etc
Wiki structure (book and table of content)
Workspace and perspectives
WYSIWTSN
WYSIWYCA
WYSIWYG
XMLRPC
XMPP




Useful Tools