Merge pull request #62 from infinum/fix/image-breakpoint-render

Fix image responsive breakpoints render
infinum · Nov 8, 2024 · 3f26202 · 3f26202
2 parents f5487f2 + 5bd2f97
commit 3f26202
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,12 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 
 ---
 
+## [1.4.5]
+
+### Fixed
+
+- Image responsive breakpoints render order in the frontend.
+
 ## [1.4.4]
 
 ### Added
@@ -142,6 +148,7 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 - Initial release.
 
 [Unreleased]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/master...HEAD
+[1.4.5]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.4...1.4.5
 [1.4.4]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.3...1.4.4
 [1.4.3]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.2...1.4.3
 [1.4.2]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.1...1.4.2

diff --git 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>
+
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/frontend-libs-tailwind",
-	"version": "1.4.4",
+	"version": "1.4.5",
 	"description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
 	"author": {
 		"name": "Eightshift team",