Add new Page List Block template for Bootstrap Card Block

src/Foundation/Features/Blocks/PageListBlock/PageListBlock.cs

@@ -50,19 +50,29 @@ public class PageListBlock : FoundationBlockData
         [Display(Name = "Include all levels", GroupName = SystemTabNames.Content, Order = 90)]
         public virtual bool Recursive { get; set; }
 
-        [Display(Name = "Template of pages listing", GroupName = SystemTabNames.Content, Order = 100)]
+        [Display(Name = "Page Listing Display Style", 
+            Description = "Display template to use for page list",
+            GroupName = SystemTabNames.Content, 
+            Order = 100)]
         [SelectOne(SelectionFactoryType = typeof(TemplateListSelectionFactory))]
         public virtual string Template { get; set; }
 
         [Display(Name = "Preview option (not available in the Grid, Insight templates)", GroupName = SystemTabNames.Content, Order = 110)]
         [SelectOne(SelectionFactoryType = typeof(PreviewOptionSelectionFactory))]
         public virtual string PreviewOption { get; set; }
 
-        [Display(Name = "Overlay color (only for Card template)", Description = "Apply for Card template", GroupName = SystemTabNames.Content, Order = 120)]
+        [Display(Name = "Bootstrap Card Image Display Ratio (Bootstrap Card Group display only)", 
+            Description = "Display ratio for card image when using Bootstrap Card Group template",
+            GroupName = SystemTabNames.Content, 
+            Order = 115)]
+        [SelectOne(SelectionFactoryType = typeof(BootstrapCardRatioSelectionFactory))]
+        public virtual string BootstrapCardRatioOption { get; set; }
+
+        [Display(Name = "Overlay color (non-Bootstrap Card template only)", Description = "Apply for non-Bootstrap Card template", GroupName = SystemTabNames.Content, Order = 120)]
         [ClientEditor(ClientEditingClass = "foundation/Editors/ColorPicker")]
         public virtual string OverlayColor { get; set; }
 
-        [Display(Name = "Overlay text color (only for Card template)", Description = "Apply for Card template", GroupName = SystemTabNames.Content, Order = 130)]
+        [Display(Name = "Overlay text color (non-Bootstrap Card template only)", Description = "Apply for non-Bootstrap Card template", GroupName = SystemTabNames.Content, Order = 130)]
         [ClientEditor(ClientEditingClass = "foundation/Editors/ColorPicker")]
         public virtual string OverlayTextColor { get; set; }
 
@@ -75,6 +85,7 @@ public override void SetDefaultValues(ContentType contentType)
             IncludePublishDate = false;
             Template = TemplateSelections.Grid;
             PreviewOption = PreviewOptions.Full;
+            BootstrapCardRatioOption = BootstrapCardRatioSelections.FourThree;
             SortOrder = FilterSortOrder.PublishedDescending;
             OverlayColor = "black";
             OverlayTextColor = "white";

src/Foundation/Features/Blocks/PageListBlock/PageListBlockViewModel.cs

@@ -9,6 +9,7 @@ public PageListBlockViewModel(PageListBlock block) : base(block)
             ShowPublishDate = block.IncludePublishDate;
             Padding = block.Padding;
             SetPreviewOptionValue(block.PreviewOption);
+            BootstrapCardRatio = block.BootstrapCardRatioOption;
         }
 
         public string Heading { get; set; }
@@ -27,6 +28,7 @@ private void SetPreviewOptionValue(string option)
             else if (option.Equals("1"))
                 PreviewOption = 12;
         }
+        public string BootstrapCardRatio { get; set; }
     }
 
     public class PageListPreviewViewModel
@@ -47,5 +49,6 @@ public PageListPreviewViewModel(PageData page, PageListBlock block)
             ShowIntroduction = block.IncludeTeaserText;
             ShowPublishDate = block.IncludePublishDate;
         }
+        public string BootstrapCardRatio { get; set; }
     }
 }

src/Foundation/Features/Blocks/PageListBlock/Views/PageListBlock.cshtml

