Add support for responsive images

Tall-Paul · Jul 10, 2019 · 0df4975 · 0df4975
1 parent 0f121e5
commit 0df4975
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 10 deletions.
diff --git a/Grand.Framework/TagHelpers/PictureSourceTagHelper.cs b/Grand.Framework/TagHelpers/PictureSourceTagHelper.cs
@@ -0,0 +1,43 @@
+using Grand.Core.Caching;
+using Grand.Services.Media;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using System.Threading.Tasks;
+
+namespace Grand.Framework.TagHelpers
+{
+    [HtmlTargetElement("source", ParentTag = "picture")]
+    public class PictureSourceTagHelper : TagHelper
+    {
+        private const string PICTURE_PATH = "Grand.Picture.{0}.{1}";
+
+        [HtmlAttributeName("picture-id")]
+        public string PictureId { set; get; }
+
+        [HtmlAttributeName("picture-size")]
+        public int PictureSize { set; get; }
+
+        private readonly IPictureService _pictureService;
+        private readonly ICacheManager _cacheManager;
+
+        public PictureSourceTagHelper(IPictureService pictureService, ICacheManager cacheManager)
+        {
+            _pictureService = pictureService;
+            _cacheManager = cacheManager;
+        }
+
+        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
+        {
+            if (!string.IsNullOrEmpty(PictureId))
+            {
+                var cacheKey = string.Format(PICTURE_PATH, PictureId, PictureSize);
+                var pictureurl = await _cacheManager.GetAsync(cacheKey, async () =>
+                {
+                    return await _pictureService.GetPictureUrl(PictureId, PictureSize, showDefaultPicture: false);
+                });
+                var srcset = new TagHelperAttribute("srcset", pictureurl);
+                output.Attributes.Add(srcset);
+            }
+            base.Process(context, output);
+        }
+    }
+}
diff --git a/Grand.Web/Views/Shared/Components/HomePageCategories/Default.cshtml b/Grand.Web/Views/Shared/Components/HomePageCategories/Default.cshtml
@@ -8,7 +8,10 @@
                 <div class="card pb-0">
                     <div class="list-picture">
                         <a href="@Url.RouteUrl("Category", new { SeName = item.SeName })" title="@item.PictureModel.Title">
-                            <img class="img-fluid" alt="@item.PictureModel.AlternateText" src="@item.PictureModel.ImageUrl" title="@item.PictureModel.Title" />
+                            <picture>
+                                <source media="(max-width: 480px)" picture-id="@item.PictureModel.Id" picture-size="350" />
+                                <img class="img-fluid" alt="@item.PictureModel.AlternateText" src="@item.PictureModel.ImageUrl" title="@item.PictureModel.Title" />
+                            </picture>
                         </a>
                     </div>
                     <div class="list-title mt-3">

diff --git a/Grand.Web/Views/Shared/Components/HomePageManufacturers/Default.cshtml b/Grand.Web/Views/Shared/Components/HomePageManufacturers/Default.cshtml
@@ -7,7 +7,10 @@
             <div class="[email protected]_Xl [email protected]_Lg [email protected]_Md [email protected]_Sm [email protected]_Col  mb-2">
                 <div class="card pb-0">
                     <a href="@Url.RouteUrl("Manufacturer", new { SeName = item.SeName })" title="@item.PictureModel.Title">
-                        <img class="img-fluid" alt="@item.PictureModel.AlternateText" src="@item.PictureModel.ImageUrl" title="@item.PictureModel.Title" />
+                        <picture>
+                            <source media="(max-width: 480px)" picture-id="@item.PictureModel.Id" picture-size="350" />
+                            <img class="img-fluid" alt="@item.PictureModel.AlternateText" src="@item.PictureModel.ImageUrl" title="@item.PictureModel.Title" />
+                        </picture>
                     </a>
                     <h4 class="h6 p-sm-3 p-2 mb-0 card-title">
                         <a href="@Url.RouteUrl("Manufacturer", new { SeName = item.SeName })" title="@item.PictureModel.Title">

