/card/attributes

DescriptionDescription

This filter is called before a card is lay out.

It allows to modify card attributes like the number of columns or rows, content_background, overlay_background, content_color_scheme, overlay_color_scheme or class.

ArgumentsArguments

ArgumentTypeDescription
$attsarrayHolds card attributes
$cardobject Holds card layout (layers/blocks) definition

ExamplesExamples

First card sizeFirst card size

The following example demonstrates how to change the size of the first card in a grid.

PHP
functions.php
function set_first_card_size( $atts, $card ) {

	static $set;

	$grid = wpgb_get_grid_settings();

	// If it does not match grid id 1.
	if ( 1 !== $grid->id ) {
		return $atts;
	}

	if ( ! $set ) {

		$atts['columns'] = 2;
		$atts['rows']    = 2;

	}

	$set = true;

	return $atts;

}
add_filter( 'wp_grid_builder/card/attributes', 'set_first_card_size', 10, 2 );

Grid patternGrid pattern

The following example demonstrates how to create a layout pattern for Masonry or Metro grids.

PHP
functions.php
function set_grid_layout_pattern( $atts, $card ) {

	static $index;

	$grid = wpgb_get_grid_settings();

	// If it does not match grid id 1.
	if ( 1 !== $grid->id ) {
		return $atts;
	}

	// Change the grid layout pattern here.
	$pattern = [
		[ 'columns' => 2, 'rows' => 2 ], // First card.
		[ 'columns' => 1, 'rows' => 1 ], // Second card.
		[ 'columns' => 2, 'rows' => 1 ], // Third card.
		[ 'columns' => 3, 'rows' => 2 ], // Etc.
		[ 'columns' => 1, 'rows' => 1 ],
	];

	if ( empty( $index ) || $index >= count( $pattern ) ) {
		$index = 0;
	}

	$atts = array_merge( $atts, $pattern[ $index ] );

	++$index;

	return $atts;

}
add_filter( 'wp_grid_builder/card/attributes', 'set_grid_layout_pattern', 10, 2 );