Vertex Gallery

Download
J4 J5 J6
Gallery with modern layouts and advanced lightbox
FeaturesDocumentation

Comprehensive guide to using Vertex Gallery shortcodes with images from images/vertex folder

Example 1: Basic Folder-Based Gallery

Live Demo: (Gallery will render below)

Shortcode Used

{vertexgallery folder="images/vertex"}

Explanation: Basic folder-based shortcode with default settings.

What it does:

  • Loads all images from the images/vertex folder
  • Uses default grid layout
  • Auto-generates categories from folder name ("Vertex")
  • Shows filter buttons
  • Enables modal lightbox

Example 2: Folder with Masonry Layout

Live Demo: (Gallery will render below)

Shortcode Used

{vertexgallery folder="images/vertex" layout="masonry"}

Explanation: Folder-based with masonry (Pinterest-style) layout.

What it does:

  • Loads all images from images/vertex folder
  • Uses masonry layout for Pinterest-style arrangement
  • All other settings use plugin defaults

Example 3: Folder with Custom Columns

Live Demo: (Gallery will render below)

Shortcode Used

{vertexgallery folder="images/vertex" columns="4"}

Explanation: Fixed 4-column grid layout.

What it does:

  • Loads all images from images/vertex folder
  • Displays in 4-column grid
  • All other settings use defaults

Example 4: Responsive Columns

Live Demo: (Gallery will render below)

Shortcode Used

{vertexgallery folder="images/vertex" columns="1,2,4"}

Explanation: Responsive column configuration. Format: "mobile,tablet,desktop".

What it does:

  • Loads all images from images/vertex folder
  • 1 column on mobile devices
  • 2 columns on tablets
  • 4 columns on desktop
  • Automatically adapts to screen size

Example 5: Custom Gap Between Images

Live Demo: (Gallery will render below)

Shortcode Used

{vertexgallery folder="images/vertex" gap="24"}

Explanation: Custom gap of 24 pixels between gallery items.

What it does:

  • Loads all images from images/vertex folder
  • 24px gap between images (instead of default 16px)
  • All other settings use defaults

Example 6: Individual Images (First 5)

Live Demo: (Gallery will render below)

Shortcode Used

{vertexgallery images="images/vertex/image-1-large.jpg,images/vertex/image-2-large.jpg,images/vertex/image-3-large.jpg,images/vertex/image-4-large.jpg,images/vertex/image-5-large.jpg"}

Explanation: Manually specified individual images using comma-separated list.

What it does:

  • Loads only the 5 specified images
  • Displays them in the order listed
  • Uses default settings for layout and modal

Example 7: Individual Images with Masonry

Live Demo: (Gallery will render below)

Shortcode Used

{vertexgallery images="images/vertex/image-1-large.jpg,images/vertex/image-2-large.jpg,images/vertex/image-3-large.jpg,images/vertex/image-4-large.jpg,images/vertex/image-5-large.jpg" layout="masonry"}

Explanation: Individual images with masonry layout.

What it does:

  • Loads 5 specific images
  • Arranges them in masonry layout
  • All other settings use defaults

Example 8: Disable Filter Buttons

Live Demo: (Gallery will render below)

Shortcode Used

{vertexgallery folder="images/vertex" show_filter="0"}

Explanation: Folder-based gallery with filter buttons disabled.

What it does:

  • Loads all images from images/vertex folder
  • Hides filter buttons
  • All images displayed without category filtering option

Example 9: Disable Modal/Lightbox

Live Demo: (Gallery will render below)

Shortcode Used

{vertexgallery folder="images/vertex" enable_modal="0"}

Explanation: Gallery without lightbox modal functionality.

What it does:

  • Loads all images from images/vertex folder
  • Images are not clickable (no modal)
  • Images display in gallery only

Example 10: Light Theme Modal

Live Demo: (Gallery will render below)

Shortcode Used

{vertexgallery folder="images/vertex" modal_theme="light"}

Explanation: Gallery with light theme modal instead of default dark.

What it does:

  • Loads all images from images/vertex folder
  • Modal uses light theme (white background)
  • All other settings use defaults

Example 11: Combined Settings - Masonry with Custom Gap

Live Demo: (Gallery will render below)

Shortcode Used

{vertexgallery folder="images/vertex" layout="masonry" gap="20"}

Explanation: Multiple customizations combined - masonry layout with custom gap.

What it does:

  • Loads all images from images/vertex folder
  • Masonry layout
  • 20px gap between items
  • All other settings use defaults

Example 12: Grid with Responsive Columns and Custom Gap

Live Demo: (Gallery will render below)

Shortcode Used

{vertexgallery folder="images/vertex" layout="grid" columns="2,3,5" gap="18"}

Explanation: Multiple customizations: grid layout, responsive columns, custom gap.

What it does:

  • Loads all images from images/vertex folder
  • Grid layout
  • 2 columns on mobile, 3 on tablet, 5 on desktop
  • 18px gap between items

Example 13: First 10 Images Only

Live Demo: (Gallery will render below)

Shortcode Used

{vertexgallery images="images/vertex/image-1-large.jpg,images/vertex/image-2-large.jpg,images/vertex/image-3-large.jpg,images/vertex/image-4-large.jpg,images/vertex/image-5-large.jpg,images/vertex/image-6-large.jpg,images/vertex/image-7-large.jpg,images/vertex/image-8-large.jpg,images/vertex/image-9-large.jpg,images/vertex/image-10-large.jpg"}

