image gallery block

Author: msagolj

blocks/fragment/fragment.js

@@ -22,7 +22,7 @@ export async function loadFragment(path) {
   if (path && path.startsWith('/')) {
     // eslint-disable-next-line no-param-reassign
     path = path.replace(/(\.plain)?\.html/, '');
-    const resp = await fetch(`${path}.plain.html`);
+    const resp = await fetch(`${window.hlx.codeBasePath}${path}.plain.html`);
     if (resp.ok) {
       const main = document.createElement('main');
       main.innerHTML = await resp.text();

blocks/gallery-image/_gallery-image.json

@@ -0,0 +1,46 @@
+{
+  "definitions": [
+    {
+      "title": "Gallery Image",
+      "id": "gallery-image",
+      "plugins": {
+        "xwalk": {
+          "page": {
+            "resourceType": "core/franklin/components/block/v1/block/item",
+            "template": {
+              "name": "Gallery Image", 
+              "model": "gallery-image",
+              "image": "/content/dam/test/content-at-scale.png"
+            }
+          }
+        }
+      }
+    }
+  ],
+  "models": [
+    {
+      "id": "gallery-image",
+      "fields": [
+        {
+          "component": "reference",
+          "valueType": "string",
+          "name": "image",
+          "label": "Image"
+        },
+        {
+          "component": "text",
+          "valueType": "string",
+          "name": "alt",
+          "label": "Alt Text"
+        },
+        {
+          "component": "text",
+          "valueType": "string",
+          "name": "caption",
+          "label": "Caption"
+        }
+      ]
+    }
+  ],
+  "filters": []
+} 

blocks/image-gallery/_image-gallery.json

@@ -0,0 +1,62 @@
+{
+  "definitions": [
+    {
+      "title": "Image Gallery",
+      "id": "image-gallery",
+      "plugins": {
+        "xwalk": {
+          "page": {
+            "resourceType": "core/franklin/components/block/v1/block",
+            "template": {
+              "name": "Image Gallery",
+              "model": "image-gallery",
+              "filter": "image-gallery"
+            }
+          }
+        }
+      }
+    }
+  ],
+  "models": [
+    {
+      "id": "image-gallery",
+      "fields": [
+        {
+          "component": "select",
+          "name": "layout",
+          "label": "Layout",
+          "options": [
+            {
+              "name": "Grid",
+              "value": "grid"
+            },
+            {
+              "name": "Masonry",
+              "value": "masonry"
+            },
+            {
+              "name": "Carousel",
+              "value": "carousel"
+            }
+          ]
+        },
+        {
+          "component": "number",
+          "valueType": "number",
+          "name": "columns",
+          "label": "Columns",
+          "min": 1,
+          "max": 6
+        }
+      ]
+    }
+  ],
+  "filters": [
+    {
+      "id": "image-gallery",
+      "components": [
+        "gallery-image"
+      ]
+    }
+  ]
+}