From cfe603d3ed411ca32402901579ad4ca2e7b71dca Mon Sep 17 00:00:00 2001
From: AlUlkesh <99896447+AlUlkesh@users.noreply.github.com>
Date: Sun, 2 Jun 2024 16:33:30 +0200
Subject: [PATCH] Optimized thumbnails: bugfix and setting css for the
 extension. #253

---
 README.md                | 12 ------------
 scripts/image_browser.py |  6 ++++--
 style.css                | 12 ++++++++++++
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 13d1fd3..0af9de9 100644
--- a/README.md
+++ b/README.md
@@ -56,18 +56,6 @@ Please also check the [discussions](https://github.com/AlUlkesh/stable-diffusion
 
 (Ctrl can be changed in settings)
 
-## Image ratio
-Thumbnails are displayed as squares. Currently the default in automatic1111 is for thumbnails to be cropped for this. If you prefer to see the full image, with black bars, you can add this to user.css (in the main a1111 directory):
-
-```
-.thumbnail-item > img {
-    object-fit: contain !important;
-}
-.thumbnail-lg > img {
-    object-fit: contain !important;
-}
-```
-
 ## Credit
 
 Credit goes to the original maintainer of this extension: https://github.com/yfszzx and to major contributors https://github.com/Klace and https://github.com/EllangoK
diff --git a/scripts/image_browser.py b/scripts/image_browser.py
index aa8147e..3a3431b 100644
--- a/scripts/image_browser.py
+++ b/scripts/image_browser.py
@@ -1008,7 +1008,9 @@ def get_image_page(img_path, page_index, filenames, keyword, sort_by, sort_order
 
     if opts.image_browser_use_thumbnail:
         thumbnail_list = get_thumbnail("image", image_list)
-    thumbnail_list = get_thumbnail("video", image_list)
+    else:
+        thumbnail_list = image_list
+    thumbnail_list = get_thumbnail("video", thumbnail_list)
 
     visible_num = num_of_imgs_per_page if  idx_frm + num_of_imgs_per_page < length else length % num_of_imgs_per_page 
     visible_num = num_of_imgs_per_page if visible_num == 0 else visible_num
@@ -1869,6 +1871,7 @@ def on_ui_settings():
         ("image_browser_scan_exif", "images_scan_exif", True, "Scan Exif-/.txt-data (initially slower, but required for many features to work)"),
         ("image_browser_mod_shift", None, False, "Change CTRL keybindings to SHIFT"),
         ("image_browser_mod_ctrl_shift", None, False, "or to CTRL+SHIFT"),
+        ("image_browser_swipe", None, False, "Swipe left/right navigates to the next image"),
         ("image_browser_ranking_pnginfo", None, False, "Save ranking in image's pnginfo"),
         ("image_browser_page_columns", "images_history_page_columns", 6, "Number of columns on the page"),
         ("image_browser_page_rows", "images_history_page_rows", 6, "Number of rows on the page"),
@@ -1877,7 +1880,6 @@ def on_ui_settings():
         ("image_browser_use_thumbnail", None, False, "Use optimized images in the thumbnail interface (significantly reduces the amount of data transferred)"),
         ("image_browser_thumbnail_size", None, 200, "Size of the thumbnails (px)"),
         ("image_browser_thumbnail_crop", None, False, "Crop thumbnail to square"),
-        ("image_browser_swipe", None, False, "Swipe left/right navigates to the next image"),
         ("image_browser_img_tooltips", None, True, "Enable thumbnail tooltips"),
         ("image_browser_show_progress", None, True, "Show progress indicator"),
         ("image_browser_info_format", None, True, "Initially display Generation Info as formatted"),
diff --git a/style.css b/style.css
index cb56543..d7af23c 100644
--- a/style.css
+++ b/style.css
@@ -58,6 +58,18 @@ button[id$='_image_browser_del_img_btn'] {
   cursor: not-allowed;
 }
 
+/* Fit the image inside the button */
+#tab_image_browser .thumbnail-item > img {
+    object-fit: contain !important;
+}
+#tab_image_browser .thumbnail-lg > img {
+    object-fit: contain !important;
+}
+/*Fit the button around the image
+#tab_image_browser .thumbnail-item {
+    aspect-ratio: auto !important;
+}*/
+
 #tab_image_browser .thumbnails .thumbnail-item:first-child{
   margin-left: var(--spacing-lg);
 }