+```
+
+#### Fixed-size Images
+
+When using images that are meant to be a fixed size, like showing a preview image of a product in the cart, instead of using `aspectRatio`, you'll instead declare `width` and `height` manually with fixed values. For example:
+
+```jsx
+
+```
+
+If you don't want to have a fixed aspect ratio, and instead respect whatever is returned from your query, the following syntax can also be used:
+
+```jsx
+
{merchandise.image && (
diff --git a/templates/demo-store/app/components/Hero.tsx b/templates/demo-store/app/components/Hero.tsx
index 04fd5550cc..b120890819 100644
--- a/templates/demo-store/app/components/Hero.tsx
+++ b/templates/demo-store/app/components/Hero.tsx
@@ -38,18 +38,11 @@ export function Hero({
{spread?.reference && (
- ![]()
{image && (
{media.map((med, i) => {
- let mediaProps: Record = {};
const isFirst = i === 0;
const isFourth = i === 3;
const isFullWidth = i % 3 === 0;
@@ -35,41 +34,6 @@ export function ProductGallery({
},
} as MediaImage;
- switch (med.mediaContentType) {
- case 'IMAGE':
- mediaProps = {
- width: 800,
- widths: [400, 800, 1200, 1600, 2000, 2400],
- };
- break;
- case 'VIDEO':
- mediaProps = {
- width: '100%',
- autoPlay: true,
- controls: false,
- muted: true,
- loop: true,
- preload: 'auto',
- };
- break;
- case 'EXTERNAL_VIDEO':
- mediaProps = {width: '100%'};
- break;
- case 'MODEL_3D':
- mediaProps = {
- width: '100%',
- interactionPromptThreshold: '0',
- ar: true,
- loading: ATTR_LOADING_EAGER,
- disableZoom: true,
- };
- break;
- }
-
- if (i === 0 && med.mediaContentType === 'IMAGE') {
- mediaProps.loading = ATTR_LOADING_EAGER;
- }
-
const style = [
isFullWidth ? 'md:col-span-2' : 'md:col-span-1',
isFirst || isFourth ? '' : 'md:aspect-[4/5]',
@@ -82,30 +46,20 @@ export function ProductGallery({
// @ts-ignore
key={med.id || med.image.id}
>
- {/* TODO: Replace with MediaFile when it's available */}
+ {/* TODO: Replace with MediaFile */}
{(med as MediaImage).image && (
- 
)}
- {/*
);
})}
diff --git a/templates/demo-store/app/routes/($lang)/account/__private/orders.$id.tsx b/templates/demo-store/app/routes/($lang)/account/__private/orders.$id.tsx
index 115cc23ed6..df8bfa08c0 100644
--- a/templates/demo-store/app/routes/($lang)/account/__private/orders.$id.tsx
+++ b/templates/demo-store/app/routes/($lang)/account/__private/orders.$id.tsx
@@ -134,16 +134,9 @@ export default function OrderRoute() {
{lineItem?.variant?.image && (
{collection?.image && (
- 
)}
diff --git a/templates/demo-store/app/routes/($lang)/journal/$journalHandle.tsx b/templates/demo-store/app/routes/($lang)/journal/$journalHandle.tsx
index cba408f2e6..af4ecf006f 100644
--- a/templates/demo-store/app/routes/($lang)/journal/$journalHandle.tsx
+++ b/templates/demo-store/app/routes/($lang)/journal/$journalHandle.tsx
@@ -4,7 +4,6 @@ import {Image} from '@shopify/hydrogen';
import {Blog} from '@shopify/hydrogen/storefront-api-types';
import invariant from 'tiny-invariant';
import {PageHeader, Section} from '~/components';
-import {ATTR_LOADING_EAGER} from '~/lib/const';
import {seoPayload} from '~/lib/seo.server';
import styles from '../../../styles/custom-font.css';
import {routeHeaders, CACHE_LONG} from '~/data/cache';
@@ -74,13 +73,7 @@ export default function Article() {
data={image}
className="w-full mx-auto mt-8 md:mt-16 max-w-7xl"
sizes="90vw"
- widths={[400, 800, 1200]}
- width="100px"
- loading={ATTR_LOADING_EAGER}
- loaderOptions={{
- scale: 2,
- crop: 'center',
- }}
+ loading="eager"
/>
)}
)}
diff --git a/templates/demo-store/app/routes/($lang)/products/$productHandle.tsx b/templates/demo-store/app/routes/($lang)/products/$productHandle.tsx
index 33009dc6af..30b93df99a 100644
--- a/templates/demo-store/app/routes/($lang)/products/$productHandle.tsx
+++ b/templates/demo-store/app/routes/($lang)/products/$productHandle.tsx
@@ -122,7 +122,7 @@ export default function Product() {
return (
<>
-
)}
diff --git a/templates/demo-store/app/routes/($lang)/journal/$journalHandle.tsx b/templates/demo-store/app/routes/($lang)/journal/$journalHandle.tsx
index cba408f2e6..af4ecf006f 100644
--- a/templates/demo-store/app/routes/($lang)/journal/$journalHandle.tsx
+++ b/templates/demo-store/app/routes/($lang)/journal/$journalHandle.tsx
@@ -4,7 +4,6 @@ import {Image} from '@shopify/hydrogen';
import {Blog} from '@shopify/hydrogen/storefront-api-types';
import invariant from 'tiny-invariant';
import {PageHeader, Section} from '~/components';
-import {ATTR_LOADING_EAGER} from '~/lib/const';
import {seoPayload} from '~/lib/seo.server';
import styles from '../../../styles/custom-font.css';
import {routeHeaders, CACHE_LONG} from '~/data/cache';
@@ -74,13 +73,7 @@ export default function Article() {
data={image}
className="w-full mx-auto mt-8 md:mt-16 max-w-7xl"
sizes="90vw"
- widths={[400, 800, 1200]}
- width="100px"
- loading={ATTR_LOADING_EAGER}
- loaderOptions={{
- scale: 2,
- crop: 'center',
- }}
+ loading="eager"
/>
)}