feat: open full-size image

AloisSeckar · Jan 27, 2024 · c099ec2 · c099ec2
1 parent e42e857
commit c099ec2
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 9 deletions.
diff --git a/assets/lang/cs.json b/assets/lang/cs.json
@@ -38,7 +38,8 @@
     "images" : {
         "title" : "Obrázky",
         "total" : "Celkem obrázků",
-        "no-dscr" : "Popis není k dispozici..."
+        "no-dscr" : "Popis není k dispozici...",
+        "full-size" : "Klikněte pro zobrazení v plné velikosti"
     },
     "books" : {
         "total" : "Celkem knih",

diff --git a/assets/lang/en.json b/assets/lang/en.json
@@ -38,7 +38,8 @@
     "images" : {
         "title" : "Images",
         "total" : "Total images",
-        "no-dscr" : "Descripion not available..."
+        "no-dscr" : "Descripion not available...",
+        "full-size" : "Click to open full-size image"
     },
     "books" : {
         "total" : "Total books",

diff --git a/components/item/Image.vue b/components/item/Image.vue
@@ -21,13 +21,19 @@
         <hr class="mb-2">
         <ItemImageNav :item="item" :editable="editable" />
         <div class="mx-auto max-w-[60%]">
-          <NuxtImg
-            class="my-2 inline-block w-full h-auto border"
-            provider="cloudinary"
-            :src="useRuntimeConfig().public.cloudinary.folder + item.image"
-            :alt="item.name"
-            :title="item.name"
-          />
+          <NuxtLink
+            :to="useRuntimeConfig().public.cloudinary.baseURL + useRuntimeConfig().public.cloudinary.folder + item.image"
+            :external="true"
+            target="_blank"
+          >
+            <NuxtImg
+              class="my-2 inline-block w-full h-auto border"
+              provider="cloudinary"
+              :src="useRuntimeConfig().public.cloudinary.folder + item.image"
+              :alt="item.name"
+              :title="useT('images.full-size')"
+            />
+          </NuxtLink>
         </div>
         <ItemImageNav :item="item" :editable="editable" />
       </div>

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -18,6 +18,7 @@ export default defineNuxtConfig({
       lang: 'en',
       debug: false,
       cloudinary: {
+        baseURL: 'https://res.cloudinary.com/dxn3gzvtm/image/upload/',
         preset: 'elrhistory',
         folder: 'elrhistory'
       },