@sarimarcus/content-sites-tourism 0.20.0 → 0.21.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.21.0 (2026-10-02)
+
+- Cards and ranked listing rows pass core's `IMAGE_LADDER` and WebP-only formats (SLA-2912).
+
 ## 0.20.0 (2026-10-02)
 
 - No changes; lockstep release with ui and core (SLA-2740).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-tourism",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "City-tourism vertical: city-entity components, pages templates and utilities for the tourism sites.",
   "type": "module",
   "license": "MIT",
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "astro": "^7.0.6",
     "tailwindcss": "^4.1.18",
-    "@sarimarcus/content-sites-core": "0.20.0",
-    "@sarimarcus/content-sites-ui": "0.20.0"
+    "@sarimarcus/content-sites-core": "0.21.0",
+    "@sarimarcus/content-sites-ui": "0.21.0"
   }
 }

package/src/cards/BarCard.astro

@@ -1,4 +1,5 @@
 ---
+import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
 /**
  * BarCard — bar teaser. The category key picks the badge colour; its label, the feature labels and icons (sites store
  * different feature keys), the closing line and every other visible string come from the site adapter, which also
@@ -86,9 +87,9 @@ const categoryStyle = categoryColors[category] || { bg: 'bg-muted', text: 'text-
         <Picture
           src={image}
           alt={imageAlt}
-          widths={[240, 320, 400, 480, 640]}
+          widths={IMAGE_LADDER}
           sizes="(max-width: 1023px) 100vw, 50vw"
-          formats={['avif', 'webp']}
+          formats={['webp']}
           fallbackFormat="webp"
           pictureAttributes={{ class: 'block w-full h-full' }}
           class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"

package/src/cards/DishCard.astro

@@ -1,4 +1,5 @@
 ---
+import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
 /**
  * DishCard — dish teaser. The category key picks the badge colour; the label, tags and every other visible string
  * come from the site adapter, which also resolves the image, href and placeholder.
@@ -68,9 +69,9 @@ const audienceLabels = tagLabels.slice(0, 3);
         <Picture
           src={image}
           alt={imageAlt}
-          widths={[240, 320, 400, 480, 640]}
+          widths={IMAGE_LADDER}
           sizes="(max-width: 639px) 100vw, (max-width: 1023px) 50vw, 33vw"
-          formats={['avif', 'webp']}
+          formats={['webp']}
           fallbackFormat="webp"
           pictureAttributes={{ class: 'block w-full h-full' }}
           class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"

package/src/cards/MonumentCard.astro

@@ -1,4 +1,5 @@
 ---
+import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
 /**
  * MonumentCard — monument or museum teaser (exported under both names) for listings and related rails. The site
  * adapter resolves the image, the href, the placeholder and every visible string; the card only lays them out.
@@ -70,9 +71,9 @@ const loadingStrategy = index < eager ? "eager" : "lazy";
       <Picture
         src={image}
         alt={imageAlt}
-        widths={[240, 320, 400, 480, 640]}
+        widths={IMAGE_LADDER}
         sizes="(max-width: 639px) 100vw, (max-width: 1023px) 50vw, 33vw"
-        formats={['avif', 'webp']}
+        formats={['webp']}
         fallbackFormat="webp"
         pictureAttributes={{ class: 'block w-full h-full' }}
         class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"

package/src/cards/NeighborhoodCard.astro

@@ -1,4 +1,5 @@
 ---
+import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
 /**
  * NeighborhoodCard — rich neighbourhood card: title over the image, counts, an editorial badge and a "top attractions"
  * preview (always visible below the image on mobile, sliding up on hover from lg). The site adapter resolves the
@@ -98,9 +99,9 @@ const cardHeight = 'h-72 sm:h-80';
         <Picture
           src={image}
           alt={imageAlt}
-          widths={[240, 320, 400, 480, 640]}
+          widths={IMAGE_LADDER}
           sizes="(max-width: 767px) 100vw, (max-width: 1023px) 50vw, 33vw"
-          formats={['avif', 'webp']}
+          formats={['webp']}
           fallbackFormat="webp"
           pictureAttributes={{ class: 'block w-full h-full' }}
           class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"

package/src/cards/RestaurantCard.astro

@@ -1,4 +1,5 @@
 ---
+import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
 /**
  * RestaurantCard — restaurant teaser for listings, facets and related rails. The site adapter resolves the image, href,
  * placeholder, badge decisions and every visible string; the card only lays them out.
@@ -81,9 +82,9 @@ const loadingStrategy = index < eager ? "eager" : "lazy";
         <Picture
           src={image}
           alt={imageAlt}
-          widths={[240, 320, 400, 480, 640]}
+          widths={IMAGE_LADDER}
           sizes="(max-width: 639px) 100vw, (max-width: 1023px) 50vw, 33vw"
-          formats={['avif', 'webp']}
+          formats={['webp']}
           fallbackFormat="webp"
           pictureAttributes={{ class: 'block w-full h-full' }}
           class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"

package/src/cards/WalkCard.astro

@@ -1,4 +1,5 @@
 ---
+import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
 /**
  * WalkCard — walking-route teaser. Theme and difficulty keys pick the badge colours; their labels and every other
  * visible string come from the site adapter. Without an image the card shows a footsteps placeholder.
@@ -77,9 +78,9 @@ const difficultyColor = difficultyColors[difficulty] || 'bg-muted text-muted-for
         <Picture
           src={image}
           alt={imageAlt}
-          widths={[320, 400, 480, 640]}
+          widths={IMAGE_LADDER}
           sizes="(max-width: 639px) 100vw, (max-width: 1023px) 50vw, 33vw"
-          formats={['avif', 'webp']}
+          formats={['webp']}
           fallbackFormat="webp"
           pictureAttributes={{ class: 'block w-full h-full' }}
           class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"

package/src/sections/RankedListingRow.astro

@@ -1,4 +1,5 @@
 ---
+import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
 /**
  * RankedListingRow — one entry in a numbered editorial ranking list, e.g. a proximity page that reads top-to-bottom by
  * distance. Rendered inside the caller's `<ol>`. The whole row is one real link, so the name stays selectable text.
@@ -69,9 +70,9 @@ const paddedRank = String(rank).padStart(2, '0');
           <Picture
             src={image}
             alt={imageAlt}
-            widths={[160, 240, 320]}
+            widths={IMAGE_LADDER}
             sizes="(max-width: 639px) 88px, 144px"
-            formats={['avif', 'webp']}
+            formats={['webp']}
             fallbackFormat="webp"
             pictureAttributes={{ class: 'block w-full h-full' }}
             class="w-full h-full object-cover transition-transform duration-500 ease-out group-hover:scale-[1.04]"