diff --git a/lib/simpleshop_theme/theme/preview_data.ex b/lib/simpleshop_theme/theme/preview_data.ex index f97c42a..16f224a 100644 --- a/lib/simpleshop_theme/theme/preview_data.ex +++ b/lib/simpleshop_theme/theme/preview_data.ex @@ -163,6 +163,9 @@ defmodule SimpleshopTheme.Theme.PreviewData do [] end + # Default source width for mockup variants (max generated size) + @mockup_source_width 1200 + defp mock_products do [ # Art Prints @@ -172,8 +175,10 @@ defmodule SimpleshopTheme.Theme.PreviewData do description: "Capture the magic of dawn with this stunning mountain landscape print", price: 2400, compare_at_price: nil, - image_url: "/mockups/mountain-sunrise-print-1.jpg", - hover_image_url: "/mockups/mountain-sunrise-print-2.jpg", + image_url: "/mockups/mountain-sunrise-print-1", + hover_image_url: "/mockups/mountain-sunrise-print-2", + source_width: @mockup_source_width, + hover_source_width: @mockup_source_width, category: "Art Prints", in_stock: true, on_sale: false @@ -184,8 +189,10 @@ defmodule SimpleshopTheme.Theme.PreviewData do description: "A calming sunset over ocean waves to bring peace to any room", price: 2400, compare_at_price: nil, - image_url: "/mockups/ocean-waves-print-1.jpg", - hover_image_url: "/mockups/ocean-waves-print-2.jpg", + image_url: "/mockups/ocean-waves-print-1", + hover_image_url: "/mockups/ocean-waves-print-2", + source_width: @mockup_source_width, + hover_source_width: @mockup_source_width, category: "Art Prints", in_stock: true, on_sale: false @@ -196,8 +203,10 @@ defmodule SimpleshopTheme.Theme.PreviewData do description: "Beautiful wildflower meadow captured in the summer sunshine", price: 2400, compare_at_price: nil, - image_url: "/mockups/wildflower-meadow-print-1.jpg", - hover_image_url: "/mockups/wildflower-meadow-print-2.jpg", + image_url: "/mockups/wildflower-meadow-print-1", + hover_image_url: "/mockups/wildflower-meadow-print-2", + source_width: @mockup_source_width, + hover_source_width: @mockup_source_width, category: "Art Prints", in_stock: true, on_sale: false @@ -208,8 +217,10 @@ defmodule SimpleshopTheme.Theme.PreviewData do description: "Modern minimalist design with bold geometric shapes", price: 2800, compare_at_price: 3200, - image_url: "/mockups/geometric-abstract-print-1.jpg", - hover_image_url: "/mockups/geometric-abstract-print-2.jpg", + image_url: "/mockups/geometric-abstract-print-1", + hover_image_url: "/mockups/geometric-abstract-print-2", + source_width: @mockup_source_width, + hover_source_width: @mockup_source_width, category: "Art Prints", in_stock: true, on_sale: true @@ -220,8 +231,10 @@ defmodule SimpleshopTheme.Theme.PreviewData do description: "Vintage-inspired botanical drawing with intricate detail", price: 2400, compare_at_price: nil, - image_url: "/mockups/botanical-illustration-print-1.jpg", - hover_image_url: "/mockups/botanical-illustration-print-2.jpg", + image_url: "/mockups/botanical-illustration-print-1", + hover_image_url: "/mockups/botanical-illustration-print-2", + source_width: @mockup_source_width, + hover_source_width: @mockup_source_width, category: "Art Prints", in_stock: true, on_sale: false @@ -233,8 +246,10 @@ defmodule SimpleshopTheme.Theme.PreviewData do description: "Soft cotton tee featuring a peaceful forest silhouette design", price: 2999, compare_at_price: nil, - image_url: "/mockups/forest-silhouette-tshirt-1.jpg", - hover_image_url: "/mockups/forest-silhouette-tshirt-2.jpg", + image_url: "/mockups/forest-silhouette-tshirt-1", + hover_image_url: "/mockups/forest-silhouette-tshirt-2", + source_width: @mockup_source_width, + hover_source_width: @mockup_source_width, category: "Apparel", in_stock: true, on_sale: false @@ -245,8 +260,10 @@ defmodule SimpleshopTheme.Theme.PreviewData do description: "Cosy fleece hoodie with stunning forest light photography", price: 4499, compare_at_price: 4999, - image_url: "/mockups/forest-light-hoodie-1.jpg", - hover_image_url: "/mockups/forest-light-hoodie-2.jpg", + image_url: "/mockups/forest-light-hoodie-1", + hover_image_url: "/mockups/forest-light-hoodie-2", + source_width: @mockup_source_width, + hover_source_width: @mockup_source_width, category: "Apparel", in_stock: true, on_sale: true @@ -257,8 +274,10 @@ defmodule SimpleshopTheme.Theme.PreviewData do description: "Sturdy cotton tote bag with vibrant wildflower design", price: 1999, compare_at_price: nil, - image_url: "/mockups/wildflower-meadow-tote-1.jpg", - hover_image_url: "/mockups/wildflower-meadow-tote-2.jpg", + image_url: "/mockups/wildflower-meadow-tote-1", + hover_image_url: "/mockups/wildflower-meadow-tote-2", + source_width: @mockup_source_width, + hover_source_width: @mockup_source_width, category: "Apparel", in_stock: true, on_sale: false @@ -269,8 +288,10 @@ defmodule SimpleshopTheme.Theme.PreviewData do description: "Beautiful ocean sunset printed on durable canvas tote", price: 1999, compare_at_price: nil, - image_url: "/mockups/sunset-gradient-tote-1.jpg", - hover_image_url: "/mockups/sunset-gradient-tote-2.jpg", + image_url: "/mockups/sunset-gradient-tote-1", + hover_image_url: "/mockups/sunset-gradient-tote-2", + source_width: @mockup_source_width, + hover_source_width: @mockup_source_width, category: "Apparel", in_stock: true, on_sale: false @@ -282,8 +303,10 @@ defmodule SimpleshopTheme.Theme.PreviewData do description: "Start your morning right with this nature-inspired ceramic mug", price: 1499, compare_at_price: nil, - image_url: "/mockups/fern-leaf-mug-1.jpg", - hover_image_url: "/mockups/fern-leaf-mug-2.jpg", + image_url: "/mockups/fern-leaf-mug-1", + hover_image_url: "/mockups/fern-leaf-mug-2", + source_width: @mockup_source_width, + hover_source_width: @mockup_source_width, category: "Homewares", in_stock: true, on_sale: false @@ -294,8 +317,10 @@ defmodule SimpleshopTheme.Theme.PreviewData do description: "Soft polyester cushion featuring a stunning ocean sunset", price: 2999, compare_at_price: nil, - image_url: "/mockups/ocean-waves-cushion-1.jpg", - hover_image_url: "/mockups/ocean-waves-cushion-2.jpg", + image_url: "/mockups/ocean-waves-cushion-1", + hover_image_url: "/mockups/ocean-waves-cushion-2", + source_width: @mockup_source_width, + hover_source_width: @mockup_source_width, category: "Homewares", in_stock: true, on_sale: false @@ -306,8 +331,10 @@ defmodule SimpleshopTheme.Theme.PreviewData do description: "Cosy sherpa fleece blanket with mesmerising milky way print", price: 5999, compare_at_price: 6999, - image_url: "/mockups/night-sky-blanket-1.jpg", - hover_image_url: "/mockups/night-sky-blanket-2.jpg", + image_url: "/mockups/night-sky-blanket-1", + hover_image_url: "/mockups/night-sky-blanket-2", + source_width: @mockup_source_width, + hover_source_width: @mockup_source_width, category: "Homewares", in_stock: true, on_sale: true @@ -319,8 +346,10 @@ defmodule SimpleshopTheme.Theme.PreviewData do description: "Hardcover journal with beautiful autumn foliage design", price: 1999, compare_at_price: nil, - image_url: "/mockups/autumn-leaves-notebook-1.jpg", - hover_image_url: "/mockups/autumn-leaves-notebook-2.jpg", + image_url: "/mockups/autumn-leaves-notebook-1", + hover_image_url: "/mockups/autumn-leaves-notebook-2", + source_width: @mockup_source_width, + hover_source_width: @mockup_source_width, category: "Stationery", in_stock: true, on_sale: false @@ -331,8 +360,10 @@ defmodule SimpleshopTheme.Theme.PreviewData do description: "Tropical-inspired hardcover journal for your thoughts", price: 1999, compare_at_price: nil, - image_url: "/mockups/monstera-leaf-notebook-1.jpg", - hover_image_url: "/mockups/monstera-leaf-notebook-2.jpg", + image_url: "/mockups/monstera-leaf-notebook-1", + hover_image_url: "/mockups/monstera-leaf-notebook-2", + source_width: @mockup_source_width, + hover_source_width: @mockup_source_width, category: "Stationery", in_stock: true, on_sale: false @@ -344,8 +375,10 @@ defmodule SimpleshopTheme.Theme.PreviewData do description: "Tough phone case with stunning monstera leaf photography", price: 2499, compare_at_price: nil, - image_url: "/mockups/monstera-leaf-phone-case-1.jpg", - hover_image_url: "/mockups/monstera-leaf-phone-case-2.jpg", + image_url: "/mockups/monstera-leaf-phone-case-1", + hover_image_url: "/mockups/monstera-leaf-phone-case-2", + source_width: @mockup_source_width, + hover_source_width: @mockup_source_width, category: "Accessories", in_stock: true, on_sale: false @@ -356,8 +389,10 @@ defmodule SimpleshopTheme.Theme.PreviewData do description: "Protective laptop sleeve with abstract blue gradient design", price: 3499, compare_at_price: nil, - image_url: "/mockups/blue-waves-laptop-sleeve-1.jpg", - hover_image_url: "/mockups/blue-waves-laptop-sleeve-2.jpg", + image_url: "/mockups/blue-waves-laptop-sleeve-1", + hover_image_url: "/mockups/blue-waves-laptop-sleeve-2", + source_width: @mockup_source_width, + hover_source_width: @mockup_source_width, category: "Accessories", in_stock: true, on_sale: false @@ -441,35 +476,35 @@ defmodule SimpleshopTheme.Theme.PreviewData do name: "Art Prints", slug: "art-prints", product_count: 5, - image_url: "/mockups/mountain-sunrise-print-2.jpg" + image_url: "/mockups/mountain-sunrise-print-2-thumb.jpg" }, %{ id: "2", name: "Apparel", slug: "apparel", product_count: 4, - image_url: "/mockups/forest-silhouette-tshirt-1.jpg" + image_url: "/mockups/forest-silhouette-tshirt-1-thumb.jpg" }, %{ id: "3", name: "Homewares", slug: "homewares", product_count: 3, - image_url: "/mockups/fern-leaf-mug-1.jpg" + image_url: "/mockups/fern-leaf-mug-1-thumb.jpg" }, %{ id: "4", name: "Stationery", slug: "stationery", product_count: 2, - image_url: "/mockups/autumn-leaves-notebook-1.jpg" + image_url: "/mockups/autumn-leaves-notebook-1-thumb.jpg" }, %{ id: "5", name: "Accessories", slug: "accessories", product_count: 2, - image_url: "/mockups/monstera-leaf-phone-case-1.jpg" + image_url: "/mockups/monstera-leaf-phone-case-1-thumb.jpg" } ] end diff --git a/lib/simpleshop_theme_web/components/page_templates/home.html.heex b/lib/simpleshop_theme_web/components/page_templates/home.html.heex index d570e30..8c5ea0a 100644 --- a/lib/simpleshop_theme_web/components/page_templates/home.html.heex +++ b/lib/simpleshop_theme_web/components/page_templates/home.html.heex @@ -28,7 +28,7 @@ <.image_text_section title="Made with passion, printed with care" description="Every design starts with an idea. We work with quality print partners to bring those ideas to life on premium products – from gallery-quality art prints to everyday essentials." - image_url="/mockups/mountain-sunrise-print-3.jpg" + image_url="/mockups/mountain-sunrise-print-3-800.webp" link_text="Learn more about the studio →" link_page="about" mode={@mode} diff --git a/lib/simpleshop_theme_web/components/shop_components.ex b/lib/simpleshop_theme_web/components/shop_components.ex index 4b3c419..0a3e63e 100644 --- a/lib/simpleshop_theme_web/components/shop_components.ex +++ b/lib/simpleshop_theme_web/components/shop_components.ex @@ -32,7 +32,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do ~H"""

