NoLog.cz/gancio-upstream
6
0
Fork 0
mirror of https://framagit.org/les/gancio.git synced 2025-01-31 16:42:22 +01:00
Code Issues Projects Releases Packages Wiki Activity

add custom fallback image, fix #195

Browse source
This commit is contained in:
lesion 2022-10-28 12:01:59 +02:00
parent 7de0206272
commit 7d0a920eb9
No known key found for this signature in database
GPG key ID: 352918250B012177
10 changed files with 84 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/MyPicture.vue
View file

@ -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>

53
components/admin/Theme.vue
View file

@ -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 })

4
docs/assets/js/gancio-events.es.js
View file

@ -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);

3
locales/en.json
View file

@ -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…",

23
server/api/controller/settings.js
View file

@ -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

1
server/api/index.js
View file

@ -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)

9
server/helpers.js
View file

@ -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)
})

4
static/gancio-events.es.js
View file

@ -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);

2
webcomponents/src/GancioEvents.svelte
View file

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

4
wp-plugin/js/gancio-events.es.js
View file

@ -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);