Image

Image control allows you to add a single image to your blocks using the WordPress Media Library or custom URL.

Control Settings

• Allow insert from URL (insert_from_url) - off by default. Turning it on adds an Insert from URL button to the media placeholder
• Preview Size (preview_size) - registered image size used for the thumbnail inside the editor, medium by default

The list holds the image sizes the editor offers, each labelled with its dimensions, as in Medium (300 × 300). Preview Size changes the editor thumbnail only, and the saved url is the full file whatever the preview shows.

Saved Data

The control saves the following image information:

Every key except id is read back from the media library on each render, so an image renamed or re-captioned in the library outputs its new text without the block being touched. An image inserted from a URL is not an attachment, and it stores url on its own.

Usage

Basic Image Output

<?php if ( isset( $attributes['control_name']['url'] ) ) : ?>
  <img src="<?php echo esc_url( $attributes['control_name']['url'] ); ?>"
       alt="<?php echo esc_attr( $attributes['control_name']['alt'] ); ?>">
<?php endif; ?>

<img src="{{control_name.url}}" alt="{{control_name.alt}}" />

Using WordPress Image Function

<?php
if ( isset( $attributes['control_name']['id'] ) ) {
  echo wp_get_attachment_image( $attributes['control_name']['id'], 'large' );
}
?>

{{{wp_get_attachment_image control_name "large"}}}

Post Meta Usage

<?php
$image = get_lzb_meta( 'control_meta_name' );
 
if ( isset( $image['id'] ) ) {
  echo wp_get_attachment_image( $image['id'], 'large' );
}
?>