Vertex Gallery 1.3 is a Joomla package from JoomlaX that shows photos in a modern grid or masonry layout, with a full lightbox when a visitor clicks an image.

Think of it as four tools that work together:

• Component: the photo library. You create galleries under Components > Vertex Gallery.
• Content plugin: turns {vertexgallery id="5"} into a live gallery inside an article.
• Editor button: inserts an existing gallery, or creates a new one, from the article toolbar.
• Module: a gallery block you place in a template position (home, sidebar, footer).

What you can do

• Upload photos, pick them from Media, or import a whole folder
• Or point at a live folder so new files appear automatically
• Add captions, descriptions, and category filters
• Choose Grid or Masonry, columns, gap, colours, and shadows
• Open photos in a dark or light lightbox with zoom, rotate, flip, thumbnails, and autoplay
• Reuse one gallery in articles, a full page, and a module

Who it is for

Portfolios, product photos, travel albums, school events, restaurants, real estate, and any site that needs a simple, good looking gallery.

Built for modern Joomla

• Joomla 4, 5, and 6
• PHP 8.1 or later recommended
• Native JavaScript (no jQuery)

Before you install

• Joomla: 4.x, 5.x, or 6.x
• PHP: 8.1 or newer
• Database: MySQL or MariaDB
• Access: a Super User (or administrator) account so you can install extensions

Helpful but optional

• Photos ready in Joomla Media Manager (JPG, PNG, GIF, or WebP)
• A folder such as images/gallery if you want Live folder mode
• A menu position on your template if you will use the module

Not required

• jQuery
• A page builder
• Extra image server tools

Student tip

If you can log in to the Joomla administrator and upload a photo in Content > Media, you already have everything you need.

Step 1: Download

Email: After you buy from the JoomlaX store, you get an email with the download link.

Store: You can also open the Downloads section and use the same email you used when buying.

File name: VertexGallery_UNZIP.zip

Step 2: Unzip on your computer

1. Right-click VertexGallery_UNZIP.zip and choose Extract (or Unzip).
2. Inside you should see:
   • pkg_vertexgallery_1.3.0.zip (install this one)
   • ReadMe.txt

Always install the pkg zip for a normal new site. It adds all four tools together.

Step 3: Install in Joomla

1. Log in to the Joomla administrator.
2. Go to System > Install > Extensions.
3. Click Upload Package File.
4. Choose pkg_vertexgallery_1.3.0.zip and wait for the success message.
5. Open Components > Vertex Gallery to confirm the Galleries list loads.
6. Clear cache: System > Maintenance > Clear Cache (or Clean Cache if your admin bar shows it).

What the package installs

• com_vertexgallery: admin galleries and a site gallery page
• mod_vertexgallery: site module
• Content - Vertex Gallery: shortcodes in articles
• Editors Xtd - Vertex Gallery: toolbar button in the editor

Enable the plugins

1. Go to System > Plugins.
2. Search for Vertex Gallery.
3. Enable Content - Vertex Gallery (required for shortcodes).
4. Enable Editors Xtd - Vertex Gallery (required for the editor button).

Updates

Install a newer pkg_vertexgallery zip the same way. The package uses method="upgrade", so your galleries and settings stay safe.

Follow these steps in order the first time. You can finish in about 15 minutes.

1. Create a gallery

1. Go to Components > Vertex Gallery.
2. Click New.
3. Type a Title, for example School Photos.
4. Leave Alias blank (Joomla builds it from the title).
5. Keep Managed images selected.
6. Click Upload or drop photos onto the drop zone. You can also click From Media or Import folder.
7. Optional: type a Caption, Description, and Category on each photo.
8. Set Status to Published.
9. Click Save & Close.

2. Copy the shortcode

On the Galleries list, each row shows {vertexgallery id="1"} and a Copy button. Click Copy.

3. Enable the content plugin

System > Plugins > search Vertex Gallery > enable Content - Vertex Gallery.

4. Put it in an article

1. Open an article (or create one).
2. Paste the shortcode where the gallery should appear.
3. Or click the Vertex Gallery button in the editor and choose Insert.
4. Save the article.

5. Check the front end

1. Open the article on the site.
2. You should see the photo grid.
3. Click a photo. The lightbox should open.
4. If something looks old, clear cache and hard-refresh (Ctrl+F5).

Student tip

Start with Managed images and 4 to 9 photos. Learn Live folder, masonry, and lightbox options after the first gallery works.