{@message}

@@ -143,7 +143,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do phx-click="change_preview_page" phx-value-page={@page} class="flex flex-col items-center justify-center gap-1 py-2 mx-1 rounded-lg min-h-[56px]" - style={"color: #{if @is_current, do: "hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l))", else: "var(--t-text-secondary)"}; text-decoration: none; font-weight: #{if @is_current, do: "600", else: "500"}; background-color: #{if @is_current, do: "hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l) / 0.1)", else: "transparent"};"} + style={"color: #{if @is_current, do: "hsl(var(--t-accent-h) var(--t-accent-s) calc(var(--t-accent-l) - 15%))", else: "var(--t-text-secondary)"}; text-decoration: none; font-weight: #{if @is_current, do: "600", else: "500"}; background-color: #{if @is_current, do: "hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l) / 0.1)", else: "transparent"};"} aria-current={if @is_current, do: "page", else: nil} > <.nav_icon icon={@icon} size={if @is_current, do: "w-6 h-6", else: "w-5 h-5"} /> @@ -153,7 +153,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do <.nav_icon icon={@icon} size={if @is_current, do: "w-6 h-6", else: "w-5 h-5"} /> @@ -691,7 +691,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do @@ -726,15 +726,6 @@ defmodule SimpleshopThemeWeb.ShopComponents do > - """ end @@ -857,23 +848,16 @@ defmodule SimpleshopThemeWeb.ShopComponents do <%= if @show_badges do %> <.product_badge product={@product} /> <% end %> - {@product.name} <%= if @theme_settings.hover_image && @product[:hover_image_url] do %> - {@product.name} <% end %> @@ -899,6 +883,66 @@ defmodule SimpleshopThemeWeb.ShopComponents do """ end + # Helper to render product images with responsive variants. + # Works for both mockups (static files) and database images. + # Requires source_width to be set for responsive image support. + attr :product, :map, required: true + attr :variant, :atom, required: true + attr :class, :string, default: "" + attr :image_key, :atom, default: :primary + + defp product_card_image(assigns) do + # Determine which image fields to use based on primary vs hover + {image_id_field, image_url_field, source_width_field} = + case assigns.image_key do + :hover -> {:hover_image_id, :hover_image_url, :hover_source_width} + _ -> {:image_id, :image_url, :source_width} + end + + # Build the base image path: + # - Database images: /images/{id}/variant + # - Mockup images: {image_url} (e.g., /mockups/product-1) + image_id = assigns.product[image_id_field] + image_url = assigns.product[image_url_field] + + src = + if image_id do + "/images/#{image_id}/variant" + else + image_url + end + + assigns = + assigns + |> assign(:src, src) + |> assign(:source_width, assigns.product[source_width_field]) + + ~H""" + <%= if @source_width do %> + <.responsive_image + src={@src} + alt={@product.name} + source_width={@source_width} + sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 400px" + class={@class} + width={600} + height={600} + priority={@variant == :minimal} + /> + <% else %> + {@product.name} + <% end %> + """ + end + attr :product, :map, required: true defp product_badge(assigns) do @@ -1290,6 +1334,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do def category_nav(assigns) do ~H"""
+

Shop by Category