Not an issue: wordpress responsive image sizes

[bhuisman1992]

Hi there,

Can you still generated different responsive image sizes if you use this crop addon?

Greetz,

[fine-G]

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/
				}

`