Controls
Image
Image control is used to upload image file and store an array value with image info for the block. This control uses the native WordPress Media Popup to handle the upload and selection process. See examples below to use this control.
Image control saves data as an array and contains the following keys:
| Name | Description |
|---|---|
id | Unique ID of uploaded image |
url | URL to access the image |
alt | Optional alt attribute used in <img> tags |
caption | Optional caption |
link | Link to image |
sizes | List of available sizes for the image |
Control Settings
- Allow Insert from URL – allows to use custom URL to insert image
- Preview Size – select the size if the image preview displayed in the editor
Usage
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; ?>PHP with Image ID
if ( isset( $attributes['control_name']['id'] ) ) {
echo wp_get_attachment_image( $attributes['control_name']['id'], 'large');
}Handlebars
<img src="{{control_name.url}}" alt="{{control_name.alt}}" />Post Meta
$image = get_lzb_meta( 'control_meta_name' );
if ( isset( $image['url'] ) ) : ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>">
<?php endif; ?>Post Meta with Image ID
$image = get_lzb_meta( 'control_meta_name' );
if ( isset( $image['id'] ) ) {
echo wp_get_attachment_image( $image['id'], 'large');
}