add custom fallback image, fix #195

components/MyPicture.vue

@@ -10,7 +10,7 @@
       :height="height" :width="width"
       :style="{ 'object-position': thumbnailPosition }">
 
-    <img v-else-if='!media && thumb' class='thumb' src="/noimg.svg" alt=''>
+    <img v-else-if='!media && thumb' class='thumb' src="/fallbackimage.png" alt=''>
   </div>
 </template>
 <script>

components/admin/Theme.vue

@@ -2,20 +2,33 @@
 v-container
   v-card-title {{$t('common.theme')}}
   v-card-text
-    //- LOGO
-    v-file-input.mt-5(ref='upload'
-      :label="$t('admin.favicon')"
-      @change='uploadLogo'
-      accept='image/*')
-      template(slot='append-outer')
-        v-btn(color='warning' text @click='resetLogo') <v-icon v-text='mdiRestore'></v-icon> {{$t('common.reset')}}
-        v-img(:src='`/logo.png?${logoKey}`'
-          max-width="60px" max-height="60px" contain)
 
     v-switch.mt-5(v-model='is_dark'
       inset
       :label="$t('admin.is_dark')")
 
+    v-row
+      v-col(cols='6')
+        //- LOGO
+        v-file-input.mt-5(ref='upload'
+          :label="$t('admin.favicon')"
+          @change='uploadLogo'
+          accept='image/*')
+          template(slot='append-outer')
+            v-btn(color='warning' text @click='resetLogo') <v-icon v-text='mdiRestore'></v-icon> {{$t('common.reset')}}
+        v-img.mt-2(:src='`/logo.png?${logoKey}`' max-height="60px" contain)
+
+      v-col(cols='6')
+        //- NOIMG
+        v-file-input.mt-5(ref='upload'
+          :label="$t('admin.fallbackImage')"
+          persistent-hint
+          @change='uploadFallbackImage'
+          accept='image/*')
+          template(slot='append-outer')
+            v-btn(color='warning' text @click='resetFallbackImage') <v-icon v-text='mdiRestore'></v-icon> {{$t('common.reset')}}
+        v-img.mt-2(:src='`/fallbackimage.png?${fallbackImageKey}`' max-height="150px" contain)          
+
     //- TODO choose theme colors
     //- v-row
     //-   v-col(v-for='(color, i) in colors' :key='i')
