1. Home
  2. Docs
  3. Masonry Plugin
  4. Options and Settings
  5. Main Layout Settings

Main Layout Settings

Choose post types – [yumjam-masonry post_types="custom,post"]

shortcode attribute :- post_types

This is a multi-select list of the different post types to include in the masonry grid.  The values entered into the shortcode will be a comma separated list of post types.

Pre-Built Brick Layouts – [yumjam-masonry brick_layout="6:6:3:6:3:4:4:4"]

shortcode attribute :- brick_layout

This is a radio list of the several pre-built brick size layouts, each number represents the number of columns a brick will span, the patterns will repeat continuously, the values entered into the shortcode need to be separated with a : (colon) character.  The custom layout option enables the column size of the brick to be specified in each individual post if no brick size is specified the default column width option (see below) will be used.

Default items per page – [yumjam-masonry default_per_page="10"]

shortcode attribute :- default_per_page

The number of items to show per page and on load more/lazy load how many items will be loaded.

Default column width (1 – 12) – [yumjam-masonry default_column_width="5"]

shortcode attribute :- default_per_page

The default column width to use if not specified elsewhere

Fill gaps – [yumjam-masonry default_gap_fill="on"]

shortcode attribute :- default_gap_fill

Intelligently fill the gaps between odd sized bricks, automatically adjusting the column widths to ensure no large gaps are left between blocks or at column ends.

Mortar color – [yumjam-masonry page_background_color="#ffffff"]

shortcode attribute :- page_background_color

The color of the gap between the motar if any, the default is white. You can use the colour picker to choose a colour or enter any value CSS colour value (e.g. #f03, #ff0033, #FF003388, rgb(255,0,51), rgb(100%,0%,20%), rgb(255,0,51,0.4), hsl(240,100%,50%), hsla(240,100%,50%,0.05), etc.)

Mortar size – [yumjam-masonry block_spacing="15"]

shortcode attribute :- block_spacing

Size of the gap between bricks in pixels ( default: 15 )

Background color – [yumjam-masonry gap_background_color="#ffffff"]

shortcode attribute :- gap_background_color

The color of the gap between bricks, the default is white. You can use the colour picker to choose a colour or enter any value CSS colour value (e.g. #f03, #ff0033, #FF003388, rgb(255,0,51), rgb(100%,0%,20%), rgb(255,0,51,0.4), hsl(240,100%,50%), hsla(240,100%,50%,0.05), etc.)

Brick Debug – [yumjam-masonry brick_debug="off"]

shortcode attribute :- brick_debug

Enables the display of the number of columns spanned for each brick and on hover the post type of the brick.

Masonry ID – [yumjam-masonry masonry_id="1"]

shortcode attribute :- masonry_id

When there are multiple different masonry walls displayed on a single page, make sure you set a different masonry id number for each, this allows the masonry walls to be identified correctly and the correct CSS setting to be applied to each.

Was this article helpful to you? Yes No

How can we help?