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 @@ +
+

{{ title }}

+

{{ subtitle }}

+ +
+ {%- for index in ['1', '2', '3', '4'] -%} + {%- set image = values['image_' + index ] -%} + {%- set class = "narrow" if index in ['1', '4'] else "wide" -%} + {%- if image -%} +
+ {{ frappe.render_template('templates/includes/image_with_blur.html', { + "src": image + }) }} +
+ {%- endif -%} + {%- endfor -%} +
+
\ 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