ഫലകം:Multiple gallery

ഫലകത്തിന്റെ വിവരണം

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 Parameters

• 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