Skip to content
Controls

Image

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

Image Control

Control Settings

  • Allow Insert from URL - Enable image insertion using custom URL
  • Preview Size - Select the image thumbnail size displayed in the block editor

Saved Data

The control saves the following image information:

NameDescription
idUnique ID of uploaded image
urlURL to access the image
altAlt text for image accessibility
captionOptional image caption
linkLink to original image
sizesAvailable image sizes and their URLs

Usage

Basic Image Output

PHP
<?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; ?>
Handlebars
<img src="{{control_name.url}}" alt="{{control_name.alt}}" />

Using WordPress Image Function

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

Post Meta Usage

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

Use wp_get_attachment_image() to get responsive images and proper HTML markup automatically.

Was this article helpful?