From d13f25ef4711c5ac3622b3043eb246997d405006 Mon Sep 17 00:00:00 2001
From: Divya Bhatt <divya.bhatt@guardian.co.uk>
Date: Wed, 16 Oct 2024 14:47:34 +0100
Subject: [PATCH 1/3] Add link for missing background image

---
 fronts-client/src/components/form/ChefMetaForm.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/fronts-client/src/components/form/ChefMetaForm.tsx b/fronts-client/src/components/form/ChefMetaForm.tsx
index 6138af4fc5..48707ceeb0 100644
--- a/fronts-client/src/components/form/ChefMetaForm.tsx
+++ b/fronts-client/src/components/form/ChefMetaForm.tsx
@@ -119,6 +119,7 @@ const Form = ({
 									name="chefImageOverride"
 									component={InputImage}
 									criteria={squareImageCriteria}
+									defaultImageUrl={chef?.bylineImageUrl}
 								/>
 							</ImageCol>
 						</Row>

From b392e8a54f8f198d645ceb3888aec08dc3ab6a50 Mon Sep 17 00:00:00 2001
From: Divya Bhatt <divya.bhatt@guardian.co.uk>
Date: Wed, 16 Oct 2024 14:49:13 +0100
Subject: [PATCH 2/3] Use regex to check image from grid (to enable recrop
 functionality if it is else not)

---
 fronts-client/src/components/inputs/InputImage.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/fronts-client/src/components/inputs/InputImage.tsx b/fronts-client/src/components/inputs/InputImage.tsx
index 0f80029bfb..f659569250 100644
--- a/fronts-client/src/components/inputs/InputImage.tsx
+++ b/fronts-client/src/components/inputs/InputImage.tsx
@@ -257,6 +257,8 @@ interface ComponentState {
 const dragImage = new Image();
 dragImage.src = imageDragIcon;
 
+const regexToCheckGridImage: RegExp = /^https?:\/\/(www\.)?media\.(?:dev-|)guim\.co\.uk\/([0-9a-fA-F]+)\//;
+
 class InputImage extends React.Component<ComponentProps, ComponentState> {
 	private inputRef = React.createRef<HTMLInputElement>();
 
@@ -306,6 +308,8 @@ class InputImage extends React.Component<ComponentProps, ComponentState> {
 			);
 		}
 
+		const isImgFromGrid = defaultImageUrl ? regexToCheckGridImage.test(defaultImageUrl) : false;
+
 		const hasImage = !useDefault && !!input.value && !!input.value.thumb;
 		const imageUrl =
 			!useDefault && input.value && input.value.thumb
@@ -411,7 +415,7 @@ class InputImage extends React.Component<ComponentProps, ComponentState> {
 										<AddImageIcon size="l" />
 										{!!small ? null : <Label size="sm">{message}</Label>}
 									</AddImageButton>
-									<AddImageButton
+									{isImgFromGrid && (<AddImageButton
 										type="button"
 										onClick={this.openModal(true)}
 										small={small}
@@ -419,7 +423,7 @@ class InputImage extends React.Component<ComponentProps, ComponentState> {
 									>
 										<CropIcon size="l" fill={theme.colors.white} />
 										{!!small ? null : <Label size="sm">Recrop image</Label>}
-									</AddImageButton>
+									</AddImageButton>)}
 								</AddImageViaGridModalButton>
 							)}
 							{hasVideo && useDefault && (

From 07c6c30bc913329af6b8f5ab804f3c1af1e61623 Mon Sep 17 00:00:00 2001
From: Divya Bhatt <divya.bhatt@guardian.co.uk>
Date: Wed, 16 Oct 2024 17:08:21 +0100
Subject: [PATCH 3/3] IDE Prettier fix

Co-authored-by: Emily Bourke <emily.bourke@guardian.co.uk>
---
 .../src/components/inputs/InputImage.tsx      | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/fronts-client/src/components/inputs/InputImage.tsx b/fronts-client/src/components/inputs/InputImage.tsx
index f659569250..2053ffdcc1 100644
--- a/fronts-client/src/components/inputs/InputImage.tsx
+++ b/fronts-client/src/components/inputs/InputImage.tsx
@@ -257,7 +257,8 @@ interface ComponentState {
 const dragImage = new Image();
 dragImage.src = imageDragIcon;
 
-const regexToCheckGridImage: RegExp = /^https?:\/\/(www\.)?media\.(?:dev-|)guim\.co\.uk\/([0-9a-fA-F]+)\//;
+const regexToCheckGridImage: RegExp =
+	/^https?:\/\/(www\.)?media\.(?:dev-|)guim\.co\.uk\/([0-9a-fA-F]+)\//;
 
 class InputImage extends React.Component<ComponentProps, ComponentState> {
 	private inputRef = React.createRef<HTMLInputElement>();
@@ -308,7 +309,9 @@ class InputImage extends React.Component<ComponentProps, ComponentState> {
 			);
 		}
 
-		const isImgFromGrid = defaultImageUrl ? regexToCheckGridImage.test(defaultImageUrl) : false;
+		const isImgFromGrid = defaultImageUrl
+			? regexToCheckGridImage.test(defaultImageUrl)
+			: false;
 
 		const hasImage = !useDefault && !!input.value && !!input.value.thumb;
 		const imageUrl =
@@ -415,15 +418,17 @@ class InputImage extends React.Component<ComponentProps, ComponentState> {
 										<AddImageIcon size="l" />
 										{!!small ? null : <Label size="sm">{message}</Label>}
 									</AddImageButton>
-									{isImgFromGrid && (<AddImageButton
-										type="button"
-										onClick={this.openModal(true)}
-										small={small}
-										disabled={disabled}
-									>
-										<CropIcon size="l" fill={theme.colors.white} />
-										{!!small ? null : <Label size="sm">Recrop image</Label>}
-									</AddImageButton>)}
+									{isImgFromGrid && (
+										<AddImageButton
+											type="button"
+											onClick={this.openModal(true)}
+											small={small}
+											disabled={disabled}
+										>
+											<CropIcon size="l" fill={theme.colors.white} />
+											{!!small ? null : <Label size="sm">Recrop image</Label>}
+										</AddImageButton>
+									)}
 								</AddImageViaGridModalButton>
 							)}
 							{hasVideo && useDefault && (