From 93b25fc4f1106fc5d40ecab06e82390a24899273 Mon Sep 17 00:00:00 2001
From: Prayag <55829513+prayag17@users.noreply.github.com>
Date: Fri, 11 Dec 2020 20:40:45 +0530
Subject: [PATCH] Add names to previews and fix the size of images

---
 .../Configuration/configurationpage.html      | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html b/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html
index aca2550..6e9f783 100644
--- a/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html
+++ b/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html
@@ -81,11 +81,11 @@
     function loadPreviews(skin){
       var html = "";
           skin.previews.forEach(element => {
+           html += getImgnames(element.name);  
            html += getImage(element.url);
           });
           return html;
-        }
-
+    }
 
     function getCheckBox ( option) {
       var html = "";
@@ -155,11 +155,17 @@
       return html
 
       }
-      function getImage(url){
+        function getImage(url){
         var html = "";
-        html += '<img src="'+url+'">';
+        html += '<fieldset class="verticalSection verticalSection-extrabottompadding"><img src="'+url+'">';
         return html;
-      }             
+      }
+
+      function getImgnames(name){
+        var html = "";
+        html += '<legend>'+name+'</legend></fieldset>';
+        return html;
+      }          
         
       function createCss(){
         var savedHtml = "";
@@ -285,7 +291,11 @@
       return false;
     });
     </script>
-    
+    <style>
+        img{
+            width: 100%;
+        }
+    </style>
     </div>
 </body>
 </html>