Pick the tool that matches the page you are building. You can use more than one on the same site.

Use the component (recommended starting point)

• You want a photo library you can reuse
• You will show the same gallery in an article and on a full page
• You want captions, order, and categories under your control

Use the content plugin

• You want the gallery inside article text
• You already have a gallery ID, or you still use folder / images shortcodes
• Must be enabled or the shortcode prints as plain text

Use the editor button

• You do not want to memorise shortcodes
• You want to search existing galleries (including when you have many)
• You want to create a full component gallery without leaving the article

Use the module

• You want a gallery in a template position, not inside article body
• Home page, sidebar, or footer blocks
• Folder or slides live in the module settings (they do not have to use a component ID)

Simple rule

• Reuse photos in several places: component + shortcode or menu item
• One block on one page layout: module is enough
• Writing an article: editor button is the easiest path

Open Components > Vertex Gallery. This list is your home screen.

Toolbar

• New: create a gallery
• Edit: open the selected gallery
• Publish / Unpublish: show or hide without deleting
• Delete: remove selected galleries (you will see a confirm message)
• Options: default for gallery menu items (show title)
• Clean Cache: if your admin bar includes it

What each column means

• Title: the name you typed, with the alias under it
• Image source: Managed images or Live folder
• Shortcode: {vertexgallery id="X"} plus a Copy button
• Status: green check means published
• ID: the number used in the shortcode

Search and filters

Use Search to find a title. Use ordering (title, ID, or ordering) and the per-page limit. This stays comfortable even if you have many galleries.

Student tip

Unpublish a gallery to hide it from the site without deleting the photos. Delete only when you are sure you will not need it again.

Click New or open a gallery. The Details tab is where photos live.

Title and alias

• Title (required): the name in the admin list, and the heading on a menu page if Show title is on
• Alias: leave blank to auto-create. If the alias is already used, Vertex Gallery saves a unique one and shows a notice

Choose Managed images

Click the Managed images card. Use this when you want to edit captions and order by hand.

Add photos (any of these)

• Drop zone: drag files from your computer onto Drop images here
• Upload: pick one or more files
• From Media: choose photos already in Content > Media
• Import folder: type a path such as images/gallery, optional subfolders as categories, optional captions from filenames

Edit each photo

• Caption: title on the card and in the lightbox
• Description: extra line under the caption
• Category: filter name, for example Desert or Forest. Leave empty if you do not need filters
• Drag: reorder photos
• Remove: delete one photo from this gallery (the file in Media usually stays)

Publishing (right column)

• Status: Published or Unpublished
• Ordering, Access, Language

Click Save to stay on the form, or Save & Close to return to the list.

On the Details tab, click the Live folder card when you want the gallery to always match a folder on the site.

When to use it

• You upload new photos to the same folder often
• You do not need a custom caption on every photo
• Subfolders should become filter buttons

Settings

• Image folder path: relative to the Joomla root. Example: images/gallery
• Multiple folders: images/gallery/Animals,images/gallery/Teams (each folder becomes a filter)
• Custom labels: images/gallery/Animals|Animals,images/gallery/Teams|Teams
• Use subfolders as filters: each immediate subfolder becomes a category. Nested folders deeper than one level are not scanned
• Auto-generate titles from filenames: Yes turns sunset-beach.jpg into a readable title

File types

Only jpg, jpeg, png, gif, and webp files are loaded.

Copy folder into Managed images

If you started with a live folder and later want captions and drag reorder, use Copy folder images into manager. The live folder files stay in place. The gallery then switches to Managed images.

Student tip

Create the folder in Content > Media first, upload a few test photos, then paste that path here. If the gallery is empty, the path is wrong or the folder has no supported images.

Open the Layout and visual tab. These settings control how the grid looks on the site.

Layout settings

• Layout: Grid (even rows) or Masonry (brick layout for mixed heights)
• Columns: auto, a number such as 3, or 1,2,3 for mobile, tablet, desktop
• Gap: space between photos in pixels (example: 16)
• Gallery max width: example 1200px. Leave empty for full width of the page column
• Item aspect ratio: example 16/9, 4/3, or 1/1. Leave empty for natural size. Ignored in masonry

Visual settings

