🌸 Marketplace: Product::Photo Better handling of aspect ratio / r…

…esolution (#2115)

- #1326

The aspect ratio is now 16x9, which should be easier for people to just
"naturally" upload. The width of the small hero variant is edge-to-edge
full-def on Apple's current highest-end device, the iPhone 15 Pro Max.

There's probably a way smarter way of doing this that uses say,
background images and CSS selectors to load just-the-right-sized image
for the particular use-case; but I figure going big-and-downscaling is
probably better from a "make pretty" perspective.

* Just a smidge of space

app/furniture/marketplace/product_component.html.erb

@@ -1,17 +1,20 @@
 <%= render CardComponent.new(dom_id: dom_id(product)) do |card| %>
-  <%- card.with_header do %>
-    <h3 class="py-2"><%= name %></h3>
-    <%- if product.archived? %>
-      <span class="italic">(archived)</span>
-    <%- end %>
+  <%- card.with_header(variant: :no_padding) do %>
+    <% if product.photo.present? %>
+      <figure>
+        <%= image_tag hero_image, class: "rounded-t-lg w-full" %>
+        <figcaption class="px-2 pt-4 sm:px-4">
+          <h3><%= name %></h3>
+          <%- if product.archived? %>
+            <span class="italic">(archived)</span>
+          <%- end %>
+        </figcaption>
+      </figure>
+    <%- else %>
+      <h3 class="px-4"><%= name %></h3>
+    <% end %>
   <%- end %>
 
-
-  <% if product.photo.present? %>
-    <div>
-      <%= image_tag product.photo.variant(resize_to_limit: [150, 150]) %>
-    </div>
-  <% end %>
   <div class="text-sm italic">
     <%= description %>
   </div>
@@ -23,7 +26,6 @@
     <p><%= price %></p>
   </div>
 
-
   <%- card.with_footer(variant: :action_bar) do %>
     <%= render edit_button if edit_button? %>
     <%= render archive_button if archive_button?  %>

app/furniture/marketplace/product_component.rb

@@ -13,6 +13,14 @@ def edit_button
       super(title: t("marketplace.products.edit.link_to", name: name), href: location(:edit))
     end
 
+    # 16:9 of 1290 is 1290:725.625
+    # We rounded up.
+    # @see https://www.ios-resolution.com/
+    FULL_WIDTH_16_BY_9 = [1290, 726]
+    def hero_image
+      product.photo.variant(resize_to_limit: FULL_WIDTH_16_BY_9)
+    end
+
     def tax_rates
       product.tax_rates.map do |tax_rate|
         "#{tax_rate.label} #{helpers.number_to_percentage(tax_rate.tax_rate, precision: 2)}"

spec/furniture/marketplace/selling_products_system_spec.rb

@@ -45,7 +45,6 @@
       end
 
       click_button(I18n.t("restore.link_to"))
-
       expect(page).to have_content(product.name)
       expect(product.reload).not_to be_archived
     end