added og_image and touch_icon into admin appearance panel

This commit is contained in:
Peter Papp
2021-03-27 11:33:42 +01:00
parent bb3f4d4bda
commit 4d5cd3d80f
8 changed files with 75 additions and 7 deletions
@@ -62,6 +62,24 @@
<ImageInput @input="$updateImage('/admin/settings', 'app_favicon', app.favicon)" :image="$getImage(app.favicon)" v-model="app.favicon" :error="errors[0]"/>
</ValidationProvider>
</div>
<!--TODO: add language-->
<div class="block-wrapper">
<label>OG Image:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
<ImageInput @input="$updateImage('/admin/settings', 'app_og_image', app.og_image)" :image="$getImage(app.og_image)" v-model="app.og_image" :error="errors[0]"/>
<small class="input-help">Image that appear when someone shares the content to Facebook or any other social medium. Preferred size is 1200x627</small>
</ValidationProvider>
</div>
<!--TODO: add language-->
<div class="block-wrapper">
<label>App Touch Icon:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
<ImageInput @input="$updateImage('/admin/settings', 'app_touch_icon', app.touch_icon)" :image="$getImage(app.touch_icon)" v-model="app.touch_icon" :error="errors[0]"/>
<small class="input-help">If user store bookmark on his phone screen, this icon appear in app thumbnail. Preferred size is 156x156</small>
</ValidationProvider>
</div>
</div>
</PageTabGroup>
</PageTab>
@@ -106,7 +124,7 @@
mounted() {
axios.get('/api/admin/settings', {
params: {
column: 'app_title|app_description|app_logo|app_favicon|app_logo_horizontal|app_color'
column: 'app_title|app_description|app_logo|app_favicon|app_logo_horizontal|app_color|app_og_image|app_touch_icon'
}
})
.then(response => {
@@ -117,6 +135,8 @@
title: response.data.app_title,
color: response.data.app_color,
logo: response.data.app_logo,
og_image: response.data.app_og_image,
touch_icon: response.data.app_touch_icon,
}
})
.finally(() => {
@@ -50,6 +50,22 @@
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>OG Image (optional):</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
<ImageInput v-model="app.og_image" :error="errors[0]"/>
<small class="input-help">Image that appear when someone shares the content to Facebook or any other social medium. Preferred size is 1200x627</small>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>App Touch Icon (optional):</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
<ImageInput v-model="app.touch_icon" :error="errors[0]"/>
<small class="input-help">If user store bookmark on his phone screen, this icon appear in app thumbnail. Preferred size is 156x156</small>
</ValidationProvider>
</div>
<FormLabel class="mt-70">Others Information</FormLabel>
<div class="block-wrapper">
@@ -158,6 +174,8 @@
logo: undefined,
logo_horizontal: undefined,
favicon: undefined,
og_image: undefined,
touch_icon: undefined,
contactMail: '',
googleAnalytics: '',
defaultStorage: '5',
@@ -199,6 +217,12 @@
if (this.app.logo_horizontal)
formData.append('logo_horizontal', this.app.logo_horizontal)
if (this.app.og_image)
formData.append('og_image', this.app.og_image)
if (this.app.touch_icon)
formData.append('touch_icon', this.app.touch_icon)
if (this.app.favicon)
formData.append('favicon', this.app.favicon)