Skip to main content

​
Overview

Visual Portfolio provides five distinct layout types for displaying your portfolio content. Each layout offers unique presentation styles and configuration options to match your design needs.
Layouts are registered through the vpf_extend_layouts filter hook in the Visual_Portfolio_Get class, allowing developers to add custom layouts.

​
Available Layouts

​
Tiles

The Tiles layout creates a Pinterest-style masonry grid with customizable tile sizes and patterns. Key Features:
  • Customizable tile patterns (e.g., 3|1,1| for 3 columns with equal tiles)
  • Supports complex grid arrangements
  • Responsive column control
  • Aspect ratio customization
Configuration: 
// Located in: classes/class-admin.php:327
'tiles' => array(
    'title'    => esc_html__( 'Tiles', 'visual-portfolio' ),
    'controls' => array(
        array(
            'type'    => 'tiles_selector',
            'name'    => 'type',
            'default' => '3|1,1|',
        ),
    ),
)

​
Masonry

Masonry layout automatically arranges items in a grid where items flow naturally based on their height. Key Features:
  • Responsive columns (1-5 columns)
  • Horizontal order option
  • Custom aspect ratio support
  • Optimal for varying content heights
Configuration: 
// Located in: classes/class-admin.php:451
'masonry' => array(
    'controls' => array(
        array(
            'type'    => 'number',
            'name'    => 'columns',
            'min'     => 1,
            'max'     => 5,
            'default' => 3,
        ),
        array(
            'type'    => 'checkbox',
            'name'    => 'horizontal_order',
            'default' => false,
        ),
    ),
)

​
Grid

Grid layout displays items in a traditional grid with equal heights across rows. Key Features:
  • Fixed column structure
  • Uniform row heights
  • Consistent spacing
  • Clean, organized presentation
Configuration: 
// Located in: classes/class-admin.php:488
'grid' => array(
    'controls' => array(
        array(
            'type'    => 'number',
            'name'    => 'columns',
            'default' => 3,
        ),
        array(
            'type' => 'aspect_ratio',
            'name' => 'images_aspect_ratio',
        ),
    ),
)

​
Justified

Justified layout creates rows with consistent heights, similar to Flickr or Google Photos. Key Features:
  • Dynamic row height adjustment
  • Row height tolerance control
  • Max rows count limit
  • Last row alignment options (left, center, right, hide)
Configuration: 
// Located in: classes/class-admin.php:518
'justified' => array(
    'controls' => array(
        array(
            'type'    => 'range',
            'name'    => 'row_height',
            'default' => 200,
            'min'     => 20,
            'max'     => 1000,
        ),
        array(
            'type'    => 'range',
            'name'    => 'row_height_tolerance',
            'default' => 0.25,
        ),
    ),
)

​
Slider

Slider layout presents items in a carousel format with various transition effects. Key Features:
  • Multiple effects: Slide, Coverflow, Fade
  • Autoplay support with pause on hover
  • Navigation: Arrows, Bullets, Thumbnails
  • Speed and timing controls
Configuration: 
// Located in: classes/class-admin.php:571
'slider' => array(
    'controls' => array(
        array(
            'name'    => 'effect',
            'default' => 'slide',
            'options' => array('slide', 'coverflow', 'fade'),
        ),
        array(
            'name'    => 'autoplay',
            'default' => 6,
            'min'     => 0,
            'max'     => 60,
        ),
    ),
)
Navigation Options:
Display previous/next arrows for manual navigation
'arrows' => true,
'arrows_nav_style' => 'default', // or 'minimal'

​
Layout Registration

Developers can extend layouts using the filter hook: 
// Located in: classes/class-get-portfolio.php:90
public static function get_all_layouts() {
    $layouts = apply_filters( 'vpf_extend_layouts', array() );
    
    // Extend specific layout controls
    foreach ( $layouts as $name => $layout ) {
        if ( isset( $layout['controls'] ) ) {
            $layouts[ $name ]['controls'] = apply_filters( 
                'vpf_extend_layout_' . $name . '_controls', 
                $layout['controls'] 
            );
        }
    }
    
    return $layouts;
}

​
Adding Custom Layouts

add_filter( 'vpf_extend_layouts', function( $layouts ) {
    $layouts['my_custom_layout'] = array(
        'title'    => __( 'My Custom Layout', 'text-domain' ),
        'icon'     => '<svg>...</svg>',
        'controls' => array(
            // Your custom controls
        ),
    );
    return $layouts;
});

​
Common Layout Settings

All layouts share these common configuration options:
Control the spacing between portfolio items:
'items_gap' => 30,              // Horizontal & vertical gap
'items_gap_vertical' => '',     // Override vertical gap
  • Default: 30px
  • Range: 0-200px
  • CSS Variable: --vp-items__gap
Configure columns for different breakpoints:
'columns' => 3,        // Desktop (≥992px)
'columns_tablet' => 2, // Tablet (≥768px)
'columns_mobile' => 1, // Mobile (<768px)
Control pagination and lazy loading:
'items_count' => 6,    // Items per page
'posts_per_page' => 6, // Query limit

​
Template Structure

Layout templates are located in: 
templates/items-list/layouts/
└── slider/
    ├── arrows.php
    ├── bullets.php
    └── thumbnails.php
Each layout renders through the main portfolio template system in Visual_Portfolio_Templates class at classes/class-templates.php:6764.

​
Related Classes

  • Visual_Portfolio_Get - Layout retrieval and management (classes/class-get-portfolio.php)
  • Visual_Portfolio_Admin - Layout registration (classes/class-admin.php:323)
  • Visual_Portfolio_Controls - Layout control system (classes/class-controls.php)
  • Visual_Portfolio_Templates - Template rendering (classes/class-templates.php)

​
See Also

Content Sources

Learn about different content source types

Item Styles

Explore available item styling options

Responsive Design

Configure responsive breakpoints

API Reference

View all available filter hooks

Build docs developers (and LLMs) love

Get started for freeTalk to us