Controls
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 - 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:
| Name | Description |
|---|---|
id | Unique ID of uploaded image |
url | URL to access the image |
alt | Alt text for image accessibility |
caption | Optional image caption |
link | Link to original image |
sizes | Available 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.