working on image

Author: oliverabrahams

dotcom-rendering/src/components/InlineProductCard.tsx

@@ -29,6 +29,10 @@ const card = css`
 	strong {
 		font-weight: 700;
 	}
+	img {
+		height: 165px;
+		width: 165px;
+	}
 	border-top: 1px solid ${palette('--section-border-lifestyle')};
 	${from.wide} {
 		display: none;
@@ -131,8 +135,8 @@ export const InlineProductCard = ({
 				format={format}
 				master={image}
 				alt={productName + brandName}
-				height={1}
-				width={1}
+				height={165}
+				width={165}
 				loading={'eager'}
 			/>
 		)}

dotcom-rendering/src/components/LeftColProductCard.tsx

@@ -6,7 +6,9 @@ import {
 	textSans14,
 	textSans17,
 } from '@guardian/source/foundations';
+import type { ArticleFormat } from '../lib/articleFormat';
 import { palette } from '../palette';
+import { Picture } from './Picture';
 import { ProductLinkButton } from './ProductLinkButton';
 
 export type Statistics = {
@@ -22,6 +24,7 @@ export type LeftColProductCardProps = {
 	price: string;
 	retailer: string;
 	statistics: Statistics[];
+	format: ArticleFormat;
 };
 
 const card = css`
@@ -35,6 +38,10 @@ const card = css`
 		width: 220px;
 		border-top: 1px solid ${palette('--section-border-lifestyle')};
 	}
+	img {
+		height: 200px;
+		width: 200px;
+	}
 	strong {
 		font-weight: 700;
 	}
@@ -92,30 +99,19 @@ export const LeftColProductCard = ({
 	price,
 	retailer,
 	statistics,
+	format,
 }: LeftColProductCardProps) => (
 	<div css={card}>
 		{!!image && (
-			<a
-				href={url}
-				target="_blank"
-				rel="noopener noreferrer"
-				style={{
-					display: 'block',
-					marginBottom: '12px',
-					borderRadius: '6px',
-				}}
-			>
-				<img
-					src={image}
-					alt={productName}
-					css={{
-						width: '200px',
-						height: '200px',
-						borderRadius: '6px',
-						display: 'block',
-					}}
-				/>
-			</a>
+			<Picture
+				role={'productCard'}
+				format={format}
+				master={image}
+				alt={productName + brandName}
+				height={220}
+				width={220}
+				loading={'eager'}
+			/>
 		)}
 		<div css={productInfoContainer}>
 			<div css={primaryHeading}>{brandName}</div>

dotcom-rendering/src/components/Picture.tsx

@@ -271,8 +271,8 @@ const decideImageWidths = ({
 				];
 			case 'productCard':
 				return [
-					{ breakpoint: breakpoints.mobile, width: 165 },
 					{ breakpoint: breakpoints.wide, width: 220 },
+					{ breakpoint: breakpoints.mobile, width: 165 },
 				];
 			case 'inline':
 			default:

dotcom-rendering/src/components/ProductElement.tsx

@@ -81,6 +81,7 @@ export const ProductElement = ({
 					price={product.primaryPrice}
 					retailer={product.primaryRetailer}
 					statistics={product.statistics}
+					format={format}
 				/>
 			</LeftColProductCardContainer>
 			{product.content.map((element, index) => (