Merge pull request #20025 from abpframework/8.1-cmskit-design

Set a ratio to the CMS Kit blog post images

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Create.cshtml

@@ -60,8 +60,8 @@
     <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" />
+            <input type="file" id="BlogPostCoverImage" class="form-control" accept="image/*" />
         </div>
 
         <form asp-page="/CmsKit/BlogPosts/Create" id="form-blog-post-create">

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Update.cshtml

@@ -68,8 +68,8 @@
                     <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"/>
+            <input type="file" id="BlogPostCoverImage" class="form-control" accept="image/*" />
         </div>
 
         <form asp-page="/CmsKit/BlogPosts/Update" id="form-blog-post-update">

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>

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"]

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;

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/index.css

@@ -1,4 +1,6 @@
-.card-img-top { 
+.card-img-top {
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
 }
 
 .popover {
@@ -7,4 +9,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;
 }