allow for an image banner

templates/events/display.html

@@ -1,9 +1,10 @@
 {% extends "public.html" %} {% block page %}
 <div class="row q-col-gutter-md justify-center">
   <div class="col-12 col-md-7 col-lg-6 q-gutter-y-md">
-    <q-card class="q-pa-lg">
+    <q-card>
+      <q-img v-if="banner" :src="banner" transition="slide-up"></q-img>
       <q-card-section class="q-pa-none">
-        <h3 class="q-my-none">{{ event_name }}</h3>
+        <h3 class="q-my-none q-pa-lg">{{ event_name }}</h3>
         <br />
         <div v-html="formatDescription"></div>
         <br />
@@ -124,6 +125,7 @@
     created() {
       this.info = '{{ event_info | tojson }}'
       this.info = this.info.substring(1, this.info.length - 1)
+      this.banner = JSON.parse('{{ event_banner | tojson |safe }}')
     },
     computed: {
       formatDescription() {

templates/events/index.html

@@ -209,7 +209,15 @@
           label="Info about the event"
           hint="Markdown supported"
         ></q-input>
-        <div class="row">
+        <q-input
+          filled
+          dense
+          v-model.trim="formDialog.data.banner"
+          type="url"
+          label="Image URL"
+          hint="Optional banner image to display on the event page"
+        ></q-input>
+        <div class="row q-mt-lg">
           <div class="col-4">Ticket closing date</div>
           <div class="col-8">
             <q-input
@@ -334,6 +342,7 @@
             {name: 'id', align: 'left', label: 'ID', field: 'id'},
             {name: 'name', align: 'left', label: 'Name', field: 'name'},
             {name: 'info', align: 'left', label: 'Info', field: 'info'},
+            {name: 'banner', align: 'left', label: 'Banner', field: 'banner'},
             {
               name: 'event_start_date',
               align: 'left',
@@ -447,7 +456,6 @@
       exportticketsCSV: function () {
         LNbits.utils.exportCSV(this.ticketsTable.columns, this.tickets)
       },
-
       getEvents: function () {
         var self = this