Controls
Gallery
Gallery control allows you to add multiple images to your blocks using the WordPress Media Library. Users can select, reorder, and remove images easily.
Control Settings
- Preview Size - Select the image thumbnail size displayed in the block editor
Saved Data
The control saves the following information for each image:
| 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 foreach( $attributes['control_name'] as $image ): ?>
<img src="<?php echo esc_url( $image['url'] ); ?>"
alt="<?php echo esc_attr( $image['alt'] ); ?>">
<?php endforeach; ?>Handlebars
{{#each control_name}}
<img src="{{url}}" alt="{{alt}}" />
{{/each}}Using WordPress Image Function
PHP with wp_get_attachment_image
<?php
foreach( $attributes['control_name'] as $image ) {
if ( isset( $image['id'] ) ) {
echo wp_get_attachment_image( $image['id'], 'large' );
}
}
?>Handlebars with wp_get_attachment_image
{{#each control_name}}
{{{wp_get_attachment_image this "large"}}}
{{/each}}Post Meta Usage
Post Meta
<?php
$gallery = get_lzb_meta( 'control_meta_name' );
foreach ( $gallery as $image ) {
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.