XCORNER-24 Make image banner clickable

xfiveco · Mar 19, 2024 · ea8e865 · ea8e865
1 parent 1555ad6
commit ea8e865
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/assets/scss/widgets/image-banner.scss b/assets/scss/widgets/image-banner.scss
@@ -13,6 +13,8 @@
     gap: rem-calc(12px);
     padding: rem-calc(24px);
 
+    text-decoration: none;
+
     @include bp(small) {
         height: rem-calc(484px);
     }

diff --git a/widget-templates/image-banner/schema.json b/widget-templates/image-banner/schema.json
@@ -24,6 +24,12 @@
                 "label": "Text",
                 "default": "I am a sample text"
             },
+            {
+                "type": "input",
+                "id": "url",
+                "label": "URL",
+                "default": "#"
+            },
             {
                 "type": "imageManager",
                 "label": "Background Image",

diff --git a/widget-templates/image-banner/widget.html b/widget-templates/image-banner/widget.html
@@ -13,12 +13,12 @@
 </style>
 
 <div class="{{#if has_container}}o-container{{/if}}">
-    <div class='c-image-banner c-image-banner-{{_.id}}' style="background-image: url('{{image.src}}')">
+    <a href="{{url}}" class='c-image-banner c-image-banner-{{_.id}}' style="background-image: url('{{image.src}}')">
         {{#if title}}
             <h2 class="c-image-banner__title">{{title}}</h2>
         {{/if}}
         {{#if text}}
             <p class="c-image-banner__text">{{text}}</p>
         {{/if}}
-    </div>
+    </a>
 </div>