From 342a51920ecfe673cb951eec4b74c12513617c46 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 4 Jun 2020 16:54:28 +0530
Subject: [PATCH] feat: added section with image grid

---
 frappe/public/scss/page-builder.scss          | 37 ++++++++++++++
 .../section_with_image_grid/__init__.py       |  0
 .../section_with_image_grid.html              | 18 +++++++
 .../section_with_image_grid.json              | 50 +++++++++++++++++++
 4 files changed, 105 insertions(+)
 create mode 100644 frappe/website/web_template/section_with_image_grid/__init__.py
 create mode 100644 frappe/website/web_template/section_with_image_grid/section_with_image_grid.html
 create mode 100644 frappe/website/web_template/section_with_image_grid/section_with_image_grid.json

diff --git a/frappe/public/scss/page-builder.scss b/frappe/public/scss/page-builder.scss
index a028e34158..6c87f80de2 100644
--- a/frappe/public/scss/page-builder.scss
+++ b/frappe/public/scss/page-builder.scss
@@ -282,3 +282,40 @@
 .split-section-content {
 	margin-top: 2rem;
 }
+
+.image-grid {
+	display: flex;
+	flex-wrap: wrap;
+	width: 100%;
+
+	// Offset for padding
+	margin-right: -2px;
+	margin-left: -2px;
+
+	.grid-image {
+		overflow: hidden;
+		height: 15rem;
+		border: 2px solid #fff;
+		border-radius: $border-radius;
+
+		&.wide {
+			max-width: 75%;
+			width: 75%;
+
+			img {
+				width: 100%;
+				object-fit: cover;
+			}
+		}
+
+		&.narrow {
+			max-width: 25%;
+			width: 25%;
+
+			img {
+				height: 100%;
+				object-fit: cover;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/frappe/website/web_template/section_with_image_grid/__init__.py b/frappe/website/web_template/section_with_image_grid/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frappe/website/web_template/section_with_image_grid/section_with_image_grid.html b/frappe/website/web_template/section_with_image_grid/section_with_image_grid.html
new file mode 100644
index 0000000000..f60c0e0756
--- /dev/null
+++ b/frappe/website/web_template/section_with_image_grid/section_with_image_grid.html
@@ -0,0 +1,18 @@
+<div class="section-with-image-grid">
+	<h2 class="section-title">{{ title }}</h2>
+	<p class="section-description">{{ subtitle }}</p>
+
+	<div class="image-grid">
+		{%- for index in ['1', '2', '3', '4'] -%}
+			{%- set image = values['image_' + index ] -%}
+			{%- set class = "narrow" if index in ['1', '4'] else "wide" -%}
+			{%- if image -%}
+				<div class="grid-image {{ class }}">
+					{{ frappe.render_template('templates/includes/image_with_blur.html', {
+						"src": image
+					}) }}
+				</div>
+			{%- endif -%}
+		{%- endfor -%}
+	</div>
+</div>
\ No newline at end of file
diff --git a/frappe/website/web_template/section_with_image_grid/section_with_image_grid.json b/frappe/website/web_template/section_with_image_grid/section_with_image_grid.json
new file mode 100644
index 0000000000..0899054417
--- /dev/null
+++ b/frappe/website/web_template/section_with_image_grid/section_with_image_grid.json
@@ -0,0 +1,50 @@
+{
+ "creation": "2020-06-04 14:43:39.753713",
+ "docstatus": 0,
+ "doctype": "Web Template",
+ "fields": [
+  {
+   "fieldname": "title",
+   "fieldtype": "Data",
+   "label": "Title",
+   "reqd": 0
+  },
+  {
+   "fieldname": "subtitle",
+   "fieldtype": "Data",
+   "label": "Subtitle",
+   "reqd": 0
+  },
+  {
+   "fieldname": "image_1",
+   "fieldtype": "Attach Image",
+   "label": "Image 1",
+   "reqd": 0
+  },
+  {
+   "fieldname": "image_2",
+   "fieldtype": "Attach Image",
+   "label": "Image 2",
+   "reqd": 0
+  },
+  {
+   "fieldname": "image_3",
+   "fieldtype": "Attach Image",
+   "label": "Image 3",
+   "reqd": 0
+  },
+  {
+   "fieldname": "image_4",
+   "fieldtype": "Attach Image",
+   "label": "Image 4",
+   "reqd": 0
+  }
+ ],
+ "idx": 0,
+ "modified": "2020-06-04 14:46:21.697200",
+ "modified_by": "Administrator",
+ "name": "Section with Image Grid",
+ "owner": "Administrator",
+ "standard": 1,
+ "template": ""
+}
\ No newline at end of file