Adaptive Image

Hi Thierry,

I wanted to know how to implement an Adaptive Image from your framework?

Thanks

Hi Rico,

Beans post feature images are automatically responsive and uses Beans Image API for that. For your other custom HTML images, Beans Image API let you create many image sizes on the fly (straight from your template files) which are not mixed up with other images in the WP upload folder and can easily be flushed in Appearance->Settings. Here is an example of a responsive image:

add_action( 'beans_post_body_prepend_markup', 'example_reponsive_image' );

function example_reponsive_image() {

  $src = 'http://images.apple.com/euro/ipad-mini-4/a/screens_alt/images/overview/hero_large.png';
 $small = beans_edit_image( $src, array(
   'resize' => array( 465, false ),
        'set_quality' => array( 100 )
 ), 'OBJECT' );
  $medium = beans_edit_image( $src, array(
    'resize' => array( 650, false ),
        'set_quality' => array( 100 )
 ), 'OBJECT' );

  ?>
  <picture>
   <source media="(max-width: <?php echo (int) $small->width; ?>px)" srcset="<?php echo esc_url( $small->src ); ?>">
   <source media="(max-width: <?php echo (int) $medium->width; ?>px)" srcset="<?php echo esc_url( $medium->src ); ?>">
   <img src="<?php echo esc_url( $src ); ?>" alt="iPad Mini">
  </picture>
  <?php

}

Note how we have set to media images 650 and 465 which will serve the image size according to the device the website is view on. In the example above, I use an Apple Image as the $src but it could totally be an image from your WP Media Library.

So the bottom line is that you have access to create any image size on the fly and set your responsive image HTML easily. This also makes it easy to build Retina friendly images and so on. If you are not familiar with the Responsive Image HTML, I would suggest to read this article.

Happy coding,

Hi Thierry,

Thanks for responding my questions, you're Awesome. It worked as i wanted.

Hi Rico, I have just updated my snippet and added the set_quality argument which I thought could be useful.

Beans Image API uses the WP Core Image API which doesn't set the quality to 100% by default to decrease image sizes and improve performance. So if you want to keep the exact quality as the original image, you have to set set_quality to 100 as per the example above.

Thanks,

Hey Thierry,

how can i use this function with dynamic $src in a page-template?

Thanks