From 8bec08657dd7589124f41ab983a3fcdaed255242 Mon Sep 17 00:00:00 2001
From: ccbikai <ccbikai@gmail.com>
Date: Fri, 9 Aug 2024 08:20:53 +0800
Subject: [PATCH] feat: enhance image layout and handling

Improved image display by introducing a responsive grid layout for image lists, optimizing the first image's placement in odd-numbered lists to span across both columns. This change enhances visual appeal and usability, especially on larger screens. Additionally, refactored image retrieval logic to wrap images in a container, dynamically adjusting the class based on the number of images for tailored styling.
---
 src/assets/item.css       | 12 ++++++++++++
 src/lib/telegram/index.js |  5 +++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/assets/item.css b/src/assets/item.css
index 43da170..89f4fd5 100644
--- a/src/assets/item.css
+++ b/src/assets/item.css
@@ -1,6 +1,18 @@
 .content {
   word-break: break-word;
 
+  .image-list-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: masonry;
+
+    &.image-list-odd {
+      :first-child {
+        grid-column: 1 / 3;
+      }
+    }
+  }
+
   img {
     width: calc(100% - var(--box-margin));
   }
diff --git a/src/lib/telegram/index.js b/src/lib/telegram/index.js
index bd13182..dae0690 100644
--- a/src/lib/telegram/index.js
+++ b/src/lib/telegram/index.js
@@ -33,7 +33,7 @@ function getImageStickers($, item, { staticProxy, index }) {
 }
 
 function getImages($, item, { staticProxy, id, index, title }) {
-  return $(item).find('.tgme_widget_message_photo_wrap')?.map((_index, photo) => {
+  const images = $(item).find('.tgme_widget_message_photo_wrap')?.map((_index, photo) => {
     const url = $(photo).attr('style').match(/url\(["'](.*?)["']/)?.[1]
     const popoverId = `modal-${id}-${_index}`
     return `
@@ -44,7 +44,8 @@ function getImages($, item, { staticProxy, id, index, title }) {
         <img class="modal-img" src="${staticProxy + url}" alt="${title}" loading="${index > 15 ? 'eager' : 'lazy'}" />
       </button>
     `
-  })?.get()?.join('')
+  })?.get()
+  return `<div class="image-list-container ${images.length % 2 === 0 ? 'image-list-even' : 'image-list-odd'}">${images?.join('')}</div>`
 }
 
 function getVideo($, item, { staticProxy, index }) {