---
title: "Image"
description: "Add Image control to your custom blocks for WordPress using the Lazy Blocks plugin."
url: "https://www.lazyblocks.com/docs/blocks-controls/image/"
lastUpdated: 2026-09-09
source: "blocks-controls/image.mdx"
---
# Image

Image control allows you to add a single image to your blocks using the WordPress Media Library or custom URL.

## Control Settings

- **Allow insert from URL** (`insert_from_url`) - off by default. Turning it on adds an Insert from URL button to the media placeholder
- **Preview Size** (`preview_size`) - registered image size used for the thumbnail inside the editor, `medium` by default

The list holds the image sizes the editor offers, each labelled with its dimensions, as in `Medium (300 × 300)`. Preview Size changes the editor thumbnail only, and the saved `url` is the full file whatever the preview shows.

## Saved Data

The control saves the following image information:

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

Every key except `id` is read back from the media library on each render, so an image renamed or re-captioned in the library outputs its new text without the block being touched. An image inserted from a URL is not an attachment, and it stores `url` on its own.

## Usage

### Basic Image Output

```php title="PHP" /$attributes['control_name']/
<?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; ?>
```

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

### Using WordPress Image Function

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

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

### Post Meta Usage

```php title="Post Meta" /get_lzb_meta( 'control_meta_name' )/
<?php
$image = get_lzb_meta( 'control_meta_name' );

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