> ## Documentation Index
> Fetch the complete documentation index at: https://edzo.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Image Block

> Learn how to add and customize images in your resources.

The **Image** block lets you add images to your resources. Upload your own images, search Unsplash for free stock photos, or embed images from a URL.

Images can be styled with borders, shadows, rounded corners, and various image adjustments.

> [!NOTE]
>
> Images from Unsplash are free to use and automatically include attribution. Uploaded images are stored securely in your Edzo account.

## When to use Image blocks

Image blocks work well for:

* Adding visual context to explanations and instructions
* Displaying diagrams, charts, and infographics
* Showing real-world examples and photographs
* Creating visually engaging resources
* Supporting visual learners

## Adding images

You can add images from three sources:

1. **Upload**: Upload images from your device (JPG, PNG, GIF, WebP)
2. **Unsplash**: Search and embed free stock photos from Unsplash
3. **URL**: Embed images from any public web address

## Settings

### Size and position

**Width** `slider` (default: 820)

The width of the image in pixels (100–820). The image scales proportionally.

**Alignment** `select` (default: center)

The horizontal alignment of the image:

* **Left**: Aligns the image to the left
* **Center**: Centers the image
* **Right**: Aligns the image to the right

**Aspect ratio** `select` (default: original)

The aspect ratio of the image:

* **Original**: Maintains the image's original proportions
* **Square (1:1)**: Perfect square
* **16:9 (Landscape)**: Widescreen format
* **9:16 (Portrait)**: Tall portrait format
* **4:3, 3:4, 3:2, 2:3, 5:4, 4:5, 5:3, 3:5**: Various standard ratios

**Image padding** `select` (default: none)

Padding around the image:

* **None**: No padding
* **Small**: Slight padding
* **Medium**: Moderate padding
* **Large**: Generous padding

### Appearance

**Rounded corners** `switch` (default: true)

When enabled, the image has slightly rounded corners for a softer look.

**Show image border** `switch` (default: false)

When enabled, displays a border around the image.

**Show drop shadow** `switch` (default: false)

When enabled, adds a subtle shadow beneath the image for depth.

**Rotation** `slider` (default: 0)

Slight rotation of the image (-3 to 3 degrees). Useful for a casual, playful look.

### Caption

**Show caption** `switch` (default: false)

When enabled, displays a caption below the image. You can edit the caption text directly.

### Image adjustments

Fine-tune the appearance of your image with these filters:

* **Brightness**: Lighten or darken the image
* **Contrast**: Increase or decrease contrast
* **Saturation**: Adjust color intensity
* **Sepia**: Apply a warm, vintage tone
* **Hue rotation**: Shift colors around the color wheel
* **Blur**: Apply a blur effect
* **Invert**: Invert the image colors

## Tips for teachers and parents

**Best practices:**

* Use high-quality images that are clear and relevant to the content
* Add captions to explain what the image shows
* Use consistent alignment throughout your resource
* Consider accessibility; add meaningful alt text for screen readers
* Avoid overly large images that slow down loading
* Use image adjustments sparingly; subtle effects work best
* For diagrams, use aspect ratio settings to ensure important details aren't cropped


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.