added og_image and touch_icon into admin appearance panel

app/Console/Commands/SetupDevEnvironment.php

@@ -793,6 +793,14 @@ class SetupDevEnvironment extends Command
                 'name'  => 'app_favicon',
                 'value' => 'system/favicon.png',
             ],
+            [
+                'name'  => 'app_og_image',
+                'value' => 'system/og-image.jpg',
+            ],
+            [
+                'name'  => 'app_touch_icon',
+                'value' => 'system/touch-icon.png',
+            ],
             [
                 'name'  => 'google_analytics',
                 'value' => '',
@@ -869,7 +877,7 @@ class SetupDevEnvironment extends Command
         });
 
         // Get system images
-        collect(['logo.svg', 'logo-horizontal.svg', 'favicon.png'])
+        collect(['logo.svg', 'logo-horizontal.svg', 'favicon.png', 'og-image.jpg', 'touch-icon.png'])
             ->each(function ($file) {
                 \File::copy(storage_path("demo/app/$file"), storage_path("app/system/$file"));
             });

app/Http/Controllers/App/SetupWizardController.php

@@ -346,6 +346,14 @@ class SetupWizardController extends Controller
                 'name'  => 'app_favicon',
                 'value' => store_system_image($request, 'favicon'),
             ],
+            [
+                'name'  => 'app_og_image',
+                'value' => store_system_image($request, 'og_image'),
+            ],
+            [
+                'name'  => 'app_touch_icon',
+                'value' => store_system_image($request, 'touch_icon'),
+            ],
             [
                 'name'  => 'google_analytics',
                 'value' => $request->googleAnalytics,

public/mix-manifest.json

@@ -8,7 +8,7 @@
     "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~a001bb84.js": "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~a001bb84.js?id=0cad8279d29d79cd0e82",
     "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared/file-browser.js?id=9b66c2dab4c6103bb53c",
     "/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=5efddad1c72c0f672608",
-    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=38934ca24684b2ee56d1",
+    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=ff4a6b02105eaac93dcd",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js?id=45c8f27411287c7bbf73",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js?id=366ca34d2af5158d5087",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js?id=04f0cd9719723459b685",
@@ -19,7 +19,7 @@
     "/chunks/app-payments.js": "/chunks/app-payments.js?id=7e1a982c90174f568fb2",
     "/chunks/app-settings.js": "/chunks/app-settings.js?id=1441a53c88fa164f4e1c",
     "/chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~8a0e1d25.js": "/chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~8a0e1d25.js?id=e71bb0286189734a8aec",
-    "/chunks/app-setup.js": "/chunks/app-setup.js?id=299834f7d0316a4bb67a",
+    "/chunks/app-setup.js": "/chunks/app-setup.js?id=1ccc96fe3f9514f40f95",
     "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=1d6657b677bf9bb78907",
     "/chunks/contact-us.js": "/chunks/contact-us.js?id=f5276b101b2e0c97d6d1",
     "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js": "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js?id=5814ff43ba7c67297af1",
@@ -133,5 +133,13 @@
     "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.c312ac01a49b929fba87.hot-update.js": "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.c312ac01a49b929fba87.hot-update.js",
     "/chunks/platform~chunks/shared.c312ac01a49b929fba87.hot-update.js": "/chunks/platform~chunks/shared.c312ac01a49b929fba87.hot-update.js",
     "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.7453a9ff96009e423e9c.hot-update.js": "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.7453a9ff96009e423e9c.hot-update.js",
-    "/chunks/platform~chunks/shared.7453a9ff96009e423e9c.hot-update.js": "/chunks/platform~chunks/shared.7453a9ff96009e423e9c.hot-update.js"
+    "/chunks/platform~chunks/shared.7453a9ff96009e423e9c.hot-update.js": "/chunks/platform~chunks/shared.7453a9ff96009e423e9c.hot-update.js",
+    "/chunks/app-appearance.486aa26f480ea05b1176.hot-update.js": "/chunks/app-appearance.486aa26f480ea05b1176.hot-update.js",
+    "/chunks/app-appearance.bc60f50b88f5a93e42f8.hot-update.js": "/chunks/app-appearance.bc60f50b88f5a93e42f8.hot-update.js",
+    "/chunks/app-appearance.fb0cb4011641be8de4f8.hot-update.js": "/chunks/app-appearance.fb0cb4011641be8de4f8.hot-update.js",
+    "/chunks/app-appearance.e815a589597dff4f5685.hot-update.js": "/chunks/app-appearance.e815a589597dff4f5685.hot-update.js",
+    "/chunks/app-appearance.44d5b8dcf013107a5294.hot-update.js": "/chunks/app-appearance.44d5b8dcf013107a5294.hot-update.js",
+    "/chunks/app-appearance.d3d27ea24498ba39c361.hot-update.js": "/chunks/app-appearance.d3d27ea24498ba39c361.hot-update.js",
+    "/chunks/app-appearance.844fe0955143cc8be1ed.hot-update.js": "/chunks/app-appearance.844fe0955143cc8be1ed.hot-update.js",
+    "/chunks/app-setup.1a41ce9be4b75218db5b.hot-update.js": "/chunks/app-setup.1a41ce9be4b75218db5b.hot-update.js"
 }

resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue

@@ -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(() => {

resources/js/views/SetupWizard/AppSetup.vue

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

resources/views/index.blade.php

@@ -16,7 +16,7 @@
     <meta property="og:url" content="{{ url('/') }}">
     <meta property="og:title" content="{{ $settings->app_title ?? 'VueFileManager' }} | {{ $settings->app_description ?? __('vuefilemanager.app_description') }}">
     <meta property="og:description" content="{{ $settings->app_description ?? __('vuefilemanager.app_description') }}">
-    <meta property="og:image" content="{{ asset('assets/images/vuefilemanager-og-image.jpg') }}">
+    <meta property="og:image" content="{{ $settings->app_og_image ? url($settings->app_og_image) : '' }}">
 
     {{-- Apple Mobile Web App--}}
     <meta name="apple-mobile-web-app-capable" content="yes">
@@ -24,7 +24,7 @@
     <meta name="apple-mobile-web-app-title" content="{{ $settings->app_title ?? 'VueFileManager' }}">
 
     {{--Icons--}}
-    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="{{ asset('assets/images/app-icon.png') }}">
+    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="{{ $settings->app_touch_icon ? url($settings->app_touch_icon) : '' }}">
     <link rel="icon" href="{{ $settings->app_favicon ? url($settings->app_favicon) : asset('favicon.png') }}?v={{ get_version() }}">
 
     {{--Format Detection--}}