Woomark Image Gallery 2.6 turns a folder of photos (or a list of slides) into a Pinterest-style masonry gallery. When someone clicks a picture, it opens in a classic framed lightbox that fits the browser — keyboard, swipe, zoom, slideshow, download, and share included.

What do you get?

One install package with three parts:

1. Module — show a gallery in a sidebar, footer, or any module position
2. Content plugin — put a gallery inside an article with a shortcode like {wookmark folder="images/woomark-demo"}
3. Editor button — a toolbar button that builds the shortcode for you

Who is this for?

• Photographers and portfolios
• Restaurants, hotels, and travel sites
• Agencies and real-estate listings
• Anyone who wants a modern masonry gallery without jQuery plugins

Works with

• Joomla 4, 5, and 6
• Phones, tablets, and desktops (columns clamp automatically)
• JPG, PNG, GIF, and WebP images
• Optional videos (MP4, YouTube, Vimeo) on individual slides

Tip: Start with the Module if you want settings in the admin. Use the Plugin if you want the gallery inside article text.

Step 1 — Download

1. After purchase, download pkg_wookmark_gallery_2.6.zip (recommended) — or the separate module / plugin zips.
2. Keep the zip file; do not unzip it unless the store told you to.

Step 2 — Install in Joomla

1. Log in to the Joomla administrator.
2. Go to System → Install → Extensions (on older menus: Extensions → Manage → Install).
3. Open the Upload Package File tab.
4. Choose pkg_wookmark_gallery_2.6.zip.
5. Click Upload & Install.
6. Wait for the green success message.

Step 3 — Turn the plugins on

1. Go to System → Plugins (or Extensions → Plugins).
2. Search for Woomark.
3. Enable these two plugins:
   • Content - Woomark Image Gallery
   • Editor Button - Woomark Image Gallery

If a plugin shows a red X, click it so it becomes a green check.

Step 4 — Put your images on the site

1. Go to Content → Media.
2. Create a folder, for example woomark-demo (files live under images/).
3. Upload your photos (JPG/PNG/WebP work best).
4. Optional: name files like Nature__lake.jpg for category filters.

Quick start A — Module (easiest for beginners)

1. Go to Content → Site Modules → New.
2. Choose Woomark Image Gallery.
3. Title: anything, e.g. Photo Gallery.
4. On the Content tab set Image Source to From folder.
5. Pick your image folder.
6. On Look & Feel, leave Masonry Layout on (Woomark’s signature look).
7. Choose a Position, set Status to Published, assign menu items, Save.
8. Open the front of the site and click a photo.

Quick start B — Shortcode in an article

1. Edit any article.
2. Click the editor button Woomark Gallery (or type a shortcode).
3. Example: {wookmark folder="images/woomark-demo" columns="3" masonry="1"}
4. Save the article and view it on the site.

Need help? support.joomlax.com

Open a Woomark Image Gallery module: Content → Site Modules → edit your module. Settings are grouped into tabs.

Content tab

• Image Source
  • From folder — loads every image in that folder automatically.
  • Individual slides — you pick each image, caption, category, and optional video.
• Image Folder — the folder under images/ (example: woomark-demo).
• Folder Categories (folder mode)
  • None — no filter pills.
  • Filename prefix — name files like Nature__lake.jpg.
  • Subfolders — put photos in Nature/, City/, etc.
• Auto Captions from Filename — turns 01-mountain-lake.jpg into “Mountain Lake”.
• Slides (individual mode) — image / poster, video URL, alt text, caption, category, optional external link.
• Sort Order — A→Z, Z→A, or Random.
• Load More (initial count) — show only the first N images, then a “Load more” button. Use 0 to show all.

Look & Feel tab

