Video Galleries

Create beautiful, organized video galleries with Vimeify's flexible gallery system. Choose from multiple gallery types and display styles to showcase your video content.

Gallery Types

Vimeify offers two powerful gallery types, each suited for different use cases.

Selection Gallery

Manually curate video collections by selecting specific videos.

Best for:

• Featured video collections
• Curated playlists
• Topic-specific compilations
• Highlight reels
• Best-of collections

How it works:

1. Create a new gallery
2. Manually select videos to include
3. Reorder videos by dragging
4. Publish gallery
5. Display using shortcode or block

Control:

• ✅ Full control over video selection
• ✅ Custom ordering
• ✅ Mix videos from different Vimeo folders
• ✅ Update anytime manually

Folder Sync Gallery

Automatically synchronize with a Vimeo folder.

Best for:

• Automatically updating galleries
• Vimeo-managed collections
• Department video libraries
• Client-specific folders
• Course video sections

How it works:

1. Create folder on Vimeo
2. Create gallery in WordPress
3. Select "Folder Sync" type
4. Choose Vimeo folder
5. Videos automatically sync from folder

Advantages:

• ✅ Automatically updates with folder changes
• ✅ No manual video management needed
• ✅ Centralized control via Vimeo
• ✅ Syncs on schedule (every 10 minutes)

Sync Behavior:

• New videos in folder → Added to gallery
• Videos removed from folder → Removed from gallery
• Video order follows Vimeo folder order
• Updates during metadata sync cycle

Gallery Display Styles

Choose how your gallery appears to visitors.

Slider Style

Pro Feature

The Slider gallery style requires Vimeify Pro. Get Pro →

Carousel-style gallery with horizontal scrolling.

Features:

• Horizontal scrolling layout
• Navigation arrows
• Thumbnail previews
• Responsive design
• Touch/swipe support (mobile)
• Auto-play option
• Loop option

Best for:

• Hero sections
• Featured video showcases
• Portfolio displays
• Landing pages

Example:

[vimeify_gallery id="123" style="slider"]

Customization:

• Number of visible videos
• Scroll behavior (slide count)
• Auto-advance timing
• Navigation button style

Playlist Style

Vertical list with video player and clickable video list.

Features:

• Large player area
• Scrollable video list
• Click to play
• Current video highlight
• Video metadata display
• Sequential playback option

Best for:

• Video courses
• Tutorial series
• Webinar archives
• Documentary series
• Conference talks

Example:

[vimeify_gallery id="123" style="playlist"]

Customization:

• Player size
• List position (left/right)
• Thumbnail size
• Auto-play next
• Metadata display

Creating Galleries

Via WordPress Admin

1. Navigate to Vimeify → Galleries
2. Click Add New
3. Enter gallery details (see below)
4. Choose gallery type
5. Configure settings
6. Click Publish

Gallery Settings

Basic Information

Gallery Title

• Display name for gallery
• Shows in gallery listings
• Used in shortcode output

Description

• Optional gallery description
• Displays above gallery (theme-dependent)
• Supports HTML formatting

Gallery Type

Selection Gallery:

1. Choose "Selection" type
2. Click "Add Videos" button
3. Select videos from media modal
4. Drag to reorder
5. Remove unwanted videos

Folder Sync Gallery:

1. Choose "Folder Sync" type
2. Select Vimeo folder from dropdown
3. Videos automatically populate
4. Order syncs from Vimeo
5. Cannot manually add/remove (managed by sync)

TIP

Create folders on Vimeo first. They'll appear in the dropdown after the next sync (max 10 minutes).

Display Settings

Default Style

• Choose default display style (slider or playlist)
• Can be overridden in shortcode/block
• Affects widget displays

Videos Per Page (Selection galleries)

• Limit number of videos shown
• Pagination for large galleries
• Default: Show all

Autoplay Options

• Auto-play first video on load
• Auto-advance to next video
• Loop back to start

Advanced Settings

Custom CSS Class

• Add custom classes for styling
• Useful for theme integration
• Multiple classes space-separated

Featured Gallery

• Mark gallery as featured
• Useful for filtering/highlighting
• Can query featured galleries programmatically

Displaying Galleries

Shortcode

Display galleries anywhere using the [vimeify_gallery] shortcode.

Basic Usage:

[vimeify_gallery id="123"]

With Style:

[vimeify_gallery id="123" style="slider"]

All Parameters:

[vimeify_gallery
    id="123"
    style="playlist"
    autoplay="true"
    loop="false"
    per_page="10"
]

Parameters:

