ICANNWiki

Module:ElementPortraitCarousel: Difference between revisions

← Older editNewer edit →
MarkWD (talk | contribs)
Bureaucrats, Check users, Interface administrators, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Editors (Semantic MediaWiki), steward, Suppressors, Administrators, Temporary account IP viewers
25,057 edits
// via Wikitext Extension for VSCode
// via Wikitext Extension for VSCode
Line 21: Line 21:
     carouselClass = "person-portrait-carousel"
     carouselClass = "person-portrait-carousel"
}
}
-- Helper function to create a properly formatted image URL
local function formatImageUrl(imageName)
    -- Remove any File: or Image: prefix if present
    imageName = imageName:gsub('^[Ff]ile:', '')
    imageName = imageName:gsub('^[Ii]mage:', '')
   
    -- Format the URL using MediaWiki's makeImageLink function
    local imageTitle = mw.title.new('File:' .. imageName)
    if not imageTitle then
        return '' -- Invalid title
    end
   
    -- Use thumb with a large size to get the full image
    local imageObj = mw.image.new(imageTitle.text)
    if not imageObj then
        return '' -- Image doesn't exist
    end
   
    return imageObj:url()
end


-- Split portrait field by semicolons
-- Split portrait field by semicolons
Line 52: Line 31:
     for image in portrait:gmatch("[^;]+") do
     for image in portrait:gmatch("[^;]+") do
         local imageName = mw.text.trim(image)
         local imageName = mw.text.trim(image)
         local imageUrl = formatImageUrl(imageName)
         -- Store just the image name, we'll use MediaWiki's renderer
         if imageUrl and imageUrl ~= "" then
         if imageName and imageName ~= "" then
             table.insert(images, {
             table.insert(images, imageName)
                name = imageName,
                url = imageUrl
            })
         end
         end
     end
     end
Line 64: Line 40:


-- Create single image HTML
-- Create single image HTML
local function createSingleImage(imageData, maxWidth)
local function createSingleImage(imageName, maxWidth)
    local frame = mw.getCurrentFrame()
    -- Use wiki syntax for images via preprocess
    local img = frame:preprocess(string.format('[[File:%s|%s]]', imageName, maxWidth))
   
     return string.format(
     return string.format(
         '<div class="person-portrait-carousel">' ..
         '<div class="person-portrait-carousel">%s</div>',
        '<img src="%s" style="max-width:%s;" alt="Portrait" />' ..
         img
        '</div>',
         imageData.url, maxWidth
     )
     )
end
end
Line 76: Line 54:
local function createDualImages(images, maxWidth)
local function createDualImages(images, maxWidth)
     local navId = mw.uri.anchorEncode(mw.title.getCurrentTitle().text or "person")
     local navId = mw.uri.anchorEncode(mw.title.getCurrentTitle().text or "person")
    local frame = mw.getCurrentFrame()
   
    -- Use wiki syntax for images through preprocess
    local img1 = frame:preprocess(string.format('[[File:%s|%s]]', images[1], maxWidth))
    local img2 = frame:preprocess(string.format('[[File:%s|%s]]', images[2], maxWidth))
      
      
     return string.format(
     return string.format(
Line 81: Line 64:
         '<div class="carousel-container">' ..
         '<div class="carousel-container">' ..
         '<div class="carousel-images" id="carousel-%s">' ..
         '<div class="carousel-images" id="carousel-%s">' ..
         '<div class="carousel-item carousel-orbital-1" data-index="1"><img src="%s" alt="Portrait 1" /></div>' ..
         '<div class="carousel-item carousel-orbital-1" data-index="1">%s</div>' ..
         '<div class="carousel-item carousel-orbital-2" data-index="2"><img src="%s" alt="Portrait 2" /></div>' ..
         '<div class="carousel-item carousel-orbital-2" data-index="2">%s</div>' ..
         '</div></div></div>',
         '</div></div></div>',
         navId,
         navId,
         images[1].url, images[2].url
         img1, img2
     )
     )
end
end
Line 93: Line 76:
     local itemsHtml = {}
     local itemsHtml = {}
     local navId = mw.uri.anchorEncode(mw.title.getCurrentTitle().text or "person")
     local navId = mw.uri.anchorEncode(mw.title.getCurrentTitle().text or "person")
    local frame = mw.getCurrentFrame()
      
      
     -- Generate carousel items
     -- Generate carousel items
     for i, imageData in ipairs(images) do
     for i, imageName in ipairs(images) do
         local class = i == 1 and "carousel-visible" or "carousel-hidden"
         local class = i == 1 and "carousel-visible" or "carousel-hidden"
         -- Add positioning classes for 3+ images
         -- Add positioning classes for 3+ images
Line 103: Line 87:
             class = class .. " carousel-left"
             class = class .. " carousel-left"
         end
         end
       
        -- Use wiki syntax for images
        local img = frame:preprocess(string.format('[[File:%s|%s]]', imageName, maxWidth))
          
          
         table.insert(itemsHtml, string.format(
         table.insert(itemsHtml, string.format(
             '<div class="carousel-item %s" data-index="%d"><img src="%s" alt="Portrait %d" /></div>',
             '<div class="carousel-item %s" data-index="%d">%s</div>',
             class, i, imageData.url, i
             class, i, img
         ))
         ))
     end
     end
Retrieved from "https://staging.icannwiki.org/Module:ElementPortraitCarousel"