• Theme — Modern 2026, Minimal, or Dark.
• Accent Color — colour for filters and active controls (default #1819ed).
• Gallery Width — e.g. 100% or 960px.
• Columns — 1 to 6 on desktop (auto-clamps to 2 on tablet, 1 on phone).
• Gap — space between thumbnails (pixels).
• Masonry Layout — Pinterest-style uneven heights (on by default).
• Thumb Aspect Ratio — Auto (natural) or fixed (1:1, 4:3, 16:9…).
• Hover Caption — show on hover/focus, always visible, or hidden on thumbs.
• Show Category Filters — filter pills when categories exist.
• Zoom on Hover — slight zoom when the mouse is over a thumb.
• Resize Thumbnails By — Width, Height, or Both + sizes.
• WebP Thumbnails — smaller, faster thumbnail files.
• Schema.org ImageGallery — SEO structured data (JSON-LD).
• Protect Images — reduces right-click / drag on gallery media (not bulletproof).

Lightbox tab

• OS Fullscreen Mode — off by default. Leave off for the classic framed lightbox; turn on for native fullscreen.
• Slideshow Autoplay + Delay — auto-advance photos.
• Slideshow Progress Bar — thin bar while autoplay runs.
• Image Fit Mode — Contain (whole image visible) or Cover.
• Thumbnail Filmstrip — small strip of thumbs inside the lightbox (off by default).
• Download Button / Share Button — download and share (copy link + WhatsApp / X / Facebook).
• Pinch / Scroll Zoom — mouse wheel zoom + two-finger pinch on phones.
• Deep Link Hash — URL becomes #jx-wig-123-4 so you can share a specific slide.
• Backdrop / control / caption colours and thumb borders.

Advanced tab

• Load Minified CSS/JS — smaller assets for production.
• Module Class Suffix — extra CSS class for your template.
• Additional CSS — your own CSS rules.

Plugin defaults

Go to System → Plugins → Content - Woomark Image Gallery. These defaults apply when a shortcode does not set that option (theme, columns, WebP, captions, schema, and more).

Simple setup checklist

1. Upload photos to Media.
2. Create module → From folder → pick folder.
3. Keep masonry on; pick theme + accent.
4. Publish on the right pages.
5. Click a photo on the front-end to test the lightbox.

Shortcodes only work when the Content - Woomark Image Gallery plugin is enabled.

Easiest way: Editor button

1. Edit an article.
2. Click Woomark Gallery in the editor toolbar.
3. Fill in folder, columns, gap, theme, optional masonry.
4. Click Insert shortcode.

Basic shortcodes (copy & paste)

1) Whole folder

{wookmark folder="images/woomark-demo" columns="3" masonry="1"}

2) With theme + accent

{wookmark folder="images/woomark-demo" columns="3" theme="dark" accent="#1819ed"}

3) Custom thumb size + gap

{wookmark folder="images/woomark-demo" thumbwidth="480" gap="12"}

4) Named images + titles

{wookmark image="images/a.jpg,images/b.jpg" title="Sunrise,City night"}

5) Categories + filters

{wookmark image="images/a.jpg,images/b.jpg" title="Lake,Tower" category="Nature,City" filters="1"}

6) Load more (show 6 first)

{wookmark folder="images/woomark-demo" initial="6"}

7) Hover captions + deep link hash

{wookmark folder="images/woomark-demo" caption="hover" hash="1"}

8) Video slide (poster image + video URL)

{wookmark image="images/poster.jpg" video="https://www.youtube.com/watch?v=VIDEO_ID" title="Trailer"}

Useful attributes

Important rules

• Paths are relative to the site root: images/my-folder (usually no leading slash).
• Shortcodes inside <pre> or <code> stay as text (good for documentation).
• If nothing shows, make sure the content plugin is enabled and the folder really exists.

Grid & layout

• Pinterest-style masonry (default) or uniform CSS grid
• Responsive columns (desktop → tablet → phone)
• Themes: Modern 2026, Minimal, Dark + accent colour
• Hover / always / none caption modes
• Aspect-ratio lock for uniform thumbs
• Hover zoom, lazy loading, loading skeletons
• Responsive srcset thumbnails
• WebP thumbnail generation + cache under images/wookmark/
• Category filter pills
• Load more / pagination for large folders

Lightbox experience

• Classic framed lightbox by default (fits browser height)
• Optional native OS fullscreen
• Previous / next, keyboard arrows, swipe on touch
• Play / pause slideshow + progress bar
• Download and share (copy link + WhatsApp / X / Facebook)
• Scroll zoom + pan, plus pinch-zoom on mobile
• Optional filmstrip
• Fit modes: contain or cover
• Deep-link hash to open a specific image
• Focus trap + screen-reader announcements

Content & media

• Folder mode or individual slides
• Auto captions from filenames
• Folder categories from filename prefix or subfolders
• Alt text, captions, categories per slide
• Video slides: MP4, YouTube, Vimeo
• Optional right-click / drag protect
• Schema.org ImageGallery JSON-LD for SEO

