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

The control has a single panel, Preview Grid, with two number inputs. Both take a value from 1 to 20 and both may be left empty:

• Columns (preview_columns) - tiles per row. Empty fits the grid to the width of the control.
• Rows (preview_rows) - rows of tiles. Empty falls back to 4.

The grid shows columns * rows images at most. When the gallery holds more than that, the last tile becomes a +N counter and the grid drops to one image fewer. A gallery that fits the grid exactly gets no counter.

The Default value row is hidden for this control.

Saved Data

The control saves the following information for each image:

Usage

Basic Image Output

<?php foreach( $attributes['control_name'] as $image ): ?>
  <img src="<?php echo esc_url( $image['url'] ); ?>"
       alt="<?php echo esc_attr( $image['alt'] ); ?>">
<?php endforeach; ?>

{{#each control_name}}
  <img src="{{url}}" alt="{{alt}}" />
{{/each}}

Using WordPress Image Function

<?php
foreach( $attributes['control_name'] as $image ) {
  if ( isset( $image['id'] ) ) {
    echo wp_get_attachment_image( $image['id'], 'large' );
  }
}
?>

{{#each control_name}}
  {{{wp_get_attachment_image this "large"}}}
{{/each}}

Post Meta Usage

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