Masonry

Available as: Web ComponentShortcodeOxygen Element

Arrange images in a masonry layout.

<spx-masonry columns="3" gap="12px"> {% for item in example.images %} <img src="{{ item }}" alt="" /> {% endfor %} </spx-masonry>
<spx-masonry columns="3" gap="12px" lightbox spx-lightbox='{"overlay-background":"rgba(255,0,0,0.5)"}' spx-lightbox-slider='{"slides-per-view":"2","gap":"20"}'> {% for item in example.images %} <img src="{{ item }}" alt="" /> {% endfor %} </spx-masonry>

Properties

columns

Type: numberDefault: 4

Number of columns.

gap

Type: stringDefault: 10pxCSS Variable: --spx-masonry-gap

Gap between images.

image-size

Type: string

WordPress media size when using the helper function.

image-src

Type: stringDefault: acfChoices: acf, mb

Gets images from an ACF or Metabox field.

images

Type: string

Gets images from an ACF or Metabox field.

lazy

Type: boolean

Lazy load images.

lightbox

Type: boolean

Will open images in a lightbox on click. Use 'spx-lightbox' and 'spx-lightbox-slider' properties and adjust its settings.

spx-lightbox

Type: string

Pass attributes to the inner <spx-lightbox> component using a JSON string: { "overlay-background": "red" }

spx-lightbox-slider

Type: string

Pass attributes to the inner <spx-slider> component using a JSON string: { "slides-per-view": "2.5" }

Slots

inner

Slot (between HTML tag).

Events

spxMasonryDidLoad

Fires after component has loaded.