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.
Your First Gallery
This guide will walk you through creating your first portfolio gallery with Visual Portfolio.Before starting, make sure you’ve installed Visual Portfolio and activated the plugin.
Creating a Simple Image Gallery
Let’s start with a basic image gallery - the most common use case.Create New Page
- Go to Pages → Add New in your WordPress dashboard
- Give your page a title (e.g., “My Photo Gallery”)
Add Visual Portfolio Block
- Click the + button in the editor
- Search for “Visual Portfolio”
- Click the Visual Portfolio block (in the Media category)
You’ll see a setup wizard to help configure your first gallery.
Choose Content Source
Select “Images” as your content sourceThe block supports three main content sources:
- Images: Upload your own photos
- Posts: Display blog posts or custom post types
- Portfolio: Show items from the Portfolio post type
Add Images
- Click “Add Images” button
- Upload new images or select from your Media Library
- Select multiple images (hold Ctrl/Cmd to multi-select)
- Click “Create Gallery”
Select Layout
Choose from available layouts:
- Masonry: Pinterest-style cascading grid (recommended for mixed sizes)
- Grid: Traditional equal-height grid
- Justified: Flickr-style justified rows
- Tiles: Custom tile patterns
- Slider: Carousel or fade transitions
Layout Options
Each layout has unique characteristics and settings:- Masonry
- Grid
- Justified
- Slider
Masonry Layout
Pinterest-style cascading grid that preserves image aspect ratios.Best for: Mixed image sizes, photography portfoliosKey Settings:- Columns: 1-6 columns (responsive)
- Gap: Space between items (0-100px)
- Horizontal Order: Fill rows left to right
Masonry automatically recalculates on window resize for responsive layouts.
Customizing Your Gallery
After creating your gallery, explore these customization options:Visual Settings
Item Styles (Skins)
Item Styles (Skins)
Choose how gallery items appear:
- Classic: Simple overlay on hover
- Fade: Subtle fade-in effect
- Emerge: Scale and fade animation
- Fly: Content flies in from edges
Colors & Typography
Colors & Typography
Customize appearance:
- Background Color: Item backgrounds
- Text Color: Title and caption colors
- Overlay Color: Hover overlay
- Border Radius: Rounded corners
Item Meta
Item Meta
Control what information displays:
- Title: Show/hide item titles
- Description: Show/hide descriptions
- Categories: Display taxonomies
- Date: Publication date
- Author: Post author
- Read More: Link button
Click Actions
Configure what happens when users click gallery items:Popup Gallery
Open images in a lightboxChoose between:
- PhotoSwipe (default)
- Fancybox
Custom URL
Link to custom pagesSet individual URLs for each gallery item.
No Action
Disable clickingFor display-only galleries.
New Window
Open links in new tabAvailable for URL actions.
Working with Posts
Display blog posts or custom post types instead of images:Select Posts Source
In the Visual Portfolio block settings:
- Change Content Source to “Posts”
- The interface updates to show query options
Filter by Taxonomy
Show specific categories:
- Include Categories: Only show these
- Exclude Categories: Hide these
- Tags: Filter by tags
Adding Pagination
For galleries with many items, add pagination:- Load More
- Infinite Scroll
- Paged
Load More Button
Add a “Load More” button to load additional items.Settings:- Items Per Page: Initial items to show (default: 12)
- Button Text: Customize button label
- Button Style: Choose button design
Items load via AJAX without page refresh.
Adding Filters
Allow users to filter gallery items by category:Configure Filter
Filter Style:
- Links: Horizontal row of links
- Dropdown: Select dropdown
- Show “All” Link: Include show all option
- Show Count: Display item counts
- Default Filter: Set active category
Adding Sort Options
Let users sort gallery items:- Date
- Title
- Menu Order
- Random
- Item Title (for images)
- Item Description (for images)
Using Saved Layouts
Create reusable gallery configurations:Create Saved Layout
- Configure your gallery settings
- In block toolbar, click “Save Layout”
- Give it a name (e.g., “Portfolio Masonry 3 Column”)
- Click “Save”
Use Saved Layout
To reuse the layout:
- Add a new Visual Portfolio block
- Switch to “Saved Layout” tab
- Select your saved layout from dropdown
Customizing with Code
For developers who want more control:PHP Filters
Template Overrides
Override templates in your theme:Custom CSS
Add custom styles using the built-in CSS editor:Performance Tips
- Use Pagination: For galleries with 40+ items, enable Load More or Infinite Scroll
- Enable Lazy Loading: Images load only when needed (enabled by default)
- Optimize Images: Use image optimization plugins (Imagify, ShortPixel, etc.)
- Responsive Images: Plugin automatically generates adaptive sizes
- Caching: Compatible with WP Rocket, W3 Total Cache, and other caching plugins
Common Use Cases
Photography Portfolio
Layout: Masonry or Justified
Popup: PhotoSwipe
Images: High resolution with lazy loading
Product Showcase
Layout: Grid (4 columns)
Source: WooCommerce products
Click Action: Product page URLs
Blog Posts Grid
Layout: Grid or Masonry
Source: Post type
Show: Featured image, title, excerpt, date
Video Gallery
Layout: Grid
Popup: Fancybox
Content: YouTube/Vimeo URLs
Troubleshooting
Images not loading
Images not loading
Check:
- Image URLs are correct
- Images exist in Media Library
- No JavaScript errors in console (F12)
- Lazy loading isn’t being blocked
Layout not displaying correctly
Layout not displaying correctly
Common causes:
- Theme CSS conflicts
- JavaScript errors
- Caching issues
- Clear cache (browser and WordPress)
- Check browser console for errors
- Try default WordPress theme to isolate issue
Popup not opening
Popup not opening
Check:
- Click action is set to “Popup Gallery”
- No JavaScript errors
- Popup library is selected (PhotoSwipe or Fancybox)
Next Steps
Now that you’ve created your first gallery, explore advanced features:Pro Version
Unlock advanced features:
- Social feeds (Instagram, YouTube, etc.)
- Advanced styling options
- Proofing galleries
- And much more
Documentation
Deep dive into:
- Advanced layouts
- Custom templates
- Developer hooks
- API reference
Get Help
Need assistance?Have questions not covered here? Check the FAQ or ask in the support forum!