@@ -16,6 +16,10 @@
             {
                 switch (Model.CurrentBlock.Template)
                 {
+                    case TemplateSelections.BootstrapCardGroup:
+                        @await Html.PartialAsync("/Features/Blocks/PageListBlock/Views/Templates/_BootstrapCardGroupTemplate.cshtml", Model)
+                        break;
+
                     case TemplateSelections.Grid:
                         @await Html.PartialAsync("/Features/Blocks/PageListBlock/Views/Templates/_GridTemplate.cshtml", Model)
                         break;

src/Foundation/Features/Blocks/PageListBlock/Views/Templates/_BootstrapCardGroupTemplate.cshtml

@@ -0,0 +1,47 @@
+@model PageListBlockViewModel
+@using EPiServer.Core.Html
+@using Foundation.Features.Blocks.PageListBlock
+@using Foundation.Features.Shared.SelectionFactories
+
+@{
+    int col = 12/Model.PreviewOption;
+}
+
+@if (Model.Pages != null && Model.Pages.Any())
+{
+    <div class="row row-cols-1 row-cols-md-@col g-4">
+        @foreach (var pageModel in Model.Pages)
+        {
+            var foundationPage = pageModel.Page as FoundationPageData;
+            var imageCol = pageModel.PreviewOption == PreviewOptions.Full ? 12 : (pageModel.PreviewOption == PreviewOptions.Half ? 6 : 4);
+            <div class="col">
+	                <div class="card h-100">
+                        <div class="ratio @(Model.BootstrapCardRatio != null ? @Model.BootstrapCardRatio : "ratio-4x3")">
+			                <img class="card-img-top" src="@Url.ContentUrl(foundationPage.PageImage)" alt="@foundationPage.MetaTitle" />
+                        </div>
+	                    <div class="card-body">		
+					        <h5 class="card-title">@(@Html.Raw(TextIndexer.StripHtml(pageModel != null ? foundationPage.MetaTitle : pageModel.Page.Name, 40)) + "...")</h5>
+                            @if(Model.ShowIntroduction) {
+                                    <div class="card-text">
+                                        <p>@Html.Raw(TextIndexer.StripHtml(foundationPage.TeaserText, 200))</p>
+                                    </div>
+                            }
+                            <a class="btn-none stretched-link" href="@pageModel.Page.ContentLink.GetPublicUrl()"></a>
+	                    </div>
+                        @if(Model.ShowPublishDate)
+                        {
+                            <div class="card-footer text-muted">
+                                @foundationPage.StartPublish.Value.ToString("dd MMM yyyy")
+                            </div>
+                        }
+                  </div>
+            </div>
+
+        }
+                <style>
+                    .ratio .card-img-top {
+                        object-fit: cover;
+                    }
+                </style>
+    </div>
+}

src/Foundation/Features/Shared/SelectionFactories/BootstrapCardRatioSelectionFactory.cs

@@ -0,0 +1,24 @@
+namespace Foundation.Features.Shared.SelectionFactories
+{
+    public static class BootstrapCardRatioSelections
+    {
+        public const string OneOne = "ratio-1x1";
+        public const string FourThree = "ratio-4x3";
+        public const string SixteenNine = "ratio-16x9";
+        public const string TwentyOneNine = "ratio-21x9";
+    }
+
+    public class BootstrapCardRatioSelectionFactory : ISelectionFactory
+    {
+        public IEnumerable<ISelectItem> GetSelections(ExtendedMetadata metadata)
+        {
+            return new ISelectItem[]
+            {
+                new SelectItem { Value = BootstrapCardRatioSelections.FourThree, Text = "4x3"},
+                new SelectItem { Value = BootstrapCardRatioSelections.OneOne, Text = "1x1"},
+                new SelectItem { Value = BootstrapCardRatioSelections.SixteenNine, Text = "16x9"},
+                new SelectItem { Value = BootstrapCardRatioSelections.TwentyOneNine, Text = "21x9"},
+            };
+        }
+    }
+}

src/Foundation/Features/Shared/SelectionFactories/TemplateListSelectionFactory.cs

@@ -9,6 +9,7 @@ public static class TemplateSelections
         public const string Highlight = "Highlight";
         public const string Card = "Card";
         public const string Insight = "Insight";
+        public const string BootstrapCardGroup = "Bootstrap Card Group";
     }
 
     public class TemplateListSelectionFactory : ISelectionFactory
@@ -24,6 +25,7 @@ public IEnumerable<ISelectItem> GetSelections(ExtendedMetadata metadata)
                 new SelectItem { Value = TemplateSelections.Highlight, Text = "Highlight panel"},
                 new SelectItem { Value = TemplateSelections.Card, Text = "Card"},
                 new SelectItem { Value = TemplateSelections.Insight, Text = "Insight"},
+                new SelectItem { Value = TemplateSelections.BootstrapCardGroup, Text = "Bootstrap Card Group"},
             };
         }
     }