refactor pattern library images

Author: stefanobartoletti

CHANGELOG.md

@@ -5,8 +5,12 @@ The format is based on [Keep a Changelog][Keep a Changelog] and this project adh
 
 ## [Unreleased]
 
+### Added
+- Added support to configure compression value for images
+
 ### Changed
 - Added responsive image examples to the pattern library
+- Moved image sizes functions out from the default setup to their own action
 - Updated Dependencies
 
 ### Fixed

pattern-library.php

@@ -196,33 +196,33 @@
 
 	<div id="images" class="container mb-5">
 
+		<h2 class="border-bottom mb-5">Images</h2>
+
 		<?php
 
-		$cols = '
-		<div class="col position-relative">
-			<img class="img-fluid" src="https://dummyimage.com/1920x1080.jpg">
-			<div class="img-details position-absolute top-0 mt-1 ms-1 px-2 py-1 bg-light">
-				<p class="natural-width mb-0"></p>
-				<p class="client-width mb-0"></p>
-				<p class="percent-width mb-0"></p>
-				<p class="screen-width mb-0"></p>
+		$row_cols = array(
+			'',
+			'row-cols-md-2',
+			'row-cols-md-3',
+			'row-cols-md-2 row-cols-lg-4',
+			'row-cols-md-3 row-cols-lg-6',
+		);
+
+		foreach ( $row_cols as $row_col ) { ?>
+
+		<div class="row <?php echo esc_attr( $row_col ); ?> mb-5">
+			<div class="col position-relative">
+				<img class="img-fluid" src="https://dummyimage.com/1920x1080.jpg">
+				<div class="img-details position-absolute top-0 mt-1 ms-1 px-2 py-1 bg-light">
+					<p class="natural-width mb-0"></p>
+					<p class="client-width mb-0"></p>
+					<p class="percent-width mb-0"></p>
+					<p class="screen-width mb-0"></p>
+				</div>
 			</div>
 		</div>
-		'
-
-		?>
-
-		<h2 class="border-bottom mb-5">Images</h2>
-
-		<div class="row mb-5"><?php echo esc_html( $cols ); ?></div>
-	
-		<div class="row row-cols-md-2 mb-5"><?php echo esc_html( $cols ); ?></div>	
-
-		<div class="row row-cols-md-3 mb-5"><?php echo esc_html( $cols ); ?></div>
-	
-		<div class="row row-cols-md-2 row-cols-lg-4 mb-5"><?php echo esc_html( $cols ); ?></div>	
 
-		<div class="row row-cols-md-3 row-cols-lg-6 mb-5"><?php echo esc_html( $cols ); ?></div>
+		<?php } ?>
 
 		<script>
 			const imagesRows = document.querySelectorAll('#images .row');