Ranjithsiji: '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...' താൾ സൃഷ്ടിച്ചിരിക്കുന്നു

2025-10-27T14:15:59Z

'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...' താൾ സൃഷ്ടിച്ചിരിക്കുന്നു

പുതിയ താൾ

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 ===
<pre>
{{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
}}
</pre>

=== Vertical Gallery with Custom Colors ===
<pre>
{{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
}}
</pre>

=== Uniform Width Gallery ===
<pre>
{{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
}}
</pre>

=== Scaled to Total Width ===
<pre>
{{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
}}
</pre>

=== Gallery with Custom Links ===
<pre>
{{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)
}}
</pre>

=== Video Gallery with Thumbnails ===
<pre>
{{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
}}
</pre>

=== Left-Aligned Caption Gallery ===
<pre>
{{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
}}
</pre>

== 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|image1=File.jpg|...}} 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

[[Category:Gallery templates]]

ഫലകം:Multiple gallery/doc - നാൾവഴി