refactoring media in event (multiple in db, focalpoint, alt text)

pages/event/_id.vue

@@ -11,13 +11,14 @@ v-container#event.pa-0.pa-sm-2
       v-row
         v-col.col-12.col-lg-8
           //- fake image to use u-featured in h-event microformat
-          img.u-featured(v-show='false' v-if='event.image_path' :src='`${settings.baseurl}${imgPath}`')
+          img.u-featured(v-show='false' v-if='event.media' :src='event | mediaURL')
           v-img.main_image.mb-3(
             contain
-            :src='imgPath'
-            :lazy-src='thumbImgPath'
-            v-if='event.image_path')
-          .p-description.text-body-1.pa-3.grey.darken-4.rounded(v-else v-html='event.description')
+            :alt='event | mediaURL("alt")'
+            :src='event | mediaURL'
+            :lazy-src='event | mediaURL("thumb")'
+            v-if='event.media && event.media.length')
+          .p-description.text-body-1.pa-3.grey.darken-4.rounded(v-if='!event.media && event.description' v-html='event.description')
 
         v-col.col-12.col-lg-4
           v-card
@@ -60,7 +61,7 @@ v-container#event.pa-0.pa-sm-2
                     :href='`/api/event/${event.slug || event.id}.ics`')
                     v-icon mdi-calendar-export
 
-      .p-description.text-body-1.pa-3.grey.darken-4.rounded(v-if='event.image_path && event.description' v-html='event.description')
+      .p-description.text-body-1.pa-3.grey.darken-4.rounded(v-if='event.media && event.description' v-html='event.description')
 
       //- resources from fediverse
       #resources.mt-1(v-if='settings.enable_federation')
@@ -197,7 +198,7 @@ export default {
         { property: 'og:type', content: 'event' },
         {
           property: 'og:image',
-          content: this.thumbImgPath
+          content: this.$options.filters.mediaURL(this.event)
         },
         { property: 'og:site_name', content: this.settings.title },
         {
@@ -213,7 +214,7 @@ export default {
         { property: 'twitter:title', content: this.event.title },
         {
           property: 'twitter:image',
-          content: this.thumbImgPath
+          content: this.$options.filters.mediaURL(this.event, 'thumb')
         },
         {
           property: 'twitter:description',
@@ -221,7 +222,7 @@ export default {
         }
       ],
       link: [
-        { rel: 'image_src', href: this.thumbImgPath },
+        { rel: 'image_src', href: this.$options.filters.mediaURL(this.event, 'thumb') },
         {
           rel: 'alternate',
           type: 'application/rss+xml',
@@ -241,12 +242,6 @@ export default {
     currentAttachmentLabel () {
       return get(this.selectedResource, `data.attachment[${this.currentAttachment}].name`, '')
     },
-    imgPath () {
-      return '/media/' + this.event.image_path
-    },
-    thumbImgPath () {
-      return this.settings.baseurl + '/media/thumb/' + this.event.image_path
-    },
     is_mine () {
       if (!this.$auth.user) {
         return false