feat: Section with Image align center

frappe/public/scss/page-builder.scss

@@ -1,6 +1,6 @@
 .hero-content {
 	.btn-primary {
-		margin-top: 1rem; 
+		margin-top: 1rem;
 		margin-right: 0.5rem;
 
 		@include media-breakpoint-up(lg) {
@@ -35,6 +35,15 @@
 	}
 }
 
+.section-with-image.align-center {
+	text-align: center;
+
+	.section-description, .section-image {
+		margin-left: auto;
+		margin-right: auto;
+	}
+}
+
 .section-image {
 	margin-top: 2rem;
 	border-radius: 0.75rem;
@@ -444,6 +453,7 @@
 		text-align: center;
 	}
 	.section-description, .collapsible-items {
-		margin: 0 auto;
+		margin-left: auto;
+		margin-right: auto;
 	}
 }

frappe/website/web_template/section_with_image/section_with_image.html

@@ -1,8 +1,10 @@
-<h2 class="section-title">{{ title }}</h2>
-<p class="section-description">{{ subtitle }}</p>
+<div class="section-with-image {{ 'align-center' if align == 'Center' else '' }}">
+	<h2 class="section-title">{{ title }}</h2>
+	<p class="section-description">{{ subtitle }}</p>
 
-{{ frappe.render_template('templates/includes/image_with_blur.html', {
-	"src": image,
-	"alt": image_description,
-	"class": "section-image"
-}) }}
+	{{ frappe.render_template('templates/includes/image_with_blur.html', {
+		"src": image,
+		"alt": image_description,
+		"class": "section-image"
+	}) }}
+</div>

frappe/website/web_template/section_with_image/section_with_image.json

@@ -6,26 +6,37 @@
   {
    "fieldname": "title",
    "fieldtype": "Data",
-   "label": "Title"
+   "label": "Title",
+   "reqd": 0
   },
   {
    "fieldname": "subtitle",
    "fieldtype": "Small Text",
-   "label": "Subtitle"
+   "label": "Subtitle",
+   "reqd": 0
   },
   {
    "fieldname": "image",
    "fieldtype": "Attach Image",
-   "label": "Image"
+   "label": "Image",
+   "reqd": 0
   },
   {
    "fieldname": "image_description",
    "fieldtype": "Data",
-   "label": "Image Description"
+   "label": "Image Description",
+   "reqd": 0
+  },
+  {
+   "fieldname": "align",
+   "fieldtype": "Select",
+   "label": "Align",
+   "options": "Left\nCenter",
+   "reqd": 0
   }
  ],
  "idx": 0,
- "modified": "2020-04-17 19:31:33.474017",
+ "modified": "2020-08-06 16:08:12.005764",
  "modified_by": "Administrator",
  "name": "Section with Image",
  "owner": "Administrator",