Refactor logo image handling across components

- Introduced utility functions to determine the base directory and image URL for logos based on their collection.
- Updated `Actions.svelte`, `CardFull.svelte`, `CardMiddle.svelte`, `CardSmall.svelte`, and `CardTiny.svelte` to use the new utility functions for generating image paths.
- Ensured that the correct image format (SVG, PNG, JPG) is used based on the logo's properties and active color sets.

src/components/CardMiddle.svelte

@@ -3,6 +3,7 @@
   import Actions from "./Actions.svelte";
   import ColorSwitcher from "./ColorSwitcher.svelte";
   import { getDefaultLogoColor } from "../utils/colorTheme.js";
+  import { collections } from '../collections.js';
 
   export let logo;
   export let theme;
@@ -21,6 +22,20 @@
     return logo && logo.format && logo.format.toLowerCase() === "svg";
   }
 
+  function getCollectionByPath(path) {
+    return collections.find(col => path.startsWith(col.baseDir.replace('images/', '')) || path.startsWith(col.baseDir));
+  }
+
+  function getBaseDir(logo) {
+    const collection = getCollectionByPath(logo.path);
+    return collection ? collection.baseDir : 'images/logos';
+  }
+
+  function getImageUrl(logo) {
+    const baseDir = getBaseDir(logo);
+    return `/${baseDir}/${logo.path.split('/').pop()}`;
+  }
+
   $: getLogoThemeColor = (logo) => getDefaultLogoColor(logo.colors, theme);
 </script>
 
@@ -41,7 +56,7 @@
     {#if isSvgLogo(logo)}
       {#key theme + (logo._activeColor || "")}
         <InlineSvg
-          path={logo.path}
+          path={getImageUrl(logo)}
           color={logo.colors
             ? logo._activeColor || getLogoThemeColor(logo)
             : undefined}
@@ -54,7 +69,7 @@
         />
       {/key}
     {:else}
-      <img src={logo.path} alt={logo.title || logo.name}/>
+      <img src={getImageUrl(logo)} alt={logo.title || logo.name}/>
     {/if}
   </div>
   <div class="logo-info">