iPhone iPhone Landscape iPad iPad Landscape Desktop Wide Screen

Tiles layout

The Tiles layout is a flexible jQuery masonry layout that renders K2 items in a fluid grid, based on a vertical alignment. Each item's position is organised based on the availability of spots vertically as opposed to a more traditional grid which organises elements horizontally. It's like a jigsaw for your K2 content.

Controlling the Tile layout

The tile layout uses a combination of page class suffixes and category settings to create a number of different layouts and styles.

 

Creating different size tiles with K2 Category settings

As per all of the Zenkit templates, items are output using the core K2 Leading, Primary and Secondary groups. The size of each tile is determined by the column number value assigned to the specific group within the category settings.  

Columnexample

And the corresponding columns assigned in the tile category.

columnsettings

In order to adjust the width of items in a specific group you simply need to adjust the number of columns assigned to that group within the category settings.

 

Using page classes to control the output of the tile layout

It is also possible to control the style of the Tile layout and some of it's functionality by using a page class suffix.

What is a page class suffix?
Page class suffixes are classes that can be added via the Joomla menu manager which are consequently rendered in the markup of your template or extension. They are a handy way to allow the styling of elements on specific pages across your Joomla website. Check out the Joomla documentation regarding page class suffixes for more information.

 

The required structure for page classes when manipulating the Tile layout

Some elements of Tile layout is able to be controlled via the addition of a page class, however you need to ensure that you follow a specific structure for rendering the page class.

The page class structure.

Base width | Style | External padding | Internal padding | Breakpoint

 

Page class example

960|pinterest|10|10|620

 

Leaving default values

When specifying a page class it is important that each value is specified. As an example if you want to specify the base width and the breakpoint then you would add the following for the page class suffix for that menu item.

960||10|10|780

The style information can be left blank however all other values need to contain a value.

 

The page class explained

Please note: that it is important that if you are using the page class technique that you add a value for each of the settings below. If the page class is left blank then the default values will be loaded, however if a page class is specified then the correct values need to added to the page class. 

Base width (Default: 960) 

The masonry script calculates the widths and offsets assigned to each block within the grid by using a default column width. The Zenkit template creates the base width by using the base width value and dividing it by the total of aavailable columns in the row eg 12.

So as an example if the base width is set to 960 then the base width will be (960/12) 80px. As an extension of this if the leading group is assigned to a value of 6 columns int he category settings then the base width for each item in the leading group will have a width of 480px. 

Style (Default: null)

The style element is a class that gets attached to the main #zenkit div. The core zenkit package ships with a number of simple styles that can be assigned to the tile layout:

  • - polaroid
  • - pinterest
  • - nomargin
  • - border
  • - zen-shadow
  • - opacity

 

External Padding (Default: null) - Space between each item in the grid

Internal Padding (Default:null) - Space within each item of the grid

Breakpoint (Default:620) - The browser width which triggers the resizing of the items to fill 100% of the main Zenkit container.

 

Tile style examples

Default

default

Border

borders

Nomargin

This style is best applied if only using the K2 item image field in the layout.

nomargin

Pinterest

Some simple pinterest like styling.

pinterest

Polaroid

This style is best used when only using the K2 item image field. The caption underneath the image is either the image caption or the title of the item depending on your K2 settings.

polaroid

polaroid-settings

Back to top