> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/nk-crew/visual-portfolio/llms.txt
> Use this file to discover all available pages before exploring further.
# Layouts
> Understanding Visual Portfolio layout types and their configuration options
## 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:**
```php theme={null}
// 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:**
```php theme={null}
// 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:**
```php theme={null}
// 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:**
```php theme={null}
// 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:**
```php theme={null}
// 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
```php theme={null}
'arrows' => true,
'arrows_nav_style' => 'default', // or 'minimal'
```
Show pagination bullets below the slider
```php theme={null}
'bullets' => true,
'bullets_dynamic' => false,
```
Display thumbnail navigation
```php theme={null}
'thumbnails' => true,
'thumbnails_gap' => 15,
'thumbnails_height_type' => 'static',
```
## Layout Registration
Developers can extend layouts using the filter hook:
```php theme={null}
// 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
```php theme={null}
add_filter( 'vpf_extend_layouts', function( $layouts ) {
$layouts['my_custom_layout'] = array(
'title' => __( 'My Custom Layout', 'text-domain' ),
'icon' => '',
'controls' => array(
// Your custom controls
),
);
return $layouts;
});
```
## Common Layout Settings
All layouts share these common configuration options:
Control the spacing between portfolio items:
```php theme={null}
'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:
```php theme={null}
'columns' => 3, // Desktop (≥992px)
'columns_tablet' => 2, // Tablet (≥768px)
'columns_mobile' => 1, // Mobile (<768px)
```
Control pagination and lazy loading:
```php theme={null}
'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
Learn about different content source types
Explore available item styling options
Configure responsive breakpoints
View all available filter hooks