Schoolwiki

"ഘടകം:Multiple gallery" എന്ന താളിന്റെ പതിപ്പുകൾ തമ്മിലുള്ള വ്യത്യാസം

ഘടകം സംവാദം

ഘടകം:Multiple gallery (മൂലരൂപം കാണുക)

20:13, 27 ഒക്ടോബർ 2025-നു നിലവിലുണ്ടായിരുന്ന രൂപം

3,216 ബൈറ്റുകൾ നീക്കംചെയ്തിരിക്കുന്നു ,  27 ഒക്ടോബർ
തിരുത്തലിനു സംഗ്രഹമില്ല
(create a module)
 
No edit summary
 
(ഒരേ ഉപയോക്താവ് ചെയ്ത ഇടയ്ക്കുള്ള ഒരു നാൾപ്പതിപ്പ് പ്രദർശിപ്പിക്കുന്നില്ല)
വരി 9: വരി 9:
end
end


-- Helper function to calculate scaled dimensions
-- Helper function to sanitize text for HTML output
local function calculateScaledDimensions(images, totalWidth)
local function sanitize(text)
    local totalOriginalWidth = 0
     if not text then return '' end
    local baseHeight = nil
     return mw.text.encode(text)
   
    -- Find the base height (from first image with height specified)
    for _, img in ipairs(images) do
        if img.height and img.width then
            baseHeight = img.height
            break
        end
    end
   
     if not baseHeight then
        return images -- Can't scale without height info
    end
      
    -- Calculate total width at same height
    for _, img in ipairs(images) do
        if img.height and img.width then
            local scaledWidth = (img.width * baseHeight) / img.height
            totalOriginalWidth = totalOriginalWidth + scaledWidth
        end
    end
   
    -- Scale each image
    local scaleFactor = totalWidth / totalOriginalWidth
    for i, img in ipairs(images) do
        if img.height and img.width then
            images[i].scaledWidth = math.floor((img.width * baseHeight * scaleFactor) / img.height)
            images[i].scaledHeight = math.floor(baseHeight * scaleFactor)
        end
    end
   
    return images
end
end


വരി 51: വരി 20:
      
      
     -- Get configuration parameters
     -- Get configuration parameters
     local align = args.align or 'right' -- right (default), left, center
    local mode = args.mode or 'horizontal' -- horizontal, vertical, or box
     local direction = args.direction or 'horizontal' -- horizontal (default), vertical
     local align = args.align or 'right' -- right, left, center, none
    local width = args.width or '100%'
     local height = args.height or '180px' -- default height for horizontal
    local boxWidth = args.boxwidth or '150px' -- width for box mode
    local boxHeight = args.boxheight or '150px' -- height for box mode
     local bgColor = parseColor(args['background color'])
     local bgColor = parseColor(args['background color'])
     local headerBg = parseColor(args.header_background)
     local headerBg = parseColor(args.header_background)
     local headerAlign = args.header_align or 'center'
     local headerAlign = args.header_align or 'center'
     local header = args.header or ''
     local header = args.header or ''
    local width = args.width -- uniform width for all images
    local totalWidth = tonumber(args.total_width) -- total width for scaling
     local captionAlign = args.caption_align or 'left'
     local captionAlign = args.caption_align or 'left'
     local footerBg = parseColor(args.footer_background)
     local footerBg = parseColor(args.footer_background)
