---
title: "Gallery"
description: "The Gallery control adds several images from the Media Library to a block. It stores an array with each image's id, url, alt, caption and sizes."
url: "https://www.lazyblocks.com/docs/blocks-controls/gallery/"
lastUpdated: 2026-09-23
source: "blocks-controls/gallery.mdx"
---
# 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:

| Name          | Description                          |
| ------------- | ------------------------------------ |
| `id`          | Unique ID of uploaded image          |
| `url`         | URL to access the image              |
| `alt`         | Alt text for image accessibility     |
| `title`       | Attachment title                     |
| `caption`     | Optional image caption               |
| `description` | Attachment description               |
| `link`        | Link to original image               |
| `sizes`       | Available image sizes and their URLs |

## Usage

### Basic Image Output

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

```hbs title="Handlebars" /control_name/
{{#each control_name}}
  <img src="{{url}}" alt="{{alt}}" />
{{/each}}
```

### Using WordPress Image Function

```php title="PHP with wp_get_attachment_image" /$attributes['control_name']/
<?php
foreach( $attributes['control_name'] as $image ) {
  if ( isset( $image['id'] ) ) {
    echo wp_get_attachment_image( $image['id'], 'large' );
  }
}
?>
```

```hbs title="Handlebars with wp_get_attachment_image" /control_name/
{{#each control_name}}
  {{{wp_get_attachment_image this "large"}}}
{{/each}}
```

### Post Meta Usage

```php title="Post Meta" /get_lzb_meta( 'control_meta_name' )/
<?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.

## Documentation Index
> Fetch the complete documentation index at: https://www.lazyblocks.com/llms.txt
> Fetch every page in a single file at: https://www.lazyblocks.com/llms-full.txt