• Corner style: Rounded or Flat
• Show card shadow: Yes adds depth under each photo
• Accent colour: filters, active states, and highlights (default #0005f0)
• Show gallery filter: Yes shows category buttons when categories exist
• Show gallery caption: Always, On hover, or Hide

Image filters (optional)

• Image filter: None, Grayscale, Sepia, Blur, Brightness, Contrast, Saturate
• Filter amount: 0 to 100 for grayscale and sepia, 0 to 200 for the others
• Filter on hover: Remove filter on hover, Add filter on hover, or No hover effect

Student tip

Start with Layout = Grid, Columns = 1,2,3, Gap = 16, Caption = On hover. Change one setting, Save, then refresh the front end.

Open the Modal tab. Modal means the full-screen lightbox that opens when a visitor clicks a photo.

Basic

• Enable modal: Yes opens the lightbox. No keeps photos as a simple grid
• Modal theme: Dark or Light
• Modal backdrop opacity: 0.0 (clear) to 1.0 (solid). Default 0.8
• Modal transition: Fade, Crossfade, or Slide
• Swipe threshold: how far a finger must swipe on a phone (pixels). Default 50
• Disable right click in modal: Yes blocks the context menu inside the lightbox (soft deterrence, not DRM)

Controls (turn each on or off)

• Play / pause, Speed slider, Image count (example 1/9)
• Thumbnails strip, Thumbnails toggle, Thumbnail height, Thumbnail style (Crop or Natural)
• Fullscreen, Rotate, Flip, Zoom
• Theme toggle (let visitors switch dark and light)
• Autoplay progress bar
• Download, Share

Autoplay and captions

• Autoplay interval: time between slides in milliseconds (default 3000 = 3 seconds)
• Enable captions in modal: Yes shows title and description over the photo

On the site

Click a photo. Use arrows, thumbnails, or swipe. Press Escape or the X to close.

Image resize tab

• Thumbnail width / height: size of grid photos in pixels. Leave empty to use the original. Set only one value to keep aspect ratio
• Modal width / height: size inside the lightbox. Leave empty for original
• Enable WebP: Yes converts resized images to WebP when the server supports it
• WebP quality: 1 to 100. Higher is better quality and a larger file (default 85)

Behavior tab

• Randomize gallery order: shuffle photos on each page load
• Show single image preview: show one photo first, then expand the full gallery on click

Advanced tab

• Gallery class suffix: extra CSS class on this gallery wrapper
• Extra CSS: custom CSS for this gallery only. Use {gallery_id} to target it, for example #{gallery_id} .vg-card { border-radius: 0; }

Shortcode tab

After you save, this tab shows {vertexgallery id="X"} and a Copy button. Paste it in an article (plugin must be enabled). You can also open the gallery with a menu item: Menus, then Vertex Gallery.

Options (component)

On the Galleries list, click Options. Show gallery title controls whether the gallery title appears as a heading on menu item pages. A menu item can override this.

A menu item opens one published gallery as a full page.

Create the menu item

1. Go to Menus > [Your menu] > Add New Menu Item.
2. Menu Title: Gallery (or any name visitors should see).
3. Click Select next to Menu Item Type.
4. Choose Vertex Gallery > Vertex Gallery.
5. Select the published gallery.
6. Optional: Show gallery title = Yes, No, or Use Global.
7. Publish, then Save.

What visitors see

• Optional gallery title heading
• Category filter buttons (All plus your categories) when filters are on
• Photo grid or masonry using your layout settings
• Captions on hover or always, if enabled

Click behaviour

• If Enable modal is Yes, a click opens the lightbox
• If Enable modal is No, photos stay as a static grid
• Filter buttons narrow the grid without leaving the page

Student tip

If the page is empty, the gallery is unpublished, the wrong gallery is selected on the menu item, or there are no images yet.

This is what visitors see after they click a photo (when Enable modal is Yes).

Typical controls

• 1 / 9: current photo out of the total
• Arrows: previous and next (or swipe on a phone)
• Thumbnail strip: jump to any photo
• Zoom, rotate, flip: inspect the photo
• Play and speed: slideshow
• Fullscreen: fill the screen
• Download / Share: only if you turned them on
• X or Escape: close

Captions

If Enable captions in modal is Yes, the photo title and description appear over the image.

Student tip

If the lightbox does not open, check Enable modal = Yes, Save the gallery, clear cache, then hard-refresh. On a phone, try a longer swipe if the threshold is high.

Use the module when the gallery should sit in a template position, not inside article text.

Create the module

1. Go to Content > Site Modules.
2. Click New.
3. Select Vertex Gallery.
4. Title: for example Home Gallery.
5. Choose a Position that exists in your template.
6. On Menu Assignment, choose the pages where it should appear.
7. Set Status to Published.
8. Set Title to Hide if the page already has a heading.
9. Click Save.

Module tabs (in order)

• Module: title, position, status
• Menu Assignment: which pages show the block
• Image Source: Folder or Slides
• Layout & Visual: same family of options as the component
• Modal / Lightbox: same lightbox family
• Image Resize: thumbnail, modal size, WebP
• Gallery Behavior: randomize, single image preview
• Advanced: module class suffix, extra CSS

Student tip

If the module is missing on the site, check Published, Position, and Menu Assignment first. Those three cause most empty pages.

Open the Image Source tab on the module.

Image Source Type = Folder

• Image Folder Path: same rules as the component live folder (one path, several paths, or path|Label)
• Use Subfolders as Filters: each immediate subfolder becomes a filter
• Auto-Generate Titles from Filenames: optional

Image Source Type = Slides

Click the green + to add a slide. For each slide:

• Image (required): pick from Media
• Title (caption)
• Description
• Category (optional filter name)

Use the red minus to remove a slide. Reorder by the subform controls your Joomla version provides.

Layout, lightbox, resize, behavior

These module tabs match the component: Grid or Masonry, columns, gap, captions, filters, modal theme, zoom, WebP, randomize, single image preview, extra CSS. Change one setting at a time, Save, then refresh the front end.

On the site

After the module is published and assigned, visit that page. You should see the same style of grid and lightbox as the component.

Open System > Plugins, search Vertex Gallery, then open Content - Vertex Gallery.

Status must be Enabled

If this plugin is disabled, shortcodes print as plain text such as {vertexgallery id="5"}. The editor button also warns you when the plugin is off.

What the plugin tabs do

• Plugin: enable or disable, access, ordering among other content plugins
• Basic Settings: default layout, columns, gap, max width, aspect ratio, corners, shadow, accent, filter buttons, captions, auto titles, randomize, single image preview
• Image Filters: default grayscale or other filters
• Modal / Lightbox: default lightbox behaviour for shortcodes that do not override it
• Image Resize: default thumbnail and modal sizes, WebP
• Shortcode Examples: copy-ready snippets (next tab in this documentation)

How defaults and shortcodes work together

Plugin settings are the fallback. A shortcode attribute always wins for that instance. Example: plugin layout is Grid, but {vertexgallery id="5" layout="masonry"} shows masonry on that page only.

Student tip

Keep plugin defaults sensible (Grid, captions on hover, modal on). Override only when one article needs a different look.

The easiest shortcode uses a gallery you created in the component:

{vertexgallery id="5"}

Replace 5 with the ID from the Galleries list.

Recommended: component ID

{vertexgallery id="5"}
{vertexgallery id="5" layout="masonry" columns="3"}

The second line keeps the saved photos but changes layout on that page only.

Legacy: images list

{vertexgallery images="image1.jpg,image2.jpg,image3.jpg"}
{vertexgallery images="img1.jpg,img2.jpg" titles="Sunset,Mountain" descriptions="Evening light,High peaks" categories="nature,nature"}

Legacy: one folder or several folders

{vertexgallery folder="images/gallery"}
{vertexgallery folders="images/nature,images/urban"}
{vertexgallery folders="images/nature|Nature,images/urban|City Life"}

Useful attributes

• layout: grid or masonry
• columns: 3 or 1,2,3
• gap: pixels, example 20
• maxwidth: example 1200px
• caption: always, hover, or hide
• filter: 0 hides category buttons
• modal: 1 or 0
• modal_theme: dark or light
• corners: rounded or flat
• accent: example #ff6b6b
• thumbwidth / thumbheight, modalwidth / modalheight
• randomize: 1
• show_single_image: 1

The plugin Shortcode Examples tab has Copy buttons for every pattern. Change one attribute at a time so you can see what it does.

Enable Editors Xtd - Vertex Gallery, then open an article. Click Vertex Gallery in the editor toolbar.

Existing galleries

• Search by title (also matches alias or ID)
• Results are paged (default 20 per page) so a site with many galleries stays usable
• Each row shows title, Managed images or Live folder, image count or folder path, and ID
• Click Insert to place {vertexgallery id="X"} at the cursor

Create new gallery

Switch to Create new gallery. You get the same options as Components > Vertex Gallery: title, alias, Managed images or Live folder, layout, lightbox, resize, behavior, advanced. Click Save and insert. The gallery is stored in the component, then the shortcode is inserted.

Plugin warning

If Content - Vertex Gallery is disabled, the popup shows a notice with a link to enable it. Without that plugin, the inserted shortcode will not render on the site.

Student tip

Use Existing galleries when the photo set already exists. Use Create new gallery when you are writing the article and the album does not exist yet.

This screen appears when you choose Create new gallery in the editor popup.

1. Type a Title.
2. Leave Alias blank unless you need a custom one.
3. Choose Managed images or Live folder.
4. Add photos (upload, Media, or import folder) or set the folder path.
5. Optional: open Layout, Modal, Image resize, Behavior, Advanced and set the look.
6. Keep Status = Published if the article should show the gallery immediately.
7. Click Save and insert.

Cancel closes the popup without saving. After a successful save, the article contains the new shortcode. You can still edit that gallery later under Components > Vertex Gallery.

If Save and insert does nothing

• Title is required
• You need permission to create galleries
• If you used Managed images with zero photos, the shortcode still inserts. Add photos later in the component

Component: Details

• Title, Alias, Image source (Managed images or Live folder)
• Managed: upload, Media, import folder, caption, description, category, reorder, remove
• Live folder: path, multiple paths, labels, subfolder filters, auto titles
• Published, Ordering, Access, Language

Component: Layout and visual

• Layout, Columns, Gap, Max width, Aspect ratio
• Corners, Shadow, Accent, Filter buttons, Captions
• Image filter, amount, hover behaviour

Component: Modal

• Enable, theme, backdrop, transition, swipe, right click
• Play, speed, count, thumbnails, fullscreen, rotate, flip, zoom, theme toggle, autoplay progress, download, share
• Autoplay interval, captions in modal

Component: Resize, behavior, advanced

• Thumb and modal sizes, WebP, quality
• Randomize, single image preview
• Class suffix, Extra CSS, Shortcode copy

Menu item

• Gallery select, Show title (global or override)

Module

• Folder or Slides, then the same layout, lightbox, resize, and behavior family
• Position, Menu Assignment, Published

Plugin and shortcode

• id, images, folder, folders, titles, descriptions, categories
• layout, columns, gap, maxwidth, caption, filter, modal, modal_theme, corners, accent
• thumbwidth, thumbheight, modalwidth, modalheight, randomize, show_single_image

• Shortcode shows as plain text

  • Enable Content - Vertex Gallery. Confirm matching {vertexgallery ...} spelling. Clear cache.

• Editor button is missing

  • Enable Editors Xtd - Vertex Gallery. Confirm your editor profile allows extra buttons. Hard-refresh the article edit screen.

• Gallery page is empty

  • Publish the gallery. Confirm the menu item points at that gallery. Confirm there are images (or the folder path is correct).

• Module is missing

  • Check Published, Position, and Menu Assignment. For Folder source, check the path. For Slides, add at least one image.

• Filters do not show

  • Turn on Show gallery filter. Add categories on photos, or use subfolders / several folder paths. You need more than one category in use.

• Lightbox does not open

  • Enable modal = Yes. Save. Clear cache. Hard-refresh. Check the browser console if a template script conflicts.

• Photos look tiny or huge

  • Set thumbnail width or height, or leave both empty for originals. For even tiles, set aspect ratio such as 4/3 (grid only).

• Alias notice after save

  • That is normal. The alias was already used, so a unique alias was saved. Use the new alias if you care about URLs.

• Old look after changing settings

  • Save the gallery or module, clear Joomla cache, then hard-refresh (Ctrl+F5).

• Import folder finds nothing

  • Use a path relative to the site root, example images/gallery. Only jpg, jpeg, png, gif, webp are loaded.

• Which Joomla versions are supported?

  • Joomla 4, 5, and 6. PHP 8.1 or later is recommended.

• What file do I install?

  • Unzip VertexGallery_UNZIP.zip, then install pkg_vertexgallery_1.3.0.zip from System > Install > Extensions.

• Do I need all four tools?

  • Install the package. Enable the content plugin for shortcodes and the editor button if you want the toolbar helper. Use the module only when you need a position block.

• Can several galleries sit on one page?

  • Yes. Each shortcode and each module instance is independent.

• Does it need jQuery?

  • No. Vertex Gallery uses native JavaScript.

• Where can I get help?

  • Visit support.joomlax.com. Include Joomla version, PHP version, page URL, and whether you use the component, module, shortcode, or editor button.

Documentation: joomlax.com/documentation/vertex-gallery

Demo: demo.joomlax.com/demo/image-gallery/vertex-gallery