Commons Gallery – Documentation

Overview

Commons Gallery is a custom template system that allows editors to embed images from Wikimedia Commons into pages on schoolwiki.in without using InstantCommons.

Images are:

Loaded dynamically using the Wikimedia Commons API
Displayed in a responsive grid
Clickable to open a lightbox viewer
Fully attributed (author, license, and Commons file page)
Mobile-friendly and performance-optimized

---

What This System Does

Loads images directly from Wikimedia Commons
Supports multi-line, readable wikitext
Shows captions for each image
Displays author and license attribution automatically
Links to the original file page on Wikimedia Commons
Provides a lightbox viewer with next / previous navigation
Works on desktop and mobile devices

---

Templates Used

This system uses two templates:

{{CommonsGallery}} – the gallery container
{{CommonsGalleryItem}} – a single image entry inside the gallery

Editors normally use both together.

---

Template: CommonsGallery

Purpose

Creates a gallery container that will be filled with images from Wikimedia Commons.

Syntax

{{CommonsGallery
 | items =
   <!-- One or more CommonsGalleryItem templates -->
}}

Parameters

Parameter	Required	Description
items	Yes	A list of CommonsGalleryItem entries

---

Template: CommonsGalleryItem

Purpose

Defines a single image inside a Commons Gallery.

Syntax

{{CommonsGalleryItem
 | file = FileNameOnCommons.jpg
 | caption = Caption text
}}

Parameters

Parameter	Required	Description
file	Yes	Exact filename on Wikimedia Commons (case-sensitive)
caption	No	Caption text shown below the image and in the lightbox

---

Basic Example

{{CommonsGallery
 | items =
   {{CommonsGalleryItem
     | file = Sunflower_from_Silesia2.jpg
     | caption = Sunflower plant
   }}
   {{CommonsGalleryItem
     | file = Kerala backwaters, Houseboats, India.jpg
     | caption = Kerala backwaters
   }}
}}

---

Example with Multiple Images

{{CommonsGallery
 | items =
   {{CommonsGalleryItem
     | file = St. Joseph High School, Angamaly IMG 20250915 123237137.jpg
     | caption = St. Joseph High School, Angamaly
   }}
   {{CommonsGalleryItem
     | file = 0 Alphonsa College Pala Kottayam 02.jpg
     | caption = Alphonsa College, Pala
   }}
   {{CommonsGalleryItem
     | file = Kerala backwaters, Houseboats, India.jpg
     | caption = Kerala backwaters
   }}
}}

---

Captions and Attribution

Each image automatically displays:

Caption (if provided)
Author name (from Commons metadata)
License name (linked to the license page)
A link to the original file page on Wikimedia Commons

Example caption display:

Kerala backwaters
© John Doe – CC BY-SA 4.0
View on Wikimedia Commons

Editors do not need to add attribution manually.

---

Lightbox Viewer

Clicking any image opens a lightbox viewer.

Features:

Fullscreen display
Optimized image size for faster loading
Caption and attribution visible
Next / Previous navigation buttons
Keyboard navigation:
- Left arrow – previous image
- Right arrow – next image
- Esc – close lightbox
Mobile-friendly layout

---

Best Practices

File Names

Use the exact filename from Wikimedia Commons
Include spaces and punctuation exactly as on Commons

Example:

Kerala backwaters, Houseboats, India.jpg

---

Captions

Keep captions short and descriptive
Avoid repeating the filename

Good:

Kerala backwaters

Avoid:

Image of Kerala backwaters from Wikimedia Commons

---

Multiple Galleries on One Page

You may use multiple CommonsGallery blocks on the same page.

== School Campus ==
{{CommonsGallery
 | items =
   {{CommonsGalleryItem
     | file = Campus_view.jpg
     | caption = School campus
   }}
}}

== School Activities ==
{{CommonsGallery
 | items =
   {{CommonsGalleryItem
     | file = Sports_day.jpg
     | caption = Sports Day
   }}
}}

---

What Is Not Supported

The following are intentionally not supported:

Single-image embedding templates
Direct <img> tags for Commons files
Inline galleries inside tables
Manual license or attribution text

This keeps the system simple, safe, and consistent.

---

Troubleshooting

Image not loading

Check that the file exists on Wikimedia Commons
Verify spelling and capitalization of the filename

Caption not showing

Ensure the caption parameter is provided
Empty captions are allowed but will not display text

Lightbox not opening

Ensure JavaScript is enabled in the browser
Clear cache and reload the page

---

For Editors

Editors only need to remember two things:

Use

Add images using

Everything else (loading, layout, attribution, lightbox) is automatic.

---

For Maintainers

This system depends on:

MediaWiki:Common.js
MediaWiki:Common.css

Do not modify these files unless you are familiar with MediaWiki JavaScript and CSS.

---

License and Compliance

All images are:

Loaded directly from Wikimedia Commons
Displayed with proper attribution
Linked to the original file description page

This complies with:

Creative Commons license requirements
Wikimedia Commons reuse guidelines

--- <templatedata> { "description": "Creates a responsive image gallery using images from Wikimedia Commons. Images are loaded dynamically and displayed with captions, attribution, and a lightbox viewer.", "params": { "items": { "label": "Gallery items", "description": "List of CommonsGalleryItem templates defining the images in this gallery.", "type": "content", "required": true, "example": " " } }, "format": "block" } </templatedata>