diff --git a/Grand.Web/Views/Shared/_ProductBox.cshtml b/Grand.Web/Views/Shared/_ProductBox.cshtml
@@ -35,10 +35,13 @@
 }
 <div class="card gen" data-productid="@Model.Id">
     <a class="picture" href="@Url.RouteUrl("Product", new { SeName = Model.SeName })" title="@Model.DefaultPictureModel.Title">
-        <img class="card-img-top img-fluid" alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title"
-             @if (!string.IsNullOrEmpty(Model.SecondPictureModel.ImageUrl)) { <text>
-             onmouseover="this.src='@Model.SecondPictureModel.ImageUrl';" onmouseout="this.src='@Model.DefaultPictureModel.ImageUrl';"
-             </text>  } />
+        <picture>
+            <source media="(max-width: 480px)" picture-id="@Model.DefaultPictureModel.Id" picture-size="200" />
+            <img class="card-img-top img-fluid" alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title"
+                 @if (!string.IsNullOrEmpty(Model.SecondPictureModel.ImageUrl)) { <text>
+                 onmouseover="this.src='@Model.SecondPictureModel.ImageUrl';" onmouseout="this.src='@Model.DefaultPictureModel.ImageUrl';"
+                 </text> } />
+        </picture>
     </a>
     @if (!String.IsNullOrEmpty(Model.ProductPrice.OldPrice))
     {

diff --git a/Grand.Web/Views/Shared/_ProductBoxFeatured.cshtml b/Grand.Web/Views/Shared/_ProductBoxFeatured.cshtml
@@ -35,9 +35,15 @@
 }
 <div class="card rowHelper col-12 px-0 mb-0 pb-0 featured-product" data-productid="@Model.Id">
     <div class="prod-list">
-            <a href="@Url.RouteUrl("Product", new { SeName = Model.SeName })" title="@Model.DefaultPictureModel.Title">
-                <img class="img-fluid" alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" />
-            </a>
+        <a href="@Url.RouteUrl("Product", new { SeName = Model.SeName })" title="@Model.DefaultPictureModel.Title">
+            <picture>
+                <source media="(max-width: 480px)" picture-id="@Model.DefaultPictureModel.Id" picture-size="200" />
+                <img class="img-fluid" alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title"
+                     @if (!string.IsNullOrEmpty(Model.SecondPictureModel.ImageUrl)) { <text>
+                     onmouseover="this.src='@Model.SecondPictureModel.ImageUrl';" onmouseout="this.src='@Model.DefaultPictureModel.ImageUrl';"
+                     </text> } />
+            </picture>
+        </a>
             @if (!String.IsNullOrEmpty(Model.ProductPrice.OldPrice))
             {
                  @if (!string.IsNullOrEmpty(Model.Flag))

diff --git a/Grand.Web/Views/Shared/_ProductBoxList.cshtml b/Grand.Web/Views/Shared/_ProductBoxList.cshtml
@@ -37,7 +37,13 @@
         <div class="row flex-row flex-nowrap prod-list">
             <div class="d-inline-flex img-holder">
                 <a class="picture" href="@Url.RouteUrl("Product", new { SeName = Model.SeName })" title="@Model.DefaultPictureModel.Title">
-                    <img class="img-fluid" alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" />
+                    <picture>
+                        <source media="(max-width: 480px)" picture-id="@Model.DefaultPictureModel.Id" picture-size="200" />
+                        <img class="img-fluid" alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title"
+                             @if (!string.IsNullOrEmpty(Model.SecondPictureModel.ImageUrl)) { <text>
+                             onmouseover="this.src='@Model.SecondPictureModel.ImageUrl';" onmouseout="this.src='@Model.DefaultPictureModel.ImageUrl';"
+                             </text> } />
+                    </picture>
                 </a>
                 @if (!String.IsNullOrEmpty(Model.ProductPrice.OldPrice))
                 {