@@ -77,6 +90,7 @@ export default {
       mdiDeleteForever, mdiRestore, mdiPlus, mdiChevronUp,
       valid: false,
       logoKey: 0,
+      fallbackImageKey: 0,
       link: { href: '', label: '' },
       linkModal: false
       // menu: [false, false, false, false]
@@ -127,11 +141,19 @@ export default {
     forceLogoReload () {
       this.logoKey++
     },
+    forceFallbackImageReload () {
+      this.fallbackImageKey++
+    },
     resetLogo (e) {
       this.setSetting({ key: 'logo', value: null })
         .then(this.forceLogoReload)
       e.stopPropagation()
     },
+    resetFallbackImage (e) {
+      this.setSetting({ key: 'fallbackImage', value: null })
+        .then(this.forceFallbackImageReload)
+      e.stopPropagation()
+    },
     updateColor (i, v) {
       this.colors[i] = v.hex
       this.$vuetify.theme.themes.dark[i] = v.hex
@@ -177,6 +199,19 @@ export default {
 
       }
     },
+    async uploadFallbackImage (file) {
+      const formData = new FormData()
+      formData.append('fallbackImage', file)
+      try {
+        await this.$axios.$post('/settings/fallbackImage', formData)
+        this.$root.$emit('message', {
+          message: 'Fallback image updated'
+        })
+        this.forceFallbackImageReload()
+      } catch (e) {
+
+      }    
+    },
     save (key, value) {
       if (this.settings[key] !== value) {
         this.setSetting({ key, value })

docs/assets/js/gancio-events.es.js

@@ -313,13 +313,13 @@ function Le(t) {
   let e, i, n;
   return {
     c() {
-      e = g("img"), a(e, "style", "aspect-ratio=1.7778;"), a(e, "alt", i = t[12].title), G(e.src, n = t[0] + "/noimg.svg") || a(e, "src", n), a(e, "loading", "lazy");
+      e = g("img"), a(e, "style", "aspect-ratio=1.7778;"), a(e, "alt", i = t[12].title), G(e.src, n = t[0] + "/fallbackimage.png") || a(e, "src", n), a(e, "loading", "lazy");
     },
     m(l, o) {
       v(l, e, o);
     },
     p(l, o) {
-      o & 32 && i !== (i = l[12].title) && a(e, "alt", i), o & 1 && !G(e.src, n = l[0] + "/noimg.svg") && a(e, "src", n);
+      o & 32 && i !== (i = l[12].title) && a(e, "alt", i), o & 1 && !G(e.src, n = l[0] + "/fallbackimage.png") && a(e, "src", n);
     },
     d(l) {
       l && x(e);

locales/en.json

@@ -246,7 +246,8 @@
     "collections_description": "Collections are groupings of events by tags and places. They will be displayed on the home page",
     "edit_collection": "Edit Collection",
     "config_plugin": "Plugin configuration",
-    "plugins_description": ""
+    "plugins_description": "",
+    "fallbackImage": "Fallback image"
   },
   "auth": {
     "not_confirmed": "Not confirmed yet…",

server/api/controller/settings.js

@@ -176,7 +176,30 @@ const settingsController = {
         settingsController.set('logo', baseImgPath)
         res.sendStatus(200)
       })
+  },
+
+  setFallbackImage (req, res) {
+    if (!req.file) {
+      settingsController.set('fallbackImage', false)
+      return res.status(200)
+    }
+
+    const uploadedPath = path.join(req.file.destination, req.file.filename)
+    const baseImgPath = path.resolve(config.upload_path, 'fallbackImage.png')
+
+    // convert and resize to png
+    return sharp(uploadedPath)
+      .resize(600)
+      .png({ quality: 99 })
+      .toFile(baseImgPath, (err) => {
+        if (err) {
+          log.error('[FALLBACK IMAGE] ' + err)
+        }
+        settingsController.set('fallbackImage', baseImgPath)
+        res.sendStatus(200)
+      })
   }
+
 }
 
 module.exports = settingsController

server/api/index.js

@@ -141,6 +141,7 @@ if (config.status !== 'READY') {
   api.post('/settings', isAdmin, settingsController.setRequest)
   api.get('/settings', isAdmin, settingsController.getAll)
   api.post('/settings/logo', isAdmin, multer({ dest: config.upload_path }).single('logo'), settingsController.setLogo)
+  api.post('/settings/fallbackImage', isAdmin, multer({ dest: config.upload_path }).single('fallbackImage'), settingsController.setFallbackImage)
   api.post('/settings/smtp', isAdmin, settingsController.testSMTP)
   api.get('/settings/smtp', isAdmin, settingsController.getSMTPSettings)
 

server/helpers.js

@@ -22,7 +22,6 @@ const { JSDOM } = require('jsdom')
 const { window } = new JSDOM('<!DOCTYPE html>')
 const domPurify = DOMPurify(window)
 const url = require('url')
-const locales = require('../locales')
 
 domPurify.addHook('beforeSanitizeElements', node => {
   if (node.hasAttribute && node.hasAttribute('href')) {
@@ -108,10 +107,14 @@ module.exports = {
         }
       })
     })
-    router.use('/noimg.svg', express.static('./static/noimg.svg'))
+
+    router.use('/fallbackimage.png', (req, res, next) => {
+      const fallbackImagePath =  settingsController.settings.fallbackImage || './static/noimg.svg'
+      return express.static(fallbackImagePath)(req, res, next)      
+    })
 
     router.use('/logo.png', (req, res, next) => {
-      const logoPath = res.locals.settings.logo || './static/gancio'
+      const logoPath = settingsController.settings.logo || './static/gancio'
       return express.static(logoPath + '.png')(req, res, next)
     })
 

static/gancio-events.es.js

@@ -313,13 +313,13 @@ function Le(t) {
   let e, i, n;
   return {
     c() {
-      e = g("img"), a(e, "style", "aspect-ratio=1.7778;"), a(e, "alt", i = t[12].title), G(e.src, n = t[0] + "/noimg.svg") || a(e, "src", n), a(e, "loading", "lazy");
+      e = g("img"), a(e, "style", "aspect-ratio=1.7778;"), a(e, "alt", i = t[12].title), G(e.src, n = t[0] + "/fallbackimage.png") || a(e, "src", n), a(e, "loading", "lazy");
     },
     m(l, o) {
       v(l, e, o);
     },
     p(l, o) {
-      o & 32 && i !== (i = l[12].title) && a(e, "alt", i), o & 1 && !G(e.src, n = l[0] + "/noimg.svg") && a(e, "src", n);
+      o & 32 && i !== (i = l[12].title) && a(e, "alt", i), o & 1 && !G(e.src, n = l[0] + "/fallbackimage.png") && a(e, "src", n);
     },
     d(l) {
       l && x(e);

webcomponents/src/GancioEvents.svelte

@@ -98,7 +98,7 @@
               <img
                 style="aspect-ratio=1.7778;"
                 alt={event.title}
-                src={baseurl + '/noimg.svg'}
+                src={baseurl + '/fallbackimage.png'}
                 loading="lazy"
               />
             {/if}

wp-plugin/js/gancio-events.es.js

@@ -313,13 +313,13 @@ function Le(t) {
   let e, i, n;
   return {
     c() {
-      e = g("img"), a(e, "style", "aspect-ratio=1.7778;"), a(e, "alt", i = t[12].title), G(e.src, n = t[0] + "/noimg.svg") || a(e, "src", n), a(e, "loading", "lazy");
+      e = g("img"), a(e, "style", "aspect-ratio=1.7778;"), a(e, "alt", i = t[12].title), G(e.src, n = t[0] + "/fallbackimage.png") || a(e, "src", n), a(e, "loading", "lazy");
     },
     m(l, o) {
       v(l, e, o);
     },
     p(l, o) {
-      o & 32 && i !== (i = l[12].title) && a(e, "alt", i), o & 1 && !G(e.src, n = l[0] + "/noimg.svg") && a(e, "src", n);
+      o & 32 && i !== (i = l[12].title) && a(e, "alt", i), o & 1 && !G(e.src, n = l[0] + "/fallbackimage.png") && a(e, "src", n);
     },
     d(l) {
       l && x(e);