വരി 66: വരി 37:
     -- Collect all images and their properties
     -- Collect all images and their properties
     local images = {}
     local images = {}
     for i = 1, 10 do
     for i = 1, 50 do -- Extended to 50 images
         if args['image' .. i] then
         if args['image' .. i] or args['file' .. i] then
             table.insert(images, {
             table.insert(images, {
                 file = args['image' .. i],
                 file = args['image' .. i] or args['file' .. i],
                 width = tonumber(args['width' .. i]),
                 width = args['width' .. i],
                 height = tonumber(args['height' .. i]),
                 height = args['height' .. i],
                 alt = args['alt' .. i] or '',
                 alt = args['alt' .. i] or '',
                 link = args['link' .. i],
                 link = args['link' .. i],
വരി 81: വരി 52:
      
      
     if #images == 0 then
     if #images == 0 then
         return '<div class="error">No images provided. Use image1, image2, etc.</div>'
         return '<div class="error">No images provided for gallery</div>'
     end
     end
      
      
     -- Calculate scaled dimensions if total_width is specified
     -- Build the HTML structure
     if totalWidth then
    local html = mw.html.create('div')
         images = calculateScaledDimensions(images, totalWidth)
    html:addClass('responsive-gallery-container')
    html:addClass('gallery-' .. mode)
   
    -- Set alignment
     if align ~= 'none' then
         if align == 'left' then
            html:css('float', 'left')
            html:css('margin-right', '1em')
        elseif align == 'right' then
            html:css('float', 'right')
            html:css('margin-left', '1em')
        elseif align == 'center' then
            html:css('margin-left', 'auto')
            html:css('margin-right', 'auto')
        end
     end
     end
      
      
    -- Create main container
     -- Set container width
    local container = mw.html.create('div')
     if width ~= '100%' then
        :addClass('responsive-gallery-container')
         html:css('width', width)
        :addClass('gallery-align-' .. align)
   
     -- Set container alignment
     if align == 'center' then
         container:css('margin', '0 auto')
            :css('display', 'table')
    elseif align == 'left' then
        container:css('float', 'left')
            :css('margin-right', '1em')
    elseif align == 'right' then
        container:css('float', 'right')
            :css('margin-left', '1em')
     end
     end
      
      
     -- Create gallery box
     -- Create gallery box
     local box = container:tag('div')
     local box = html:tag('div')
        :addClass('responsive-gallery-box')
    box:addClass('responsive-gallery-box')
   
     if bgColor then
     if bgColor then
         box:css('background-color', bgColor)
         box:css('background-color', bgColor)
    else
        box:css('background-color', '#f8f9fa')
     end
     end
   
    box:css('border', '1px solid #c8ccd1')
        :css('padding', '8px')
        :css('margin', '0.5em 0')
      
      
     -- Add header if provided
     -- Add header if provided
     if header ~= '' then
     if header ~= '' then
         local headerDiv = box:tag('div')
         local headerDiv = box:tag('div')
            :addClass('gallery-header')
        headerDiv:addClass('gallery-header')
            :css('text-align', headerAlign)
        headerDiv:css('text-align', headerAlign)
            :css('font-weight', 'bold')
            :css('padding', '8px')
            :css('margin-bottom', '8px')
            :css('border-bottom', '1px solid #c8ccd1')
       
         if headerBg then
         if headerBg then
             headerDiv:css('background-color', headerBg)
             headerDiv:css('background-color', headerBg)
         end
         end
       
         headerDiv:wikitext(header)
         headerDiv:wikitext(header)
     end
     end
      
      
     -- Create images container
     -- Create images container with flexbox
     local imagesContainer = box:tag('div')
     local imagesContainer = box:tag('div')
        :addClass('gallery-images')
    imagesContainer:addClass('gallery-images')
        :addClass('gallery-' .. direction)
      
      
     if direction == 'horizontal' then
    -- Set flexbox direction based on mode
         imagesContainer:css('display', 'flex')
     if mode == 'vertical' then
            :css('flex-wrap', 'wrap')
         imagesContainer:addClass('gallery-vertical')
            :css('justify-content', 'center')
    elseif mode == 'box' then
            :css('gap', '4px')
        imagesContainer:addClass('gallery-box')
     else
     else
         imagesContainer:css('display', 'flex')
         imagesContainer:addClass('gallery-horizontal')
            :css('flex-direction', 'column')
            :css('gap', '8px')
     end
     end
      
      
     -- Generate each gallery item
     -- Add each image
     for idx, img in ipairs(images) do
     for i, img in ipairs(images) do
         local item = imagesContainer:tag('div')
         local item = imagesContainer:tag('div')
            :addClass('gallery-item')
        item:addClass('gallery-item')
            :css('display', 'inline-block')
            :css('vertical-align', 'top')
          
          
         if direction == 'vertical' then
        -- Set item sizing based on mode
             item:css('width', '100%')
         if mode == 'box' then
            item:css('width', boxWidth)
            item:css('height', boxHeight)
        elseif mode == 'horizontal' then
            item:css('height', height)
        elseif mode == 'vertical' then
             if img.width then
                item:css('width', img.width .. 'px')
            end
         end
         end
          
          
         -- Create image wrapper
         -- Create image wrapper
         local imgWrapper = item:tag('div')
         local wrapper = item:tag('div')
            :addClass('gallery-image-wrapper')
        wrapper:addClass('gallery-image-wrapper')
            :css('text-align', 'center')
            :css('background', '#fff')
            :css('border', '1px solid #c8ccd1')
            :css('padding', '3px')
          
          
         -- Build image tag
         -- Build image markup
         local imgTag = '[[File:' .. img.file
         local imageMarkup = '[[File:' .. img.file
          
          
         -- Determine width to use
         -- Add image parameters
        local imageWidth
         if mode == 'box' then
         if width then
             imageMarkup = imageMarkup .. '|' .. boxWidth .. 'x' .. boxHeight
             imageWidth = width .. 'px'
         elseif mode == 'horizontal' then
         elseif totalWidth and img.scaledWidth then
             imageMarkup = imageMarkup .. '|x' .. height
             imageWidth = img.scaledWidth .. 'px'
         elseif mode == 'vertical' then
         elseif img.width then
            if img.width then
            imageWidth = img.width .. 'px'
                imageMarkup = imageMarkup .. '|' .. img.width .. 'px'
        else
             end
             imageWidth = '200px'
         end
         end
          
          
        imgTag = imgTag .. '|' .. imageWidth
         -- Add link if specified
       
         if img.link then
         -- Add thumbtime for video files
             imageMarkup = imageMarkup .. '|link=' .. img.link
         if img.thumbtime then
             imgTag = imgTag .. '|thumbtime=' .. img.thumbtime
         end
         end
          
          
         -- Add alt text
         -- Add alt text
         if img.alt ~= '' then
         if img.alt ~= '' then
             imgTag = imgTag .. '|alt=' .. img.alt
             imageMarkup = imageMarkup .. '|alt=' .. img.alt
         end
         end
          
          
         -- Add link (or disable linking if link is explicitly empty)
         -- Add thumbtime for videos
         if img.link ~= nil then
         if img.thumbtime then
             if img.link == '' then
             imageMarkup = imageMarkup .. '|thumbtime=' .. img.thumbtime
                imgTag = imgTag .. '|link='
            else
                imgTag = imgTag .. '|link=' .. img.link
            end
         end
         end
          
          
         imgTag = imgTag .. ']]'
         imageMarkup = imageMarkup .. ']]'
        wrapper:wikitext(imageMarkup)
          
          
        imgWrapper:wikitext(imgTag)
         -- Add caption if provided
       
         -- Add caption if exists
         if img.caption ~= '' then
         if img.caption ~= '' then
             item:tag('div')
             local caption = item:tag('div')
                :addClass('gallery-caption')
            caption:addClass('gallery-caption')
                :css('text-align', captionAlign)
            caption:css('text-align', captionAlign)
                :css('padding', '4px 2px')
            caption:wikitext(img.caption)
                :css('font-size', '94%')
                :css('line-height', '1.4')
                :wikitext(img.caption)
         end
         end
     end
     end
വരി 227: വരി 175:
     if footer ~= '' then
     if footer ~= '' then
         local footerDiv = box:tag('div')
         local footerDiv = box:tag('div')
            :addClass('gallery-footer')
        footerDiv:addClass('gallery-footer')
            :css('text-align', footerAlign)
        footerDiv:css('text-align', footerAlign)
            :css('padding', '8px')
            :css('margin-top', '8px')
            :css('border-top', '1px solid #c8ccd1')
            :css('font-size', '94%')
       
         if footerBg then
         if footerBg then
             footerDiv:css('background-color', footerBg)
             footerDiv:css('background-color', footerBg)
         end
         end
       
         footerDiv:wikitext(footer)
         footerDiv:wikitext(footer)
     end
     end
      
      
    -- Add responsive CSS
     return tostring(html)
    local css = mw.html.create('style')
        :wikitext([[
.responsive-gallery-container {
    margin: 1em 0;
    clear: both;
}
 
.responsive-gallery-box {
    box-sizing: border-box;
    overflow: hidden;
}
 
.gallery-images {
    width: 100%;
}
 
.gallery-item {
    margin: 2px;
    transition: transform 0.2s ease;
}
 
.gallery-item:hover {
    transform: scale(1.02);
}
 
.gallery-image-wrapper {
    line-height: 0;
}
 
.gallery-image-wrapper img {
    max-width: 100%;
    height: auto;
}
 
.gallery-caption {
    word-wrap: break-word;
    overflow-wrap: break-word;
}
 
/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .responsive-gallery-container {
        float: none !important;
        margin: 1em 0 !important;
        width: 100% !important;
    }
   
    .gallery-horizontal {
        flex-direction: column !important;
        align-items: center;
    }
   
    .gallery-item {
        max-width: 100% !important;
    }
   
    .gallery-image-wrapper img {
        max-width: 100% !important;
        height: auto !important;
    }
}
 
@media (max-width: 480px) {
    .responsive-gallery-box {
        padding: 4px !important;
    }
   
    .gallery-header,
    .gallery-footer {
        padding: 6px !important;
        font-size: 90% !important;
    }
   
    .gallery-caption {
        font-size: 85% !important;
        padding: 3px 1px !important;
    }
   
    .gallery-item {
        margin: 1px !important;
    }
}
        ]])
   
     return tostring(css) .. tostring(container)
end
end


return p
return p
"https://schoolwiki.in/പ്രത്യേകം:മൊബൈൽവ്യത്യാസം/2890234...2890242" എന്ന താളിൽനിന്ന് ശേഖരിച്ചത്