ÐÓ°ÉÔ­´´

Images can help make content more engaging, support key messages, and break up large sections of text. The Image block allows you to add images to pages and posts while providing important accessibility and formatting options.

In this lesson, you’ll learn how to add images, provide alternative text, and adjust image settings to ensure your content is accessible and visually effective.

When to Use an Image Block

Use the Image block when you want to:

• Illustrate a concept
• Showcase a person, place, or event
• Support text content with visuals
• Make a page more engaging

Images should support your content, not replace it. Important information should always be available in text form.

Adding an Image

To add an Image block:

1. Click the + button and search for Image.
2. Select the Image block.
3. Choose one of the following options:

Upload
Upload an image directly from your computer.

Media Library
Select an image that has already been uploaded to your website.

Insert from URL
Insert an image using a direct image URL.

Tip: In most cases, it’s recommended to use the Media Library whenever possible to ensure images are managed within your website.

Alternative Text (Alt Text)

Alternative text, often called alt text, provides a text description of an image.

Alt text is important because:

• It helps visitors using screen readers understand image content.
• It improves accessibility.
• It helps search engines understand images.

Writing Effective Alt Text

Good alt text should describe the purpose or meaning of the image.

Good Example: Student studying in the MacOdrum Library.

Avoid: Image of a student studying in the MacOdrum Library. Screen readers already identify the content as an image.

Decorative Images

If an image is purely decorative and does not add meaningful information, alt text may be left empty.

Captions

Captions provide additional context below an image.

Captions are useful when:

• Identifying people
• Providing photo credits
• Explaining diagrams or charts
• Adding context that may not be obvious from the image alone

To add a caption:

1. Select the image.
2. Locate the caption field below the image.
3. Enter your caption text.

Image Alignment

Images can be aligned within the page layout.

Common alignment options include:

• Left
• Center
• Right

When aligned left or right, surrounding text may wrap around the image.

Choose an alignment that works well with the surrounding content and maintains readability.

Image Settings

Additional image settings are available in the sidebar.

Depending on your site’s configuration, you may see options for:

• Image size
• Alignment
• Linking behaviour
• Expand on click
• Alt text

Not all settings are available for every image or site configuration.

Replacing an Image

If you need to update an image:

1. Select the image block.
2. Click Replace.
3. Choose a new image from the Media Library or upload a replacement.

The image will be updated while preserving the existing block location on the page.

Best Practices

Always Add Alt Text
Most images should include meaningful alt text.

Use High-Quality Images
Choose clear images that support the content on the page.

Add Captions Only When Helpful
Not all images require captions. Use them when additional context would benefit the reader.

Avoid Using Images for Text
Important information should be written as text rather than embedded inside images whenever possible.

Consider Mobile Devices
Before publishing, preview your page to ensure images display correctly on smaller screens.

Try it Out

Practice working with the Image block.

1. Add an Image block to a page.
2. Upload or select an image from the Media Library.
3. Add meaningful alt text.
4. Add a caption.
5. Experiment with different alignment options.
6. Preview the page and review how the image appears on the front end.