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

add img crop ratio optioon

parent 2aea0abe
...@@ -489,6 +489,30 @@ ...@@ -489,6 +489,30 @@
"max_size": "", "max_size": "",
"mime_types": "" "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", "key": "field_6046441e4a150",
"label": "Title", "label": "Title",
...@@ -498,7 +522,7 @@ ...@@ -498,7 +522,7 @@
"required": 0, "required": 0,
"conditional_logic": 0, "conditional_logic": 0,
"wrapper": { "wrapper": {
"width": "50", "width": "",
"class": "", "class": "",
"id": "" "id": ""
}, },
...@@ -571,5 +595,5 @@ ...@@ -571,5 +595,5 @@
"hide_on_screen": "", "hide_on_screen": "",
"active": true, "active": true,
"description": "", "description": "",
"modified": 1615401697 "modified": 1615403207
} }
\ No newline at end of file
...@@ -13,8 +13,22 @@ ...@@ -13,8 +13,22 @@
display: block; display: block;
margin-bottom: auto; margin-bottom: auto;
img { .img {
width: 100%; width: 100%;
img {
width: 100%;
}
&--cover {
height: 0;
padding-bottom: 100%;
position: relative;
img {
position: absolute;
}
}
} }
&__content { &__content {
...@@ -36,12 +50,20 @@ ...@@ -36,12 +50,20 @@
display: block; display: block;
.item { .item {
img { .img {
@media only screen and (min-width: $medium) { @media only screen and (min-width: $medium) {
width: 250px; width: 250px;
&--cover {
height: 250px;
}
} }
@media only screen and (min-width: $large) { @media only screen and (min-width: $large) {
width: 320px; width: 320px;
&--cover {
height: 320px;
}
} }
} }
} }
...@@ -51,9 +73,20 @@ ...@@ -51,9 +73,20 @@
.item { .item {
margin-bottom: 100px; margin-bottom: 100px;
img { .img {
margin-bottom: 20px; margin-bottom: 20px;
width: 160px; width: 160px;
&--cover {
height: 160px;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
} }
h3 { h3 {
......
...@@ -11,8 +11,9 @@ $layout = get_sub_field('layout'); ...@@ -11,8 +11,9 @@ $layout = get_sub_field('layout');
<div class="item"> <div class="item">
<?php <?php
$image = get_sub_field('img'); $image = get_sub_field('img');
$crop = get_sub_field('img_crop');
if( $image ) { 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"> <div class="item__content">
<h3><?php the_sub_field('title'); ?></h3> <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