Code Monkey home page Code Monkey logo

Comments (1)

fine-G avatar fine-G commented on June 5, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.