Explanation: Individual images - first 10 images only.

What it does:

  • Loads only images 1-10
  • Displays them in specified order
  • Uses default settings

Example 14: Last 10 Images Only

Live Demo: (Gallery will render below)

Shortcode Used

{vertexgallery images="images/vertex/image-11-large.jpg,images/vertex/image-12-large.jpg,images/vertex/image-13-large.jpg,images/vertex/image-14-large.jpg,images/vertex/image-15-large.jpg,images/vertex/image-16-large.jpg,images/vertex/image-17-large.jpg,images/vertex/image-18-large.jpg,images/vertex/image-19-large.jpg,images/vertex/image-20-large.jpg"}

Explanation: Individual images - last 10 images (11-20).

What it does:

  • Loads only images 11-20
  • Displays them in specified order
  • Uses default settings

Example 15: All 20 Images with Custom Settings

Live Demo: (Gallery will render below)

Shortcode Used

{vertexgallery images="images/vertex/image-1-large.jpg,images/vertex/image-2-large.jpg,images/vertex/image-3-large.jpg,images/vertex/image-4-large.jpg,images/vertex/image-5-large.jpg,images/vertex/image-6-large.jpg,images/vertex/image-7-large.jpg,images/vertex/image-8-large.jpg,images/vertex/image-9-large.jpg,images/vertex/image-10-large.jpg,images/vertex/image-11-large.jpg,images/vertex/image-12-large.jpg,images/vertex/image-13-large.jpg,images/vertex/image-14-large.jpg,images/vertex/image-15-large.jpg,images/vertex/image-16-large.jpg,images/vertex/image-17-large.jpg,images/vertex/image-18-large.jpg,images/vertex/image-19-large.jpg,images/vertex/image-20-large.jpg" layout="masonry" columns="auto" gap="16"}

Explanation: All 20 images explicitly listed with custom settings.

What it does:

  • Loads all 20 images in specified order
  • Masonry layout
  • Auto-calculated columns
  • 16px gap (default)

Example 16: Even Numbered Images Only

Live Demo: (Gallery will render below)

Shortcode Used

{vertexgallery images="images/vertex/image-2-large.jpg,images/vertex/image-4-large.jpg,images/vertex/image-6-large.jpg,images/vertex/image-8-large.jpg,images/vertex/image-10-large.jpg,images/vertex/image-12-large.jpg,images/vertex/image-14-large.jpg,images/vertex/image-16-large.jpg,images/vertex/image-18-large.jpg,images/vertex/image-20-large.jpg"}

Explanation: Selective display - only even-numbered images.

What it does:

  • Loads only even-numbered images (2, 4, 6, 8, 10, 12, 14, 16, 18, 20)
  • 10 images total
  • Uses default settings

Example 17: Odd Numbered Images Only

Live Demo: (Gallery will render below)

Shortcode Used

{vertexgallery images="images/vertex/image-1-large.jpg,images/vertex/image-3-large.jpg,images/vertex/image-5-large.jpg,images/vertex/image-7-large.jpg,images/vertex/image-9-large.jpg,images/vertex/image-11-large.jpg,images/vertex/image-13-large.jpg,images/vertex/image-15-large.jpg,images/vertex/image-17-large.jpg,images/vertex/image-19-large.jpg"}

Explanation: Selective display - only odd-numbered images.

What it does:

  • Loads only odd-numbered images (1, 3, 5, 7, 9, 11, 13, 15, 17, 19)
  • 10 images total
  • Uses default settings

Example 18: Custom Selection - First 5 and Last 5

Live Demo: (Gallery will render below)

Shortcode Used

{vertexgallery images="images/vertex/image-1-large.jpg,images/vertex/image-2-large.jpg,images/vertex/image-3-large.jpg,images/vertex/image-4-large.jpg,images/vertex/image-5-large.jpg,images/vertex/image-16-large.jpg,images/vertex/image-17-large.jpg,images/vertex/image-18-large.jpg,images/vertex/image-19-large.jpg,images/vertex/image-20-large.jpg"}

Explanation: Custom curated selection showing first 5 and last 5 images.

What it does:

  • Loads first 5 images (1-5) and last 5 images (16-20)
  • Total of 10 images
  • Uses default settings

Example 19: Maximum Customization

Live Demo: (Gallery will render below)

Shortcode Used

{vertexgallery folder="images/vertex" layout="masonry" columns="1,2,4" gap="20" show_filter="1" enable_modal="1" modal_theme="light"}

Explanation: Comprehensive example showing most available options combined.

What it does:

  • Loads all images from images/vertex folder
  • Masonry layout
  • Responsive: 1 column (mobile), 2 (tablet), 4 (desktop)
  • 20px gap
  • Filter buttons enabled
  • Modal enabled with light theme

Example 20: Minimal Gallery (No Modal, No Filter)

Live Demo: (Gallery will render below)

Shortcode Used

{vertexgallery folder="images/vertex" show_filter="0" enable_modal="0"}

Explanation: Minimal gallery setup with no filter buttons and no modal.

What it does:

  • Loads all images from images/vertex folder
  • No filter buttons
  • No modal/lightbox
  • Simple grid display only

Company

Services

Support

Terms

Mobile Menu

×

Login to your account

Forgot Password?
Don't have an account? Register Now