How to use creative grid

Category: How To / Features 1

How to use creative grid

Creative grid is a collection of pre-defined grid layouts such as the following.

Porto Masonry Container, Porto Products, Porto Product Categories, Porto Blog and Porto Portfolios elements support Creative Grid layout.

How to add custom layout?

Porto provides 11 pre-defined creative grid layouts by default.
We can add custom layouts using “porto_creative_grid_layout_images” and “porto_creative_grid_layouts” filters.
All default layouts are defined in porto_creative_grid_layout function in shortcodes/lib/functions.php of porto-functionality plugin.

Below code shows how to add 12th custom layout like following image using functions.php in child theme.
*Note: We suppose that new grid layout image is located in child themes’s assets/images/creative_grid/ directory.

add_filter( 'porto_creative_grid_layout_images', 'porto_child_custom_creative_grid_layout_names' );
function porto_child_custom_creative_grid_layout_names( $layouts ) {
    $layouts = array_merge(
        $layouts,
        array(
            get_theme_file_uri( 'assets/images/creative_grid/12.jpg' ) => '12',
        )
    );
    return $layouts;
}

add_filter( 'porto_creative_grid_layouts', 'porot_child_custom_creative_grid_layouts', 10, 2 );
function porot_child_custom_creative_grid_layouts( $default, $layout_id ) {
    if ( '12' == $layout_id ) {
        return array(
            array( 'height' => '1', 'height_md' => '1', 'width' => '1-3', 'width_md' => '1', 'size' => 'large' ),
            array( 'height' => '1-2', 'height_md' => '1-2', 'width' => '1-3', 'width_md' => '1', 'size' => 'blog-masonry-small' ),
            array( 'height' => '1-2', 'height_md' => '1-2', 'width' => '1-3', 'width_md' => '1', 'size' => 'blog-masonry-small' ),
            array( 'height' => '1', 'height_md' => '1', 'width' => '1-3', 'width_md' => '1', 'size' => 'large' ),
        );
    }
    return $default;
}

'width_md' and 'height-md': set the width or height when window width < 768px.
'1-2' means half and '1-3' means one third.

Share this post