Merge pull request #560 from rullyrmd/bug/blog-item-summary-default-mg

Fix the BlogItemSummary razor page

close #555

Author: poppastring

source/DasBlog.Web.UI/TagHelpers/Post/PostImageTagHelper.cs

@@ -6,11 +6,12 @@
 namespace DasBlog.Web.TagHelpers.Post
 {
 	public class PostImageTagHelper: TagHelper
-
 	{
 		public PostViewModel Post { get; set; }
 
+		public string DefaultImage { get; set; }
 		public string Css { get; set; }
+		public string Style { get; set; }
 
 		private readonly IDasBlogSettings dasBlogSettings;
 
@@ -19,19 +20,39 @@ public PostImageTagHelper(IDasBlogSettings dasBlogSettings)
 			this.dasBlogSettings = dasBlogSettings;
 		}
 
-		public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
+		public override void Process(TagHelperContext context, TagHelperOutput output)
 		{
-			output.TagMode = TagMode.StartTagAndEndTag;
+			var imgUrl = Post.ImageUrl;
+
+			output.TagMode = TagMode.SelfClosing;
 			output.TagName = "img";
 
+			if (!string.IsNullOrEmpty(imgUrl))
+			{
+				output.Attributes.SetAttribute("src", dasBlogSettings.RelativeToRoot(imgUrl));
+			}
+			else
+			{
+				if (!string.IsNullOrEmpty(DefaultImage))
+				{
+					output.Attributes.SetAttribute("src", DefaultImage);
+				}
+			}
+
 			if (!string.IsNullOrEmpty(Css))
 			{
 				output.Attributes.SetAttribute("class", Css);
 			}
 
-			output.Attributes.SetAttribute("src", dasBlogSettings.RelativeToRoot(Post.ImageUrl));
-			output.Attributes.SetAttribute("alt", Post.Title);
-			await Task.CompletedTask;
+			if (!string.IsNullOrEmpty(Style))
+			{
+				output.Attributes.SetAttribute("style", Style);
+			}
+		}
+
+		public override Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
+		{
+			return Task.Run(() => Process(context, output));
 		}
 	}
 }

source/DasBlog.Web.UI/Themes/darkly/_BlogItemSummary.cshtml

@@ -5,13 +5,14 @@
         <div class="card-body d-flex flex-column align-items-start">
             <small class="text-muted"><post-categories-list post="@Model" /></small>
             <h3 class="mb-0">
-                <post-title-link post=@Model  />
+                <post-title-link post=@Model />
             </h3>
             <small class="mb-1 text-muted"><post-created-date post="@Model" /></small>
             <p class="card-text mb-auto"><post-content post="@Model" strip-html="true" content-length="20" /></p>
 
             <post-title-link post=@Model>Continue reading...</post-title-link>
         </div>
-        <img class="card-img-right flex-auto d-none d-lg-block" style="width: 200px; height: 250px;" alt="Thumbnail [200x250]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22250%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20250%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_166f4e7d3df%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A13pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_166f4e7d3df%22%3E%3Crect%20width%3D%22200%22%20height%3D%22250%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2256.19000244140625%22%20y%3D%22130.97899951934815%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-src="holder.js/200x250?theme=thumb" data-holder-rendered="true">
+
+        <post-image post=@Model css="card-img-right flex-auto d-none d-lg-block" style="width: 200px; height: 250px;"  />
     </div>
 </div>