ഫലകം:Multiple gallery/doc
This template creates a responsive image gallery with multiple layout options.
Parameters
Layout Parameters
- align - Alignment of the gallery box: right (default), left, center
- direction - Layout direction: horizontal (default), vertical
- background color - Background color of the box (e.g., #f0f0f0, lightblue)
- width - Sets the same width for all images (in pixels, integer only, overrides individual width[n])
- total_width - Scales all images to same height with this total width (don't use with width parameter)
Header Parameters
- header - Text for the gallery header
- header_background - Background color for header
- header_align - Header text alignment: center (default), left, right
- footer - Caption that spans entire gallery box
- footer_background - Background color for footer
- footer_align - Footer text alignment: left (default), center, right
Image Parameters
For each image (where [n] = 1 to 10):
- image[n] - Filename of the image (required)
- width[n] - Width in pixels (integer, no "px") or original width if using total_width
- height[n] - Original height in pixels (required if using total_width)
- alt[n] - Alt text description for the image
- link[n] - Page to link when image is clicked (empty value disables linking)
- thumbtime[n] - For video files, time for thumbnail (seconds or HH:MM:SS)
- caption[n] - Caption text for the image
Caption Parameters
- caption_align - Caption alignment: left (default), center, right
Usage Examples
Basic Horizontal Gallery
{{Gallery
|align=center
|direction=horizontal
|header=My Photo Collection
|header_align=center
|image1=Example1.jpg
|width1=200
|caption1=First photo
|image2=Example2.jpg
|width2=200
|caption2=Second photo
|image3=Example3.jpg
|width3=200
|caption3=Third photo
|footer=All photos taken in 2024
|footer_align=center
}}
Vertical Gallery with Custom Colors
{{Gallery
|align=right
|direction=vertical
|background color=#e8f4f8
|header=Vertical Layout
|header_background=#d0e8f0
|header_align=left
|image1=Photo1.jpg
|width1=300
|alt1=Description of first photo
|caption1=First image in vertical layout
|image2=Photo2.jpg
|width2=300
|alt2=Description of second photo
|caption2=Second image
|footer=Gallery footer text
|footer_background=#d0e8f0
}}
Uniform Width Gallery
{{Gallery
|direction=horizontal
|width=250
|header=Same Size Images
|image1=Image1.jpg
|caption1=All images same width
|image2=Image2.jpg
|caption2=Using width parameter
|image3=Image3.jpg
|caption3=Overrides individual widths
}}
Scaled to Total Width
{{Gallery
|direction=horizontal
|total_width=800
|header=Scaled Gallery
|image1=Photo1.jpg
|width1=1200
|height1=800
|caption1=Original: 1200x800
|image2=Photo2.jpg
|width2=1600
|height2=1200
|caption2=Original: 1600x1200
|image3=Photo3.jpg
|width3=800
|height3=600
|caption3=Original: 800x600
|footer=All scaled to same height, total width 800px
}}
Gallery with Custom Links
{{Gallery
|image1=Example1.jpg
|link1=Page_Name
|caption1=Links to Page_Name
|image2=Example2.jpg
|link2=
|caption2=No link (linking disabled)
|image3=Example3.jpg
|caption3=Links to image description (default)
}}
Video Gallery with Thumbnails
{{Gallery
|image1=Video1.ogv
|thumbtime1=5
|width1=300
|caption1=Thumbnail at 5 seconds
|image2=Video2.ogv
|thumbtime2=1:30
|width2=300
|caption2=Thumbnail at 1 min 30 sec
}}
Left-Aligned Caption Gallery
{{Gallery
|direction=horizontal
|caption_align=left
|image1=Photo1.jpg
|width1=200
|caption1=Left-aligned caption text
|image2=Photo2.jpg
|width2=200
|caption2=All captions align left
}}
Installation Instructions
1. Create the Module:
- Navigate to: Module:Gallery on your wiki - Copy and paste the Lua module code - Save the page
2. Create the Template:
- Navigate to: Template:Gallery on your wiki - Copy this entire page content - Save the page
3. Use in Articles:
- Add ഫലകം:Gallery to any page - Customize with the parameters listed above
Complete Feature List
✓ Alignment Options: Left, center, or right alignment for the entire gallery ✓ Direction Modes: Horizontal (side-by-side) or vertical (stacked) layouts ✓ Uniform Sizing: Set same width for all images with width parameter ✓ Proportional Scaling: Scale images to same height with total_width parameter ✓ Headers & Footers: Add titled headers and spanning footers with custom backgrounds ✓ Custom Colors: Set background colors for box, header, and footer ✓ Image Captions: Individual captions with alignment control ✓ Alt Text Support: Accessibility support with alt text for each image ✓ Custom Links: Link images to specific pages or disable linking entirely ✓ Video Support: Set thumbnail times for Ogg Theora video files ✓ Mobile Responsive: Automatically adapts to tablet and mobile screens ✓ Hover Effects: Subtle zoom effect on image hover ✓ Up to 10 Images: Support for image1 through image10
Mobile Behavior
The gallery automatically responds to screen size:
- Desktop (>768px): Full layout as specified
- Tablet (≤768px):
- Floats removed, centered layout - Horizontal galleries convert to vertical - Images scale to fit screen
- Mobile (≤480px):
- Reduced padding and margins - Smaller font sizes for captions - Optimized spacing - Full-width images
Important Notes
⚠️ Do NOT use both width and total_width - These parameters conflict
⚠️ For total_width: You must specify both width[n] and height[n] for each image
⚠️ Link parameter: Setting link[n]= (empty) disables linking entirely
⚠️ Free licensed images: Be careful with link parameter on GFDL/CC licensed images
⚠️ Video files: Use thumbtime[n] to set which frame appears as thumbnail