From 82afb917abb8a0aab25944dfe04e0a00526e8811 Mon Sep 17 00:00:00 2001
From: Ivan Ramljak <ivanoramljak@gmail.com>
Date: Thu, 7 Nov 2024 16:06:10 +0100
Subject: [PATCH] Fix image responsive breakpoints render

Co-authored-by: goran.alkovic@infinum.com
---
 blocks/init/src/Blocks/components/image/image.php | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/blocks/init/src/Blocks/components/image/image.php b/blocks/init/src/Blocks/components/image/image.php
index 215e047..28ebca5 100644
--- a/blocks/init/src/Blocks/components/image/image.php
+++ b/blocks/init/src/Blocks/components/image/image.php
@@ -22,10 +22,10 @@
 
 $imageAlt = get_post_meta($imageData['_default']['id'], '_wp_attachment_image_alt', true) ?? '';
 
-$isMobileFirst = $imageData['_desktopFirst'] ?? false;
+$isDesktopFirst = $imageData['_desktopFirst'] ?? false;
 
 $breakpointData = Helpers::getSettingsGlobalVariablesBreakpoints();
-$breakpoints = Helpers::getTwBreakpoints($isMobileFirst);
+$breakpoints = Helpers::getTwBreakpoints();
 ?>
 
 <picture
@@ -45,12 +45,12 @@ class="<?php echo esc_attr($additionalClass['picture']); ?>"
 			continue;
 		}
 
-		$breakpointWidth = $breakpointData[str_replace('max-', '', $breakpoint)];
+		$breakpointWidth = $breakpointData[$breakpoint];
 
-		$widthMode = $isMobileFirst ? 'min-width' : 'max-width';
+		$widthMode = $isDesktopFirst ? 'max-width' : 'min-width';
 
 		// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
-		echo '<source srcset="' . esc_url($value) . '" media="(' . $widthMode . ': ' . $breakpointWidth . 'rem)" />';
+		echo '<source srcset="' . esc_url($value) . '" media="(' . $widthMode . ': ' . $breakpointWidth . 'em)" />';
 		?>
 	<?php } ?>
 
@@ -60,3 +60,4 @@ class="<?php echo esc_attr($additionalClass['picture']); ?>"
 		class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass['image'] ?? $additionalClass)); ?>"
 	/>
 </picture>
+