Comments (1)
you always can get the different sizes, the only limitation is that the crop images must published to the library and not only to the post.
this is my code I actually use:
`
// http://aaronrutley.com/responsive-images-in-wordpress-with-acf/
// and additional infos from here: https://rudrastyh.com/wordpress/responsive-images.html
// Responsive Image Helper Function
// @param string $image_id the id of the image (from ACF or similar)
// @param string $image_size the size of the default src size
// @param string $image_max_size the max withe of the images used in this function and custom_max_srcset_image_width funtion !!!
// @param string $image_sizes_attribute the definition with of the sizes attribute (simple 100vw or with media queries
function custom_responsive_image($image_id,$image_size,$image_max_size,$image_sizes_attribute){
// check the image ID is not blank
if($image_id != '') {
// set the default src image size
$image_src = wp_get_attachment_image_url( $image_id, $image_size );
// set the srcset with various image sizes
$image_srcset = wp_get_attachment_image_srcset( $image_id, $image_max_size );
// generate the markup for the responsive image
if ($image_srcset) {
return 'src="'.$image_src.'" srcset="'.$image_srcset.'" sizes="'.$image_sizes_attribute.'"';
} else {
return 'src="'.$image_src . '" ';
}
}
}
add_filter( 'max_srcset_image_width', 'custom_max_srcset_image_width', 10 , 2 );
function custom_max_srcset_image_width() {
return '2560'; // set the max images size as max fot the responive image generating
// return $image_max_size; // set the max images size as max fot the responive image generating
}
`
`
$image_alt = $image_object['alt'];
// Responsive Image Helper Function
// @param string $image_id the id of the image (from ACF or similar)
// @param string $image_size the size of the default src size
// @param string $image_max_size the max withe of the images used in this function and custom_max_srcset_image_width funtion !!!
// @param string $image_sizes_attribute the definition with of the sizes attribute (simple 100vw or with media queries
$image_id = $image_object['id'];
if ($grid == 'rectangle') {
$image_size = 'responsive_480';
$image_max_size = 'responsive_1680';
$image_sizes_attribute = '(max-width: 48em)100vw, (min-width: 48em)50vw, 50vw';
} elseif ($grid == 'square') {
$image_size = 'responsive_480';
$image_max_size = 'responsive_1024';
$image_sizes_attribute = '(max-width: 48em)100vw, (min-width: 48em)33vw,(min-width: 64em)33vw, 33vw';
}
if (function_exists('custom_responsive_image') && $image_id && $image_size && $image_max_size && $image_sizes_attribute) {
$image_src = custom_responsive_image( $image_id,$image_size,$image_max_size,$image_sizes_attribute ); // responisve image http://aaronrutley.com/responsive-images-in-wordpress-with-acf/
}
`
from acf-image-crop.
Related Issues (20)
- Broken with ACF version 5.6.0 HOT 14
- Broken in latest update - 1.4.12 HOT 1
- Broken with ACF 5.6.1 Update HOT 4
- Update action broke the whole site HOT 2
- Image Object Selectable with Save cropped image in media library set to No
- Compatibility with translate.wordpress.org HOT 1
- Needs polishing in WP 4.8.1 + check compatibility with ACF Pro gallery field
- Add min/max size
- WP_Error::set_quality() HOT 5
- Edit cropped image shows modal with empty & missing fields HOT 4
- Large pic field images have been scaled down automatically to 678x300px
- Error in crop area position. HOT 2
- ACF Pro 5.7-RC1 - Cannot choose image HOT 2
- Still Maintained? HOT 2
- Plugin conflict
- fix for missing metadata in cropped image
- Alternative > Advanced Custom Fields: Image Aspect Ratio Crop Field
- Not work whit graphql plugin
- Vulnerable to Broken Access Control
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from acf-image-crop.