Module vs plugin vs editor button

• Module — full settings UI, positions, menu assignment
• Content plugin — shortcodes inside articles and HTML modules
• Editor button — insert a shortcode from a friendly popup

Technical

• Joomla 4 / 5 / 6 services architecture
• Vanilla CSS/JS with jx-wig prefix (no jQuery / Fancybox required)
• Legacy parameter mapping for upgrades from older Woomark installs

Basics

What is Woomark Image Gallery used for?

It shows a masonry (or grid) of photos. Click one to open a classic lightbox with next/previous controls — great for portfolios, restaurants, travel, and agency sites.

Do I need both the module and the plugin?

No. Install the package once. Use the module for sidebars/positions, the plugin for galleries inside articles. Many sites use both.

Which Joomla versions work?

Joomla 4, 5, and 6.

Is it mobile friendly?

Yes. Columns drop to 2 on tablet and 1 on phone. The lightbox supports swipe, pinch-zoom, and scales to the browser height.

What image types are supported?

JPG, JPEG, PNG, GIF, and WebP. Optional WebP conversion for generated thumbnails.

Setup

Where do I put my photos?

Usually under images/ using Content → Media. Example folder: images/woomark-demo.

Module or shortcode — which should a beginner use?

Start with the module. It has forms and switches. Use shortcodes when you want a gallery in the middle of article text.

How do I create a module gallery?

1. Content → Site Modules → New → Woomark Image Gallery
2. Choose From folder or Individual slides
3. Pick position + pages → Publish → Save

How do I add a gallery inside an article?

Enable the content plugin, then use the editor button or paste: {wookmark folder="images/woomark-demo" columns="3" masonry="1"}

The editor button is missing. Why?

Enable Editor Button - Woomark Image Gallery under System → Plugins. Also make sure your editor shows the button bar.

Layout, captions, lightbox

Can I use a masonry layout?

Yes — masonry is on by default in 2.6. Turn it off for a uniform grid.

What does Hover Caption do?

Hover shows captions on hover/focus. Always keeps them visible. None hides them on thumbs (lightbox still gets the caption).

Does the lightbox go fullscreen by default?

No. The default is a classic framed lightbox. Turn on OS Fullscreen Mode only if you want native fullscreen.

How do category filters work?

Give slides a category name, or in folder mode use Nature__lake.jpg / subfolders. Filters appear as pills above the grid when enabled.

Can I add video slides?

Yes — MP4, YouTube, or Vimeo with an image poster on individual slides (or via the video shortcode attribute).

Will my old settings still work after upgrading?

Yes. Legacy fields such as checker, offset, caption_option, and imgcaption are mapped automatically.

Where are resized images stored?

Under images/wookmark/thumbnail/ and images/wookmark/large/ (plus webp/ when enabled). Delete that folder to rebuild thumbs.

Shortcode shows as plain text

• Enable Content - Woomark Image Gallery under System → Plugins.
• Check curly-brace syntax: {wookmark folder="images/…"}.
• Clear Joomla cache and hard-refresh the browser.

No images appear

• Confirm the folder exists under images/ and contains JPG/PNG/GIF/WebP files.
• Paths should look like images/woomark-demo (no leading slash).
• Check file permissions on the images folder.
• Delete images/wookmark/ cache if thumbs look stale or broken.

Module not showing

• Module Status = Published.
• Correct Position for your template.
• Menu Assignment includes the current page.
• Clear System → Clear Cache.

Lightbox not opening

• Hard-refresh (Ctrl+F5) so wookmark-gallery.js loads.
• Check the browser console for script conflicts.
• If a slide has an External Link, it opens that URL instead of the lightbox.
• Native fullscreen is optional — classic framed mode is the default.

Gallery still shows 3 columns on phones

• Update to 2.6 (responsive column clamping).
• Hard-refresh so the new CSS loads (?2.6.4-accent or newer).

WebP / resize problems

• Confirm PHP GD (or Imagick) is installed with WebP support.
• Ensure images/wookmark/ is writable.
• Try a smaller source image first.

Still stuck?

• Support: support.joomlax.com
• Docs: joomlax.com/documentation/woomark-image-gallery
• Note your Joomla version and Woomark version (should be 2.6).