Skip to content
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.

Gallery Control

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:

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 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.

Was this article helpful?