From 819c7bc5d5892c8917cadd19070680f31a19a283 Mon Sep 17 00:00:00 2001
From: Enis Necipoglu <iletisim@enisnecipoglu.com>
Date: Wed, 12 Jun 2024 11:51:11 +0300
Subject: [PATCH 1/3] Make CMS Kit blog post image ratio

---
 .../Pages/CmsKit/BlogPosts/Create.cshtml                 | 2 +-
 .../Pages/CmsKit/BlogPosts/Update.cshtml                 | 2 +-
 .../Pages/Public/CmsKit/Blogs/Index.cshtml               | 2 +-
 .../Pages/Public/CmsKit/Blogs/index.css                  | 9 +++++++++
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Create.cshtml b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Create.cshtml
index 5c855e9ffe..fccd4a60f2 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Create.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Create.cshtml
@@ -60,7 +60,7 @@
     <abp-card-header title="@L["New"].Value"></abp-card-header>
     <abp-card-body>
         <div class="mb-3">
-            <label class="form-label">@L["CoverImage"]</label>
+            <label class="form-label">@L["CoverImage"] <span class="badge text-bg-light">16:9</span></label>
             <input type="file" id="BlogPostCoverImage" class="form-control" />
         </div>
 
diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Update.cshtml b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Update.cshtml
index 673c402c2c..b609624e99 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Update.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Update.cshtml
@@ -68,7 +68,7 @@
                     <br/>
                 }
             </div>
-            <label class="form-label">@L["CoverImage"]</label>
+            <label class="form-label">@L["CoverImage"]<span class="badge text-bg-light">16:9</span></label>
             <input type="file" id="BlogPostCoverImage" class="form-control"/>
         </div>
 
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/Index.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/Index.cshtml
index a0c7163674..6074ed573f 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/Index.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/Index.cshtml
@@ -80,7 +80,7 @@
                             <span class="font-weight-bold author-name-span" data-author-id="@blog.Author.Id">@@@blog.Author?.UserName</span>
                             <small style="opacity:.65;">@blog.CreationTime</small>
                         </p>
-                        <p style="min-height: 60px;">@blog.ShortDescription</p>
+                        <p class="cms-blogpost-desc-preview">@blog.ShortDescription</p>
                         <div class="d-grid gap-2">
                             <a href="/@CmsBlogsWebConsts.BlogsRoutePrefix/@Model.BlogSlug/@blog.Slug" class="btn btn-light">
                                 @L["Read"]
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/index.css b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/index.css
index 19137de2cb..f7ac8bc6c7 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/index.css
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/index.css
@@ -1,4 +1,5 @@
 .card-img-top { 
+    aspect-ratio: 16 / 9;
 }
 
 .popover {
@@ -7,4 +8,12 @@
 
 .author-name-span{
     cursor: pointer;
+}
+
+.cms-blogpost-desc-preview {
+    min-height: 60px;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
 }
\ No newline at end of file

From 328dbc51714da64783f2ad533c1765610e129460 Mon Sep 17 00:00:00 2001
From: enisn <info@enisnecipoglu.com>
Date: Thu, 13 Jun 2024 10:13:45 +0300
Subject: [PATCH 2/3] Update image cropping logic

---
 .../Pages/Public/CmsKit/Blogs/BlogPost.cshtml                | 2 +-
 .../Pages/Public/CmsKit/Blogs/blogPost.css                   | 5 +++++
 .../Pages/Public/CmsKit/Blogs/index.css                      | 3 ++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml
index 51cc8b9848..fabacd79eb 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml
@@ -56,7 +56,7 @@
     <div class="row">
         <div @Html.Raw(isScrollIndexEnabled ? "class=\"col-md-10 col-sm-12\"" : "class=\"col-md-12\"")>
             <abp-card class="mb-4">
-                <img src="/api/cms-kit/media/@Model.ViewModel.CoverImageMediaId" class="card-img-top" onerror="this.src='@dummyImageSource'" />
+            <img src="/api/cms-kit/media/@Model.ViewModel.CoverImageMediaId" class="card-img-ratio" onerror="this.src='@dummyImageSource'" />
                 <input hidden id="BlogId" value="@Model.ViewModel.Id" />
                 <abp-card-body>
                     <abp-row>
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogPost.css b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogPost.css
index d09be3150d..03ed4523e4 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogPost.css
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogPost.css
@@ -22,6 +22,11 @@ span.area-title {
     min-width: 276px;
 }
 
+.card-img-ratio {
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+}
+
 #scroll-index {
     position: sticky;
     top: 20px;
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/index.css b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/index.css
index f7ac8bc6c7..e9a4f2fa19 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/index.css
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/index.css
@@ -1,5 +1,6 @@
-.card-img-top { 
+.card-img-top {
     aspect-ratio: 16 / 9;
+    object-fit: cover;
 }
 
 .popover {

From 878cd16bc3cd5c149802b0aed6c6260306b3164a Mon Sep 17 00:00:00 2001
From: enisn <info@enisnecipoglu.com>
Date: Thu, 13 Jun 2024 10:18:50 +0300
Subject: [PATCH 3/3] Add image filter to file picker

---
 .../Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Create.cshtml  | 2 +-
 .../Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Update.cshtml  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Create.cshtml b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Create.cshtml
index fccd4a60f2..4ed695dfa8 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Create.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Create.cshtml
@@ -61,7 +61,7 @@
     <abp-card-body>
         <div class="mb-3">
             <label class="form-label">@L["CoverImage"] <span class="badge text-bg-light">16:9</span></label>
-            <input type="file" id="BlogPostCoverImage" class="form-control" />
+            <input type="file" id="BlogPostCoverImage" class="form-control" accept="image/*" />
         </div>
 
         <form asp-page="/CmsKit/BlogPosts/Create" id="form-blog-post-create">
diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Update.cshtml b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Update.cshtml
index b609624e99..45bd2c8565 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Update.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Update.cshtml
@@ -69,7 +69,7 @@
                 }
             </div>
             <label class="form-label">@L["CoverImage"]<span class="badge text-bg-light">16:9</span></label>
-            <input type="file" id="BlogPostCoverImage" class="form-control"/>
+            <input type="file" id="BlogPostCoverImage" class="form-control" accept="image/*" />
         </div>
 
         <form asp-page="/CmsKit/BlogPosts/Update" id="form-blog-post-update">