Abp-images tag helper

src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Image/AbpImagePosition.cs

@@ -0,0 +1,10 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Image
+{
+    public enum AbpImagePosition
+    {
+        Default,
+        Right,
+        Left,
+        Center
+    }
+}

src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Image/AbpImageTagHelper.cs

@@ -0,0 +1,23 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Image
+{
+    public class AbpImageTagHelper : AbpTagHelper<AbpImageTagHelper, AbpImageTagHelperService>
+    {
+        public bool? Responsive { get; set; }
+
+        public bool? Thumbnail { get; set; }
+
+        public bool? Rounded { get; set; }
+
+        public AbpImagePosition Position { get; set; } = AbpImagePosition.Default;
+
+        public string Alt { get; set; }
+
+        public string Src { get; set; }
+
+        public AbpImageTagHelper(AbpImageTagHelperService tagHelperService)
+            : base(tagHelperService)
+        {
+
+        }
+    }
+}

src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Image/AbpImageTagHelperService.cs

@@ -0,0 +1,71 @@
+using System;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Image
+{
+    public class AbpImageTagHelperService : AbpTagHelperService<AbpImageTagHelper>
+    {
+
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            output.TagName = "img";
+            SetSourceFile(context,output);
+            SetPosition(context,output);
+            SetResponsive(context,output);
+            SetThumbnail(context,output);
+            SetRounded(context,output);
+            SetAlt(context,output);
+        }
+        
+        protected virtual void SetSourceFile(TagHelperContext context, TagHelperOutput output) {
+            output.Attributes.Add("src",TagHelper.Src);
+        }
+        
+        protected virtual void SetPosition(TagHelperContext context, TagHelperOutput output)
+        {
+            if (TagHelper.Position == default)
+            {
+                return;
+            }
+            if (TagHelper.Position == AbpImagePosition.Left || TagHelper.Position == AbpImagePosition.Right)
+            {
+                output.Attributes.AddClass("float-" + TagHelper.Position.ToString().ToLowerInvariant());
+            }
+            if (TagHelper.Position == AbpImagePosition.Center)
+            {
+                output.PreElement.SetHtmlContent("<div class=\"text-center\">");
+                output.PostElement.SetHtmlContent("</div>");
+            }
+        }
+        
+        protected virtual void SetResponsive(TagHelperContext context, TagHelperOutput output) {
+            if (TagHelper.Responsive ?? false)
+            {
+                output.Attributes.AddClass("img-fluid");
+            }
+        }
+        
+        protected virtual void SetThumbnail(TagHelperContext context, TagHelperOutput output)
+        {
+            if (TagHelper.Thumbnail ?? false)
+            {
+                output.Attributes.AddClass("img-thumbnail");
+            }
+        }
+        
+        protected virtual void SetRounded(TagHelperContext context, TagHelperOutput output)
+        {
+            if (TagHelper.Rounded ?? false)
+            {
+                output.Attributes.AddClass("rounded");
+            }
+        }
+        
+        protected virtual void SetAlt(TagHelperContext context, TagHelperOutput output)
+        {
+            output.Attributes.Add("alt",TagHelper.Alt);
+        }
+
+    }
+}

test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Images.cshtml

@@ -0,0 +1,48 @@
+@page
+@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.ImagesModel
+@{
+    ViewData["Title"] = "Images";
+}
+
+<h2>Images</h2>
+
+<p>Based on <a href="https://getbootstrap.com/docs/4.1/content/images/" target="_blank"> Bootstrap Images</a>.</p>
+
+<h4># Image Examples</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-image src="..." responsive="true"></abp-image>
+    </div>
+    <div class="code-area">
+        <pre>
+&lt;abp-image src=&quot;...&quot; responsive=&quot;true&quot;&gt;&lt;/abp-image&gt;
+</pre>
+    </div>
+</div>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-image src="..." thumbnail="true" rounded="true"></abp-image>
+    </div>
+    <div class="code-area">
+        <pre>
+&lt;abp-image src=&quot;...&quot; thumbnail=&quot;true&quot; rounded=&quot;true&quot;&gt;&lt;/abp-image&gt;
+</pre>
+    </div>
+</div>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-image src="..." rounded="true" position="Left"></abp-image>
+        <abp-image src="..." rounded="true" position="Center"></abp-image>
+        <abp-image src="..." rounded="true" position="Right"></abp-image>
+    </div>
+    <div class="code-area">
+        <pre>
+&lt;abp-image src=&quot;...&quot; rounded=&quot;true&quot; position=&quot;Left&quot;&gt;&lt;/abp-image&gt;
+&lt;abp-image src=&quot;...&quot; rounded=&quot;true&quot; position=&quot;Center&quot;&gt;&lt;/abp-image&gt;
+&lt;abp-image src=&quot;...&quot; rounded=&quot;true&quot; position=&quot;Right&quot;&gt;&lt;/abp-image&gt;
+</pre>
+    </div>
+</div>

test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Images.cshtml.cs

@@ -0,0 +1,17 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
+{
+    public class ImagesModel : PageModel
+    {
+        public void OnGet()
+        {
+
+        }
+    }
+}

test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Index.cshtml

@@ -22,5 +22,6 @@
     <li><a asp-page="Components/breadcrumbs">Breadcrumbs</a></li>
     <li><a asp-page="Components/ProgressBars">Progress Bars</a></li>
     <li><a asp-page="Components/blockquotes">Blockquotes</a></li>
+    <li><a asp-page="Components/images">Images</a></li>
 </ul>