Add titles to collections and update image URL resolution in components

- Added 'title' property to collections for 'Logos', 'Flags', and 'Emblems'.
- Updated image URL generation in CardMiddle, CardSmall, and CardTiny components to dynamically resolve the current collection based on window.appData.

public/data/emblems.json

@@ -1,7 +1,7 @@
 [
   {
     "name": "Escudo De España",
-    "path": "Escudo_de_España.svg",
+    "path": "Escudo_de_Espana.svg",
     "format": "SVG",
     "disable": false,
     "tags": [

src/collections.js

@@ -3,6 +3,7 @@ export const collections = [
     {
         name: 'logos',
         label: 'Logos',
+        title: 'Logo Gallery',
         baseDir: 'images/logos',
         varDir: 'images/logos_variants',
         dataFile: 'data/logos.json'
@@ -10,6 +11,7 @@ export const collections = [
     {
         name: 'flags',
         label: 'Flags',
+        title: 'Flag Gallery',
         baseDir: 'images/flags',
         varDir: 'images/flags_variants',
         dataFile: 'data/flags.json'
@@ -17,6 +19,7 @@ export const collections = [
     {
         name: 'emblems',
         label: 'Emblems',
+        title: 'Emblem Gallery',
         baseDir: 'images/emblems',
         varDir: 'images/emblems_variants',
         dataFile: 'data/emblems.json'

src/components/CardMiddle.svelte

@@ -41,7 +41,12 @@
     }
   }
   function getImageUrl(logo) {
-    return `/${collection.baseDir}/${logo.path}`;
+    // Always resolve collection for each logo based on current collection name
+    let currentCollection = collection;
+    if (typeof window !== 'undefined' && window.appData && window.appData.collection) {
+      currentCollection = collections.find(c => c.name === window.appData.collection) || collections[0];
+    }
+    return `/${currentCollection.baseDir}/${logo.path}`;
   }
 
   $: getLogoThemeColor = (logo) => getDefaultLogoColor(logo.colors, theme);

src/components/CardSmall.svelte

@@ -44,7 +44,12 @@
     }
   }
   function getImageUrl(logo) {
-    return `/${collection.baseDir}/${logo.path}`;
+    // Always resolve collection for each logo based on current collection name
+    let currentCollection = collection;
+    if (typeof window !== 'undefined' && window.appData && window.appData.collection) {
+      currentCollection = collections.find(c => c.name === window.appData.collection) || collections[0];
+    }
+    return `/${currentCollection.baseDir}/${logo.path}`;
   }
 </script>
 

src/components/CardTiny.svelte

@@ -50,7 +50,12 @@
     }
   }
   function getImageUrl(logo) {
-    return `/${collection.baseDir}/${logo.path}`;
+    // Always resolve collection for each logo based on current collection name
+    let currentCollection = collection;
+    if (typeof window !== 'undefined' && window.appData && window.appData.collection) {
+      currentCollection = collections.find(c => c.name === window.appData.collection) || collections[0];
+    }
+    return `/${currentCollection.baseDir}/${logo.path}`;
   }
 
 </script>