Commit 4a37601a authored by Benthe Kuijpers's avatar Benthe Kuijpers
Browse files

add img crop ratio optioon

parent 2aea0abe
......@@ -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
......@@ -13,10 +13,24 @@
display: block;
margin-bottom: auto;
.img {
width: 100%;
img {
width: 100%;
}
&--cover {
height: 0;
padding-bottom: 100%;
position: relative;
img {
position: absolute;
}
}
}
&__content {
margin: 0;
}
......@@ -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 {
......
......@@ -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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment