ഫലകം:CommonsGallery/doc

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:

1. {{CommonsGallery}} – the gallery container
2. {{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:

1. Caption (if provided)
2. Author name (from Commons metadata)
3. License name (linked to the license page)
4. 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:

1. Use

1. 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

---