Parameter	Description	Default	Options
id	Gallery ID (required)	-	Gallery post ID
style	Display style	Gallery setting	slider, playlist
autoplay	Auto-play first video	false	true, false
loop	Loop gallery	false	true, false
per_page	Videos per page	All	Number
class	Custom CSS class	-	Any string

Gutenberg Block

Use the Vimeify Gallery block in the WordPress block editor.

Adding Block:

1. Click (+) to add block
2. Search "Vimeify Gallery"
3. Select gallery from dropdown
4. Choose display style
5. Configure options in sidebar

Block Settings:

• Gallery selector
• Style picker (slider/playlist)
• Autoplay toggle
• Loop toggle
• Custom CSS class

Preview:

• Live preview in editor
• See actual gallery layout
• Test responsive behavior

Page Builder Widgets

Elementor

1. Find "Vimeify Gallery" widget
2. Drag to page
3. Select gallery from dropdown
4. Choose style
5. Configure in settings panel

Elementor-Specific:

• Style controls
• Spacing options
• Color customization
• Responsive settings

Bricks

1. Add "Vimeify Gallery" element
2. Select gallery
3. Choose display style
4. Customize with Bricks controls

Bricks-Specific:

• Native Bricks styling
• Dynamic data support
• Conditional display
• Query loop integration

Learn more about Page Builders →

Gallery Taxonomies

Organize galleries using the Gallery taxonomy.

Assigning Gallery Taxonomy

When editing videos:

1. Go to Vimeify → Videos
2. Edit a video
3. Find "Galleries" metabox
4. Check galleries to include video
5. Update video

Bulk Assignment:

1. Select multiple videos
2. Choose "Bulk Actions → Edit"
3. Select galleries
4. Click "Update"

Querying by Gallery

Using Shortcode:

[vimeify_videos_table gallery="tutorials"]

In Template:

$args = [
    'post_type' => 'vimeify-video',
    'tax_query' => [
        [
            'taxonomy' => 'vimeify-gallery',
            'field' => 'slug',
            'terms' => 'tutorials',
        ],
    ],
];
$videos = new WP_Query( $args );

Gallery Synchronization

Selection Gallery Sync

Selection galleries don't auto-sync, but video metadata updates:

• Video titles update automatically
• Thumbnails refresh
• Metadata stays current
• Manual video management required

Folder Sync Gallery Sync

Folder sync galleries fully synchronize:

What Syncs:

• Videos added to Vimeo folder → Added to gallery
• Videos removed from folder → Removed from gallery
• Video order → Matches Vimeo folder order
• Video metadata → Updates automatically

Sync Schedule:

• Runs every 10 minutes (metadata sync)
• Part of automatic sync cycle
• No manual intervention needed

Manual Sync:

# Force sync all galleries
wp vimeify sync metadata --fresh

Sync Status

Check gallery sync status:

1. Navigate to Vimeify → Galleries
2. Look for "Sync" column
3. Status indicators:
   • ✅ Synced - Up to date
   • 🔄 Syncing - In progress
   • ⚠️ Error - Sync issue

Troubleshooting Sync Issues:

# Check sync status
wp vimeify sync info

# Reset and resync
wp vimeify sync metadata --fresh

Customizing Gallery Display

Custom Styling

Add custom CSS for galleries:

Via Theme:

/* Target specific gallery */
.vimeify-gallery-123 {
    background: #f5f5f5;
    padding: 20px;
}

/* Style slider navigation */
.vimeify-gallery-slider .slick-arrow {
    background: #2271b1;
}

/* Customize playlist layout */
.vimeify-gallery-playlist .video-list {
    width: 400px;
}

Via Custom CSS Class:

1. Edit gallery
2. Add custom class in "Custom CSS Class" field
3. Style with CSS:

.my-custom-gallery .video-item {
    border: 2px solid #2271b1;
}

Template Overrides

Override gallery templates in your theme:

Template Location:

wp-content/plugins/vimeify/templates/gallery/
├── slider.php
├── playlist.php
└── gallery-item.php

Theme Override:

your-theme/
└── vimeify/
    └── gallery/
        ├── slider.php
        └── playlist.php

Custom Template:

// your-theme/vimeify/gallery/slider.php
<?php
// Custom slider template
// $gallery - Gallery post object
// $videos - Array of video objects
// $args - Display arguments

foreach ( $videos as $video ) {
    // Custom video display
}

Filters

Customize gallery behavior with filters:

Modify Gallery Query:

add_filter( 'vimeify_gallery_query', function( $args, $gallery_id ) {
    // Modify query args
    $args['posts_per_page'] = 20;
    return $args;
}, 10, 2 );

Change Gallery Videos:

add_filter( 'vimeify_gallery_videos', function( $videos, $gallery_id ) {
    // Filter or modify videos array
    return $videos;
}, 10, 2 );

