Change Item Card to use object contain by default for images (#1020)

* feat: add legacy image fit preference and adjustable image display in card component

* feat: add blurred bg image when object contain

* fix: add alt text for image and improve objectContain

frontend/components/Item/Card.vue

@@ -10,7 +10,21 @@
     </div>
     <NuxtLink :to="`/item/${item.id}`">
       <div class="relative h-[200px]">
-        <img v-if="imageUrl" class="h-[200px] w-full object-cover shadow-md" loading="lazy" :src="imageUrl" alt="" />
+        <img
+          v-if="imageUrl && objectContain"
+          class="absolute h-[200px] w-full object-cover blur-md"
+          loading="lazy"
+          :src="imageUrl"
+          alt=""
+        />
+        <img
+          v-if="imageUrl"
+          class="absolute h-[200px] w-full shadow-md"
+          :class="objectContain ? 'object-contain' : 'object-cover'"
+          loading="lazy"
+          :src="imageUrl"
+          :alt="item.name"
+        />
         <div class="absolute inset-x-1 bottom-1">
           <Badge class="text-wrap bg-secondary text-secondary-foreground hover:bg-secondary/70 hover:underline">
             <NuxtLink v-if="item.location" :to="`/location/${item.location.id}`">
@@ -76,6 +90,7 @@
   import { Checkbox } from "@/components/ui/checkbox";
 
   const api = useUserApi();
+  const preferences = useViewPreferences();
 
   const imageUrl = computed(() => {
     if (!props.item.imageId) {
@@ -109,6 +124,8 @@
     },
   });
 
+  const objectContain = computed(() => imageUrl.value !== "/no-image.jpg" && !preferences.value.legacyImageFit);
+
   const locationString = computed(
     () => props.locationFlatTree.find(l => l.id === props.item.location?.id)?.treeString || props.item.location?.name
   );

frontend/composables/use-preferences.ts

@@ -23,6 +23,7 @@ export type LocationViewPreferences = {
     enabled: boolean;
   }[];
   displayLegacyHeader: boolean;
+  legacyImageFit: boolean;
   language?: string;
   overrideFormatLocale?: string;
   duplicateSettings: DuplicateSettings;
@@ -47,6 +48,7 @@ export function useViewPreferences(): Ref<LocationViewPreferences> {
       theme: "homebox",
       itemsPerTablePage: 10,
       displayLegacyHeader: false,
+      legacyImageFit: false,
       language: null,
       overrideFormatLocale: null,
       duplicateSettings: {

frontend/locales/en.json

@@ -555,6 +555,7 @@
         "delete_account_sub": "Delete your account and all its associated data. This can not be undone.",
         "delete_notifier_confirm": "Are you sure you want to delete this notifier?",
         "display_legacy_header": "{ currentValue, select, true {Disable Legacy Header} false {Enable Legacy Header} other {Not Hit}}",
+        "legacy_image_fit": "{ currentValue, select, true {Disable Legacy Fit: Fit Image with Bars} false {Enable Legacy Fit: Fill Image with Crop} other {Not Hit}}",
         "enabled": "Enabled",
         "example": "Example",
         "gen_invite": "Generate Invite Link",

frontend/pages/profile.vue

@@ -61,6 +61,9 @@
   function setDisplayHeader() {
     preferences.value.displayLegacyHeader = !preferences.value.displayLegacyHeader;
   }
+  function setLegacyImageFit() {
+    preferences.value.legacyImageFit = !preferences.value.legacyImageFit;
+  }
 
   // Currency Selection
   const currency = ref<CurrenciesCurrency>({
@@ -530,10 +533,13 @@
         </template>
 
         <div class="px-4 pb-4">
-          <div class="mb-3">
+          <div class="mb-3 flex gap-2">
             <Button variant="secondary" size="sm" @click="setDisplayHeader">
               {{ $t("profile.display_legacy_header", { currentValue: preferences.displayLegacyHeader }) }}
             </Button>
+            <Button variant="secondary" size="sm" @click="setLegacyImageFit">
+              {{ $t("profile.legacy_image_fit", { currentValue: preferences.legacyImageFit }) }}
+            </Button>
           </div>
           <ThemePicker />
         </div>