> ## Documentation Index
> Fetch the complete documentation index at: https://help.edzo.com/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.

<Info>
  Images from Unsplash are free to use and automatically include attribution. Uploaded images are stored securely in your Edzo account.
</Info>

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

<ParamField path="Width" default="820" type="slider">
  The width of the image in pixels (100–820). The image scales proportionally.
</ParamField>

<ParamField path="Alignment" default="center" type="select">
  The horizontal alignment of the image:

  * **Left**: Aligns the image to the left
  * **Center**: Centers the image
  * **Right**: Aligns the image to the right
</ParamField>

<ParamField path="Aspect ratio" default="original" type="select">
  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
</ParamField>

<ParamField path="Image padding" default="none" type="select">
  Padding around the image:

  * **None**: No padding
  * **Small**: Slight padding
  * **Medium**: Moderate padding
  * **Large**: Generous padding
</ParamField>

### Appearance

<ParamField path="Rounded corners" default="true" type="switch">
  When enabled, the image has slightly rounded corners for a softer look.
</ParamField>

<ParamField path="Show image border" default="false" type="switch">
  When enabled, displays a border around the image.
</ParamField>

<ParamField path="Show drop shadow" default="false" type="switch">
  When enabled, adds a subtle shadow beneath the image for depth.
</ParamField>

<ParamField path="Rotation" default="0" type="slider">
  Slight rotation of the image (-3 to 3 degrees). Useful for a casual, playful look.
</ParamField>

### Caption

<ParamField path="Show caption" default="false" type="switch">
  When enabled, displays a caption below the image. You can edit the caption text directly.
</ParamField>

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