add img crop ratio optioon

wordpress/wp-content/themes/makeitopen/acf-json/group_603c986dd28a4.json

@@ -489,6 +489,30 @@
                                     "max_size": "",
                                     "mime_types": ""
                                 },
+                                {
+                                    "key": "field_6049152657b08",
+                                    "label": "Image crop",
+                                    "name": "img_crop",
+                                    "type": "radio",
+                                    "instructions": "",
+                                    "required": 0,
+                                    "conditional_logic": 0,
+                                    "wrapper": {
+                                        "width": "50",
+                                        "class": "",
+                                        "id": ""
+                                    },
+                                    "choices": {
+                                        "cover": "Fit in a square frame",
+                                        "contain": "Keep original ratio"
+                                    },
+                                    "allow_null": 0,
+                                    "other_choice": 0,
+                                    "default_value": "",
+                                    "layout": "vertical",
+                                    "return_format": "value",
+                                    "save_other_choice": 0
+                                },
                                 {
                                     "key": "field_6046441e4a150",
                                     "label": "Title",
@@ -498,7 +522,7 @@
                                     "required": 0,
                                     "conditional_logic": 0,
                                     "wrapper": {
-                                        "width": "50",
+                                        "width": "",
                                         "class": "",
                                         "id": ""
                                     },
@@ -571,5 +595,5 @@
     "hide_on_screen": "",
     "active": true,
     "description": "",
-    "modified": 1615401697
+    "modified": 1615403207
 }
\ No newline at end of file

wordpress/wp-content/themes/makeitopen/assets/scss/partials/_items.scss

@@ -13,8 +13,22 @@
 					display: block;
 					margin-bottom: auto;
 
-					img {
+					.img {
 						width: 100%;
+
+						img {
+							width: 100%;
+						}
+
+						&--cover {
+							height: 0;
+							padding-bottom: 100%;
+							position: relative;
+
+							img {
+								position: absolute;
+							}
+						}
 					}
 
 					&__content {
@@ -36,12 +50,20 @@
 			display: block;
 
 			.item {
-				img {
+				.img {
 					@media only screen and (min-width: $medium) {
 						width: 250px;
+
+						&--cover {
+							height: 250px;
+						}
 					}
 					@media only screen and (min-width: $large) {
 						width: 320px;
+
+						&--cover {
+							height: 320px;
+						}
 					}
 				}
 			}
@@ -51,9 +73,20 @@
 	.item {
 		margin-bottom: 100px;
 
-		img {
+		.img {
 			margin-bottom: 20px;
 			width: 160px;
+
+			&--cover {
+				height: 160px;
+				overflow: hidden;
+
+				img {
+					width: 100%;
+					height: 100%;
+					object-fit: cover;
+				}
+			}
 		}
 
 		h3 {

wordpress/wp-content/themes/makeitopen/template-parts/page-builder-rows/items.php

@@ -11,8 +11,9 @@ $layout = get_sub_field('layout');
 					<div class="item">
 						<?php
 						$image = get_sub_field('img');
+						$crop = get_sub_field('img_crop');
 						if( $image ) {
-							echo wp_get_attachment_image( $image, 'medium-square' );
+							echo '<div class="img img--' . $crop . '">' . wp_get_attachment_image( $image, 'medium' ) . '</div>';
 						} ?>
 						<div class="item__content">
 							<h3><?php the_sub_field('title'); ?></h3>