media improvement

assets/style.less

@@ -83,14 +83,6 @@ li {
     flex: 1 1 auto;
   }
 
-  .img {
-    width: 100%;
-    max-height: 250px;
-    min-height: 160px;
-    object-fit: cover;
-    object-position: top;
-    aspect-ratio: 1.7778;
-  }
 
   .place {
     max-width: 100%;

components/Event.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   v-card.h-event.event.d-flex(itemscope itemtype="https://schema.org/Event")
     nuxt-link(:to='`/event/${event.slug || event.id}`' itemprop="url")
-      img.img.u-featured(:src='thumbnail' :alt='alt' :loading='this.lazy?"lazy":"eager"' itemprop="image" :style="{ 'object-position': thumbnailPosition }")
+      MyPicture(:event='event' thumb :lazy='lazy')
       v-icon.float-right.mr-1(v-if='event.parentId' color='success' v-text='mdiRepeat')
       .title.p-name(itemprop="name") {{event.title}}
 
@@ -50,6 +50,7 @@
 <script>
 import { mapState } from 'vuex'
 import clipboard from '../assets/clipboard'
+import MyPicture from '~/components/MyPicture'
 import { mdiRepeat, mdiPencil, mdiDotsVertical, mdiContentCopy,
   mdiCalendarExport, mdiDeleteForever, mdiCalendar, mdiMapMarker } from '@mdi/js'
 
@@ -58,6 +59,9 @@ export default {
     return { mdiRepeat, mdiPencil, mdiDotsVertical, mdiContentCopy, mdiCalendarExport,
       mdiDeleteForever, mdiMapMarker, mdiCalendar }
   },
+  components: {
+    MyPicture
+  },
   props: {
     event: { type: Object, default: () => ({}) },
     lazy: Boolean
@@ -65,25 +69,6 @@ export default {
   mixins: [clipboard],
   computed: {
     ...mapState(['settings']),
-    thumbnail () {
-      let path
-      if (this.event.media && this.event.media.length) {
-        path = '/media/thumb/' + this.event.media[0].url
-      } else {
-        path = '/noimg.svg'
-      }
-      return path
-    },
-    alt () {
-      return this.event.media && this.event.media.length ? this.event.media[0].name : ''
-    },
-    thumbnailPosition () {
-      if (this.event.media && this.event.media.length && this.event.media[0].focalpoint) {
-        const focalpoint = this.event.media[0].focalpoint
-        return `${(focalpoint[0] + 1) * 50}% ${(focalpoint[1] + 1) * 50}%`
-      }
-      return 'center center'
-    },
     is_mine () {
       if (!this.$auth.user) {
         return false

locales/en.json

@@ -151,7 +151,7 @@
         "each_month": "Each month",
         "due": "until",
         "from": "From",
-        "image_too_big": "The image can't be bigger than 4 MB",
+        "image_too_big": "The image can't be bigger than 4MB",
         "interact_with_me_at": "Interact with me on fediverse at",
         "follow_me_description": "One of the ways to stay up to date on events published here on {title},\nis following the account <u>{account}</u> from the fediverse, for example via Mastodon, and possibly add resources to an event from there.<br/><br/>\nIf you have never heard of Mastodon and the fediverse we recommend reading <a href='https://www.savjee.be/videos/simply-explained/mastodon-and-fediverse-explained/'>this article</a>.<br/><br/>Enter your instance below (e.g. mastodon.social)",
         "interact_with_me": "Follow me",
@@ -159,7 +159,11 @@
         "import_URL": "Import from URL",
         "import_ICS": "Import from ICS",
         "ics": "ICS",
-        "import_description": "You can import events from other platforms and other instances through standard formats (ics and h-event)"
+        "import_description": "You can import events from other platforms and other instances through standard formats (ics and h-event)",
+        "alt_text_description": "Description for people with visual impairments",
+        "choose_focal_point": "Choose the focal point",
+        "remove_media_confirmation": "Do you confirm the image removal?",
+        "download_flyer": "Download flyer"
     },
     "admin": {
         "place_description": "If you have gotten the place or address wrong, you can change it.<br/>All current and past events associated with this place will change address.",

locales/it.json

@@ -151,7 +151,7 @@
         "each_month": "Ogni mese",
         "due": "alle",
         "from": "Dalle",
-        "image_too_big": "L'immagine non può essere più grande di 4 MB",
+        "image_too_big": "L'immagine non può essere più grande di 4MB",
         "interact_with_me": "Seguimi dal fediverso",
         "follow_me_description": "Tra i vari modi di rimanere aggiornati degli eventi pubblicati qui su {title},\npuoi seguire l'account <u>{account}</u> dal fediverso, ad esempio via Mastodon, ed eventualmente aggiungere risorse ad un evento da lì.<br/><br/>\nSe non hai mai sentito parlare di Mastodon e del fediverso ti consigliamo di leggere <a href='https://cagizero.wordpress.com/2018/10/25/cose-mastodon/'>questo articolo</a>.<br/><br/> Inserisci la tua istanza qui sotto (es. mastodon.cisti.org o mastodon.bida.im)",
         "only_future": "solo eventi futuri",
@@ -160,9 +160,10 @@
         "import_URL": "Importa da URL (ics o h-event)",
         "ics": "ICS",
         "import_description": "Puoi importare eventi da altre piattaforme e da altre istanze attraverso i formati standard (ics e h-event)",
-        "alt_text_description": "Descrizione per utenti con disabilità visive",
+        "alt_text_description": "Descrizione per persone con disabilità visive",
         "choose_focal_point": "Scegli il punto centrale cliccando",
-        "remove_media_confirmation": "Confermi l'eliminazione dell'immagine?"
+        "remove_media_confirmation": "Confermi l'eliminazione dell'immagine?",
+        "download_flyer": "Scarica volantino"
     },
     "admin": {
         "place_description": "Nel caso in cui un luogo sia errato o cambi indirizzo, puoi modificarlo.<br/>Considera che tutti gli eventi associati a questo luogo cambieranno indirizzo (anche quelli passati).",

nuxt.config.js

@@ -14,7 +14,6 @@ module.exports = {
       { name: 'viewport', content: 'width=device-width, initial-scale=1' }
     ],
     link: [{ rel: 'icon', type: 'image/png', href: '/logo.png' }],
-    link: [{ rel: 'preload', type: 'image/png', href: '/logo.png', as: 'image' }],
     script: [{ src: '/gancio-events.es.js', async: true, body: true }],
   },
   dev: isDev,

pages/add/MediaInput.vue

@@ -15,7 +15,7 @@
 
             v-col.col-12.col-sm-4
               p {{$t('event.choose_focal_point')}}
-              img.img.d-none.d-sm-block(v-if='mediaPreview'
+              img.mediaPreview.d-none.d-sm-block(v-if='mediaPreview'
                 :src='mediaPreview' :style="{ 'object-position': position }")
 
               v-textarea.mt-4(type='text'
@@ -35,7 +35,7 @@
       v-btn(text color='primary' @click='openMediaDetails = true') {{$t('common.edit')}}
       v-btn(text color='error' @click='remove') {{$t('common.remove')}}
     div(v-if='mediaPreview')
-      img.img.col-12.ml-3(:src='mediaPreview' :style="{ 'object-position': savedPosition }")
+      img.mediaPreview.col-12.ml-3(:src='mediaPreview' :style="{ 'object-position': savedPosition }")
       span.float-right {{event.media[0].name}}
     v-file-input(
       v-else
@@ -53,7 +53,7 @@ export default {
   name: 'MediaInput',
   props: {
     value: { type: Object, default: () => ({ image: null }) },
-    event: { type: Object, default: () => {} }
+    event: { type: Object, default: () => ({}) }
   },
   data () {
     return {
@@ -142,7 +142,7 @@ export default {
   cursor: crosshair;
 }
 
-.img {
+.mediaPreview {
   width: 100%;
   object-fit: cover;
   object-position: top;

pages/add/WhereInput.vue

@@ -1,34 +1,34 @@
 <template lang="pug">
-  v-row
-    v-col(cols=12 md=6)
-      v-combobox(ref='place'
-        :rules="[$validators.required('common.where')]"
-        :label="$t('common.where')"
-        :hint="$t('event.where_description')"
-        :search-input.sync="placeName"
-        :prepend-icon='mdiMapMarker'
-        persistent-hint
-        :value="value.name"
-        :items="filteredPlaces"
-        no-filter
-        item-text='name'
-        @change='selectPlace')
-        template(v-slot:item="{ item, attrs, on }")
-          v-list-item(v-bind='attrs' v-on='on')
-            v-list-item-content(two-line v-if='item.create')
-              v-list-item-title <v-icon color='primary' v-text='mdiPlus' :aria-label='add'></v-icon> {{item.name}}
-            v-list-item-content(two-line v-else)
-              v-list-item-title(v-text='item.name')
-              v-list-item-subtitle(v-text='item.address')
+v-row
+  v-col(cols=12 md=6)
+    v-combobox(ref='place'
+      :rules="[$validators.required('common.where')]"
+      :label="$t('common.where')"
+      :hint="$t('event.where_description')"
+      :search-input.sync="placeName"
+      :prepend-icon='mdiMapMarker'
+      persistent-hint
+      :value="value.name"
+      :items="filteredPlaces"
+      no-filter
+      item-text='name'
+      @change='selectPlace')
+      template(v-slot:item="{ item, attrs, on }")
+        v-list-item(v-bind='attrs' v-on='on')
+          v-list-item-content(two-line v-if='item.create')
+            v-list-item-title <v-icon color='primary' v-text='mdiPlus' :aria-label='$t("common.add")'></v-icon> {{item.name}}
+          v-list-item-content(two-line v-else)
+            v-list-item-title(v-text='item.name')
+            v-list-item-subtitle(v-text='item.address')
 
-    v-col(cols=12 md=6)
-      v-text-field(ref='address'
-        :prepend-icon='mdiMap'
-        :disabled='disableAddress'
-        :rules="[ v => disableAddress ? true : $validators.required('common.address')(v)]"
-        :label="$t('common.address')"
-        @change="changeAddress"
-        :value="value.address")
+  v-col(cols=12 md=6)
+    v-text-field(ref='address'
+      :prepend-icon='mdiMap'
+      :disabled='disableAddress'
+      :rules="[ v => disableAddress ? true : $validators.required('common.address')(v)]"
+      :label="$t('common.address')"
+      @change="changeAddress"
+      :value="value.address")
 
 </template>
 <script>
@@ -61,8 +61,7 @@ export default {
           if (tmpName === placeName) { nameMatch = true }
           return true
         }
-        if (tmpAddress.includes(placeName)) { return true }
-        return false
+        return tmpAddress.includes(placeName)
       })
       if (!nameMatch) {
         matches.unshift({ create: true, name: this.placeName })

pages/event/_slug.vue

@@ -11,13 +11,7 @@ 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='hasMedia' :src='event | mediaURL' itemprop="image")
-          v-img.main_image.mb-3(
-            contain
-            :alt='event | mediaURL("alt")'
-            :src='event | mediaURL'
-            :lazy-src='event | mediaURL("thumb")'
-            v-if='hasMedia')
+          MyPicture(v-if='hasMedia' :event='event')
           .p-description.text-body-1.pa-3.rounded(v-if='!hasMedia && event.description' itemprop='description' v-html='event.description')
 
         v-col.col-12.col-lg-4
@@ -55,6 +49,9 @@ v-container#event.pa-0.pa-sm-2
               v-btn.ml-2(large icon :title="$t('common.add_to_calendar')" color='primary' :aria-label="$t('common.add_to_calendar')"
                 :href='`/api/event/${event.slug || event.id}.ics`')
                 v-icon(v-text='mdiCalendarExport')
+              v-btn.ml-2(v-if='hasMedia' large icon :title="$t('event.download_flyer')" color='primary' :aria-label="$t('event.download_flyer')"
+                :href='event | mediaURL')
+                v-icon(v-text='mdiFileDownloadOutline')                
 
       .p-description.text-body-1.pa-3.rounded(v-if='hasMedia && event.description' itemprop='description' v-html='event.description')
 
@@ -133,10 +130,11 @@ import { mapState } from 'vuex'
 import get from 'lodash/get'
 import moment from 'dayjs'
 import clipboard from '../../assets/clipboard'
+import MyPicture from '~/components/MyPicture'
 const htmlToText = require('html-to-text')
 
 import { mdiArrowLeft, mdiArrowRight, mdiDotsVertical, mdiCodeTags, mdiClose,
-  mdiEye, mdiEyeOff, mdiDelete, mdiRepeat, mdiLock,
+  mdiEye, mdiEyeOff, mdiDelete, mdiRepeat, mdiLock, mdiFileDownloadOutline,
   mdiCalendarExport, mdiCalendar, mdiContentCopy, mdiMapMarker } from '@mdi/js'
 
 export default {
@@ -145,8 +143,9 @@ export default {
   components: {
     EventAdmin: () => import(/* webpackChunkName: "event" */'./eventAdmin'),
     EmbedEvent: () => import(/* webpackChunkName: "event" */'./embedEvent'),
+    MyPicture
   },
-  async asyncData ({ $axios, params, error, store }) {
+  async asyncData ({ $axios, params, error }) {
     try {
       const event = await $axios.$get(`/event/${params.slug}`)
       return { event }
@@ -156,7 +155,7 @@ export default {
   },
   data () {
     return {
-      mdiArrowLeft, mdiArrowRight, mdiDotsVertical, mdiCodeTags, mdiCalendarExport, mdiCalendar,
+      mdiArrowLeft, mdiArrowRight, mdiDotsVertical, mdiCodeTags, mdiCalendarExport, mdiCalendar, mdiFileDownloadOutline,
       mdiMapMarker, mdiContentCopy, mdiClose, mdiDelete, mdiEye, mdiEyeOff, mdiRepeat, mdiLock,
       currentAttachment: 0,
       event: {},
@@ -331,10 +330,3 @@ export default {
   }
 }
 </script>
-<style scoped>
-.main_image {
-  margin: 0 auto;
-  border-radius: 5px;
-  transition: max-height 0.2s;
-}
-</style>

server/api/storage.js

@@ -12,48 +12,43 @@ try {
 
 const DiskStorage = {
   _handleFile (req, file, cb) {
-    const filename = crypto.randomBytes(16).toString('hex') + '.jpg'
-    const finalPath = path.resolve(config.upload_path, filename)
-    const thumbPath = path.resolve(config.upload_path, 'thumb', filename)
-    const outStream = fs.createWriteStream(finalPath)
-    const thumbStream = fs.createWriteStream(thumbPath)
+    const filename = crypto.randomBytes(16).toString('hex')
+    const sharpStream = sharp({ failOnError: true })
+    const promises = [
+      sharpStream.clone().resize(500, null, { withoutEnlargement: true }).jpeg({ quality: 90, mozjpeg: true }).toFile(path.resolve(config.upload_path, 'thumb', filename + '.jpg')),
+      sharpStream.clone().resize(500).webp({ quality: 90, alphaQuality: 0, effort: 6 }).toFile(path.resolve(config.upload_path, 'thumb', filename + '.webp')),
+      sharpStream.clone().resize(1200, null, { withoutEnlargement: true } ).jpeg({ quality: 98, mozjpeg: true }).toFile(path.resolve(config.upload_path, filename + '.jpg')),
+      sharpStream.clone().resize(1200).webp({ quality: 98, alphaQuality: 0, effor: 6 }).toFile(path.resolve(config.upload_path, filename + '.webp')),
+      sharpStream.clone()
+        .resize(6)
+        .png({ quality: 20, palette: true, alphaQuality: 0, effort: 6})
+        .toBuffer()
+        .then(buffer => buffer.toString('base64'))
+    ]
 
-    const resizer = sharp().resize(1200).jpeg({ quality: 98 })
-    const thumbnailer = sharp().resize(500).jpeg({ quality: 98 })
-    let onError = false
-    const err = e => {
-      if (onError) {
-        log.error('[UPLOAD]', err)
-        return
-      }
-      onError = true
-      log.error('[UPLOAD]', e)
-      req.err = e
-      cb(null)
-    }
-
-    file.stream
-      .pipe(thumbnailer)
-      .on('error', err)
-      .pipe(thumbStream)
-      .on('error', err)
-
-    file.stream
-      .pipe(resizer)
-      .on('error', err)
-      .pipe(outStream)
-      .on('error', err)
-
-    outStream.on('finish', () => {
-      cb(null, {
-        destination: config.upload_path,
-        filename,
-        path: finalPath,
-        size: outStream.bytesWritten
+    file.stream.pipe(sharpStream)
+    Promise.all(promises)
+      .then(res => {
+        const info = res[2]
+        const preview = res[4]
+        console.error(preview)
+        cb(null, {
+          destination: config.upload_path,
+          filename: filename + '.jpg',
+          path: path.resolve(config.upload_path, filename + '.jpg'),
+          height: info.height,
+          width: info.width,
+          size: info.size,
+          preview
+        })
+      })
+      .catch(err => {
+        console.error(err)
+        req.err = err
+        cb(null)
       })
-    })
   },
-  _removeFile (req, file, cb) {
+  _removeFile (_req, file, cb) {
     delete file.destination
     delete file.filename
     fs.unlink(file.path, cb)

webcomponents/src/GancioEvent.svelte

@@ -22,18 +22,22 @@
 
   function when (event) {
     return new Date(event.start_datetime*1000)
-            .toLocaleDateString(undefined,
-              {
-                weekday: 'long',
-                month: 'short',
-                day: 'numeric',
-                hour: '2-digit',
-                minute: '2-digit'
-              })    
+      .toLocaleDateString(undefined,
+        {
+          weekday: 'long',
+          month: 'short',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit'
+        })
   }
 
-  function thumbnail(event) {
-    return `${baseurl}/media/thumb/${event.media[0].url}`
+  function thumbnail(event, format) {
+    const imgPath = event.media[0].url
+    if (format === 'webp') {
+      return `${baseurl}/media/thumb/${imgPath.replace(/.jpg$/, '.webp')}`
+    }
+    return `${baseurl}/media/thumb/${imgPath}`
   }
 
   function position(event) {
@@ -49,7 +53,11 @@
 {#if event}
 <a href='{baseurl}/event/{event.slug || event.id}' class='card' target='_blank'>
   {#if event.media.length}
-  <img src="{thumbnail(event)}" alt="{event.media[0].name}" style="object-position: {position(event)}; aspect-ratio=1.7778;">
+
+  <picture>
+    <source srcset="{thumbnail(event, 'webp')}" type='image/webp' />
+    <img src="{thumbnail(event)}" alt="{event.media[0].name}" style="object-position: {position(event)}; aspect-ratio=1.7778;">
+  </picture>  
   {/if}
   <div class="container">
     <strong>{event.title}</strong>