Module:ElementPortraitCarousel: Difference between revisions

Line 21:

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

Line 30:

Line 51:

local images = {}

for image in portrait:gmatch("[^;]+") do

~~table.insert(images,~~ mw.text.trim(image))

local imageName = mw.text.trim(image)

local imageUrl = formatImageUrl(imageName)

if imageUrl and imageUrl ~= "" then

table.insert(images, {

name = imageName,

url = imageUrl

})

end

return images

Line 36:

Line 64:

-- Create single image HTML

local function createSingleImage(~~image~~, maxWidth)

local function createSingleImage(imageData, maxWidth)

return string.format(

'<div class="person-portrait-carousel">' ..

'<img src="%s" style="max-width:%s;" alt="Portrait" />' ..

'</div>',

~~image~~, maxWidth

imageData.url, maxWidth

)

end

Line 53:

Line 81:

'<div class="carousel-container">' ..

'<div class="carousel-images" id="carousel-%s">' ..

'<div class="carousel-item carousel-orbital-1"><img src="%s" alt="Portrait 1" /></div>' ..

'<div class="carousel-item carousel-orbital-1" data-index="1"><img src="%s" alt="Portrait 1" /></div>' ..

'<div class="carousel-item carousel-orbital-2"><img src="%s" alt="Portrait 2" /></div>' ..

'<div class="carousel-item carousel-orbital-2" data-index="2"><img src="%s" alt="Portrait 2" /></div>' ..

'</div></div></div>',

navId,

images[1], images[2]

images[1].url, images[2].url

)

end

Line 67:

Line 95:

-- Generate carousel items

for i, ~~image~~ in ipairs(images) do

for i, imageData in ipairs(images) do

local class = i == 1 and "carousel-visible" or "carousel-hidden"

-- Add positioning classes for 3+ images

if i == 2 then

class = class .. " carousel-right"

elseif i == #images then

class = class .. " carousel-left"

end

table.insert(itemsHtml, string.format(

'<div class="carousel-item %s"><img src="%s" alt="Portrait %d" /></div>',

'<div class="carousel-item %s" data-index="%d"><img src="%s" alt="Portrait %d" /></div>',

class, ~~image~~, i

class, i, imageData.url, i

))

end

Line 79:

Line 114:

'<div class="person-portrait-carousel">' ..

'<div class="carousel-container">' ..

'<div class="carousel-nav carousel-prev~~" onclick="rotateCarousel(\'%s\', \'prev\')~~">◀</div>' ..

'<div class="carousel-nav carousel-prev">◀</div>' ..

'<div class="carousel-images" id="carousel-%s">%s</div>' ..

'<div class="carousel-nav carousel-next~~" onclick="rotateCarousel(\'%s\', \'next\')~~">▶</div>' ..

'<div class="carousel-nav carousel-next">▶</div>' ..

'</div></div>',

~~navId,~~ navId, table.concat(itemsHtml)~~, navId~~

navId, table.concat(itemsHtml)

)

end

@@ Line 21: / Line 21: @@
      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
@@ Line 30: / Line 51: @@
      local images = {}
      for image in portrait:gmatch("[^;]+") do
-         table.insert(images, mw.text.trim(image))
+         local imageName = mw.text.trim(image)
+        local imageUrl = formatImageUrl(imageName)
+        if imageUrl and imageUrl ~= "" then
+            table.insert(images, {
+                name = imageName,
+                url = imageUrl
+            })
+        end
      end
      return images
@@ Line 36: / Line 64: @@
 -- Create single image HTML
-local function createSingleImage(image, maxWidth)
+local function createSingleImage(imageData, maxWidth)
      return string.format(
          '<div class="person-portrait-carousel">' ..
          '<img src="%s" style="max-width:%s;" alt="Portrait" />' ..
          '</div>',
-         image, maxWidth
+         imageData.url, maxWidth
      )
 end
@@ Line 53: / Line 81: @@
          '<div class="carousel-container">' ..
          '<div class="carousel-images" id="carousel-%s">' ..
-         '<div class="carousel-item carousel-orbital-1"><img src="%s" alt="Portrait 1" /></div>' ..
+         '<div class="carousel-item carousel-orbital-1" data-index="1"><img src="%s" alt="Portrait 1" /></div>' ..
-         '<div class="carousel-item carousel-orbital-2"><img src="%s" alt="Portrait 2" /></div>' ..
+         '<div class="carousel-item carousel-orbital-2" data-index="2"><img src="%s" alt="Portrait 2" /></div>' ..
          '</div></div></div>',
          navId,
-         images[1], images[2]
+         images[1].url, images[2].url
      )
 end
@@ Line 67: / Line 95: @@
      -- Generate carousel items
-     for i, image in ipairs(images) do
+     for i, imageData in ipairs(images) do
          local class = i == 1 and "carousel-visible" or "carousel-hidden"
+        -- Add positioning classes for 3+ images
+        if i == 2 then
+            class = class .. " carousel-right"
+        elseif i == #images then
+            class = class .. " carousel-left"
+        end
          table.insert(itemsHtml, string.format(
-             '<div class="carousel-item %s"><img src="%s" alt="Portrait %d" /></div>',
+             '<div class="carousel-item %s" data-index="%d"><img src="%s" alt="Portrait %d" /></div>',
-             class, image, i
+             class, i, imageData.url, i
          ))
      end
@@ Line 79: / Line 114: @@
          '<div class="person-portrait-carousel">' ..
          '<div class="carousel-container">' ..
-         '<div class="carousel-nav carousel-prev" onclick="rotateCarousel(\'%s\', \'prev\')">&#9664;</div>' ..
+         '<div class="carousel-nav carousel-prev">&#9664;</div>' ..
          '<div class="carousel-images" id="carousel-%s">%s</div>' ..
-         '<div class="carousel-nav carousel-next" onclick="rotateCarousel(\'%s\', \'next\')">&#9654;</div>' ..
+         '<div class="carousel-nav carousel-next">&#9654;</div>' ..
          '</div></div>',
-         navId, navId, table.concat(itemsHtml), navId
+         navId, table.concat(itemsHtml)
      )
 end