soames-astro-theme 0.1.7 → 0.1.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "soames-astro-theme",
   "type": "module",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Shared Astro theme for the Soames ecosystem (WordPress headless + React islands). Successor to soames-gatsby-theme.",
   "keywords": [
     "astro",

package/src/components/shortcodes/Shortcodes.tsx

@@ -155,11 +155,14 @@ const handleShortcodes: HTMLReactParserOptions["replace"] = (node) => {
 
     if (classes.includes("wp-block-soames-gallery-menu")) {
       const attrs = (node as DomElement).attribs;
+      // ORBI-44: "compact" fits 4 per row; anything else defaults to "standard".
+      const layout = attrs["data-layout"] === "compact" ? "compact" : "standard";
       // ORBI-20: prefer JSON `data-items`, fall back to legacy comma attrs.
       if (attrs["data-items"]) {
         try {
           const items = JSON.parse(attrs["data-items"]);
-          if (Array.isArray(items)) return <SoamesGalleryMenu items={items} />;
+          if (Array.isArray(items))
+            return <SoamesGalleryMenu items={items} layout={layout} />;
         } catch {
           /* malformed JSON — fall through to legacy parsing below */
         }
@@ -167,6 +170,7 @@ const handleShortcodes: HTMLReactParserOptions["replace"] = (node) => {
       const csv = (key: string) => (attrs[key] ?? "").split(",");
       return (
         <SoamesGalleryMenu
+          layout={layout}
           attributes={{
             images: csv("data-images"),
             labels: csv("data-labels"),

package/src/components/shortcodes/SoamesGalleryMenu.tsx

@@ -24,12 +24,16 @@ interface GalleryMenuItem {
   css?: string | null;
 }
 
+// ORBI-44: "standard" = 3 items per row, "compact" = 4 items per row.
+type GalleryMenuLayout = "standard" | "compact";
+
 interface SoamesGalleryMenuProps {
   items?: GalleryMenuItemInput[];
   attributes?: GalleryMenuAttributes;
+  layout?: GalleryMenuLayout;
 }
 
-const SoamesGalleryMenu: React.FC<SoamesGalleryMenuProps> = ({ items, attributes }) => {
+const SoamesGalleryMenu: React.FC<SoamesGalleryMenuProps> = ({ items, attributes, layout = "standard" }) => {
   const normalizeUrl = (url: string) => (url ?? "").replace(/['""]+/g, '"');
 
   let menuItems: GalleryMenuItem[];
@@ -57,12 +61,15 @@ const SoamesGalleryMenu: React.FC<SoamesGalleryMenuProps> = ({ items, attributes
   // Drop rows with no image (e.g. a trailing comma in the legacy format).
   menuItems = menuItems.filter((item) => item.imageUrl.trim().length > 0);
 
+  // Standard fits 3 across (col-lg-4); compact fits 4 across (col-lg-3).
+  const colClass = layout === "compact" ? "col-lg-3" : "col-lg-4";
+
   return (
-    <section className="features1 soames-gallery-menu">
-      <div className="container-fluid">
+    <section className={`features1 soames-gallery-menu soames-gallery-menu--${layout}`}>
+      <div className="container">
         <div className="media-container-row">
           {menuItems.map(menuItem => (
-            <div key={menuItem.id} className="card p-3 col-md-12 col-lg-3">
+            <div key={menuItem.id} className={`card p-3 col-md-12 ${colClass}`}>
               <div className="card-wrapper">
                 <div className="card-img">
                   <a href={menuItem.link ?? "#"}>

package/src/styles/soames/overrides.css

@@ -878,6 +878,28 @@ section.lazy-placeholder:after {
   background-color: #fff;
 }
 
+/* ORBI-44: keep every tile the same size regardless of the source image's
+   aspect ratio. Without this, images render at their natural height, so an
+   oddly-shaped photo makes its card shorter than its neighbours. A fixed 4:3
+   box + object-fit:cover normalizes them (4:3 source images are not cropped).
+   min-width:0 stops a large image from blowing its flex card past the column
+   width, so the columns share the row evenly. */
+.soames-gallery-menu .card {
+  min-width: 0;
+}
+
+.soames-gallery-menu .card-img {
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+}
+
+.soames-gallery-menu .card-img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
 .soames-gallery-menu .card-box {
   background-color: #ffffff;
   padding: 2rem;
@@ -914,6 +936,14 @@ section.lazy-placeholder:after {
     max-width: 20%;
     padding: 15px;
   }
+
+  /* ORBI-44: the shared .media-container-row is nowrap at >=992px, which forces
+     every gallery card onto one line. Re-enable wrapping (scoped to the gallery,
+     higher specificity so it wins) so the column classes below wrap into rows —
+     standard (col-lg-4) = 3 per row, compact (col-lg-3) = 4 per row. */
+  .soames-gallery-menu .media-container-row {
+    flex-wrap: wrap;
+  }
 }
 
 .media-wrap-icon {