Customize Gallery HTML:

add_filter( 'vimeify_gallery_html', function( $html, $gallery_id, $args ) {
    // Modify gallery output
    return $html;
}, 10, 3 );

See all gallery filters →

Gallery Performance

Optimization Tips

For Large Galleries:

1. Use pagination (per_page parameter)
2. Enable lazy loading
3. Optimize thumbnail sizes
4. Use CDN for assets
5. Cache gallery output

Lazy Loading:

// Enable lazy load for gallery videos
add_filter( 'vimeify_gallery_lazy_load', '__return_true' );

Caching:

// Cache gallery for 1 hour
add_filter( 'vimeify_gallery_cache_duration', function() {
    return HOUR_IN_SECONDS;
} );

Database Queries

Gallery queries are optimized:

• Cached video relationships
• Efficient taxonomy queries
• Limited metadata fetching
• Indexed lookups

Gallery Use Cases

Course Video Library

Setup:

1. Create Vimeo folder per course section
2. Create folder sync gallery for each
3. Upload videos to respective folders
4. Display with playlist style

Benefits:

• Auto-updates as you add videos
• Students see latest content
• Easy reorganization via Vimeo
• Maintains course structure

Client Video Portal

Setup:

1. Create Vimeo folder per client
2. Create private folder sync galleries
3. Set gallery privacy to match
4. Share gallery shortcode with client

Benefits:

• Client sees only their videos
• Automatic updates
• Centralized management
• Professional presentation

Product Demo Gallery

Setup:

1. Create selection gallery
2. Manually add product videos
3. Order by importance/relevance
4. Display with slider style

Benefits:

• Complete control over order
• Mix videos from different sources
• Update featured demos easily
• Professional showcase

Tutorial Series

Setup:

1. Create Vimeo folder for tutorials
2. Create folder sync gallery
3. Display with playlist style
4. Enable auto-play next

Benefits:

• Sequential viewing
• Auto-updates with new tutorials
• Easy navigation
• Better learning experience

Troubleshooting

Gallery Not Displaying

Check:

1. Gallery is published
2. Gallery has videos
3. Shortcode ID is correct
4. Theme supports shortcodes

Debug:

// Check if gallery exists
$gallery = get_post( 123 );
var_dump( $gallery );

// Check gallery videos
$videos = vimeify_get_gallery_videos( 123 );
var_dump( $videos );

Folder Sync Not Working

Symptoms: Gallery not updating with folder changes

Solutions:

1. Verify folder selected correctly
2. Check sync is running: wp vimeify sync info
3. Manually trigger sync: wp vimeify sync metadata
4. Check Action Scheduler logs
5. Verify API credentials and quota

Videos Not Appearing in Gallery

For Selection Galleries:

1. Verify videos are selected in gallery editor
2. Check videos are published
3. Verify video post type visibility

For Folder Sync Galleries:

1. Confirm videos exist in Vimeo folder
2. Wait for next sync (max 10 minutes)
3. Run manual sync to test
4. Check folder has videos on Vimeo

Styling Issues

Common Problems:

• Theme CSS conflicts
• Missing slider JavaScript
• Responsive layout breaks

Solutions:

1. Check browser console for errors
2. Verify slider library loaded
3. Add custom CSS to fix conflicts
4. Use theme override templates
5. Contact support with theme details

Best Practices

Gallery Organization

1. Use Descriptive Names: Clear gallery titles
2. Consistent Structure: Similar naming conventions
3. Logical Grouping: Group related content
4. Limit Gallery Size: 20-30 videos per gallery ideal
5. Use Categories: Organize with Vimeify categories too

Folder Sync Strategy

1. Plan Folder Structure: Design Vimeo folders first
2. One Gallery Per Folder: Maintain 1:1 relationship
3. Folder Naming: Match gallery names to folders
4. Regular Cleanup: Remove old/unused folders
5. Test Before Production: Verify sync behavior

Performance

1. Paginate Large Galleries: Use per_page parameter
2. Optimize Images: Compress thumbnails
3. Use Caching: Enable gallery caching
4. Lazy Load: Enable lazy loading for videos
5. CDN: Use CDN for assets

User Experience

1. Clear Titles: Descriptive gallery names
2. Relevant Content: Keep galleries focused
3. Logical Order: Sequence videos meaningfully
4. Consistent Style: Use same style site-wide
5. Mobile-Friendly: Test on mobile devices

Related

• Sync - Automatic gallery synchronization
• Gallery Element - Gallery element reference
• Gutenberg - Gallery block
• Hooks - Gallery customization
• API - Gallery PHP API