Responsive Images for the "Single Image" field type

Hi Laurent,

When outputting value for show image, you can use the second argument array( 'size' => 'medium' ) in the helper function.

Get more details on the documentation https://docs.metabox.io/fields/single-image/#template-usage

Hi,

If you want to load the thumbnail based on the screen width, for example, on mobile load thumbnail, on tablet load medium, on desktop load large. You can use the attribute srcset of the <img> tag. Get more details here https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Hi,

Here is the sample code to use the Art Direction, single_image field type, change the image size loaded based on the screen width.

<?php 
    $thumbnail = rwmb_meta( 'single_image', array( 'size' => 'thumbnail' ) );
    $large = rwmb_meta( 'single_image', array( 'size' => 'large' ) );
 ?>
<picture>
  <source media="(max-width: 799px)" srcset="<?php echo $thumbnail['url'] ?>">
  <source media="(min-width: 800px)" srcset="<?php echo $large['url'] ?>">
  <img src="<?php echo $large['url'] ?>" alt="Chris standing up holding his daughter Elva">
</picture>

You need to add the code to the corresponding template file in your theme folder.

Hi,

Both Advanced Scripts and Code Snippets are ok. If you use the snippet plugin to implement the code, you need to create a shortcode then add the shortcode to the builder when creating the post. Refer to this document https://docs.metabox.io/extensions/meta-box-group/#outputing-group-with-page-builders