perf: use responsive images for theme preview mockups
Update theme preview to use optimized responsive images with modern format support (AVIF/WebP with JPEG fallback). - Change mockup URLs from .jpg to base paths for srcset generation - Add source_width to preview products for proper variant selection - Add responsive_image component with <picture> element - Update image_text_section to use optimized 800px WebP variant This ensures the theme preview loads optimal image formats and sizes, matching the production responsive image behavior. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user