CmsKit - Implement BLogPost Cover-image to public site

modules/cms-kit/src/Volo.CmsKit.Public.Application.Contracts/Volo/CmsKit/Public/Blogs/BlogPostPublicDto.cs

@@ -16,7 +16,9 @@ namespace Volo.CmsKit.Public.Blogs
         public string ShortDescription { get; set; }
 
         public string Content { get; set; }
-        
+
+        public Guid? CoverImage { get; set; }
+
         public CmsUserDto Author { get; set; }
     }
 }

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPost/Default.cshtml

@@ -4,14 +4,16 @@
 
 @inject IStringLocalizer<CmsKitResource> L
 
-<h1>@Model.Title</h1>
+@{
+    const string dummyImageSource = "https://dummyimage.com/300x200/a3a3a3/fff.png";
+}
 
 <abp-card>
-    <abp-card-header>
+    <img src="/api/cms-kit/media/@Model.CoverImage" class="card-img-top" onerror="this.src='@dummyImageSource'" />
+    <abp-card-body>
+        <abp-card-title>@Model.Title</abp-card-title>
         <abp-card-subtitle>@Model.Author?.UserName</abp-card-subtitle>
-    </abp-card-header>
 
-    <abp-card-body>
         @Html.Raw(Model.Content)
     </abp-card-body>
     <abp-card-footer>

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/Index.cshtml

@@ -1,12 +1,16 @@
 @page
 
 @using Volo.CmsKit.Public.Web.Pages
-@using Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Blogs 
+@using Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Blogs
 
 @inherits CmsKitPublicPageBase
 
 @model IndexModel
 
+@{
+    const string dummyImageSource = "https://dummyimage.com/300x200/a3a3a3/fff.png";
+}
+
 <abp-row id="blogs-container">
     @foreach (var blog in Model.Blogs.Items)
     {
@@ -21,7 +25,14 @@
                     </abp-card-subtitle>
                 </abp-card-header>
                 <abp-card-body>
-                    <img src="/api/cms-kit-public/blog-posts/@blog.Id/cover-image" class="card-img-top" style="max-width:200px;max-height:200px;" onerror="this.src='https://dummyimage.com/300x200/a3a3a3/fff.png'" />
+                    @if (blog.CoverImage != null)
+                    {
+                        <img src="/api/cms-kit/media/@blog.CoverImage" class="card-img-top" style="max-width:200px;max-height:200px;" onerror="this.src='@dummyImageSource'" />
+                    }
+                    else
+                    {
+                        <img src="@dummyImageSource" class="card-img-top" style="max-width:200px;max-height:200px;" />
+                    }
                     <abp-card-text>
                         @blog.ShortDescription
                     </abp-card-text>