Versions Compared

Old Version 6

changes.mady.by.user Todd McGill

Saved on

compared with

New Version 7

changes.mady.by.user Todd McGill

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This pattern is used whenever an image is included as part of a Data Definition.

image properties data definition in its default stateImage Modified

How it works

Image location

image location data definition field

Selection

What this means

What this triggers

Internal

Indicates the image file is located in Cascade as part of your site.

Causes the Image file field to display.

External

Indicates the image file is located somewhere on the web, not in Cascade as part of your site.

Causes the Image URL field to display.

Image file

Note

Only displayed when Image location is set to ‘Internal’.

image file data definition field

Use the asset chooser to indicate the desired image in your Cascade site.

Image URL

Note

Only displayed when Image location is set to ‘External’.

image url data definition field

Enter the full URL of the image in the text field.

Alternative text

alternative text data definition field

Enter the image’s alternative text in the text field.

Info

Alt text is the text-equivalent of the image and is used when when the image can’t be displayed by the browser or can’t be perceived by the user. It is super important for accessibility.

Some tips:

  • Use alt text to provided the content and function of the image.

  • When an image is used as a link, the alt text should indicate where link will take the user.

  • When an image is used to display stylized text, the alt text should represent that text exactly.

  • Alt text longer than ~100 characters is likely too long. Maybe what the image is meant to convey should be more thoroughly described in the main text of the page.

  • Alt text can be pretty nuanced. Consider reading WebAIM’s article on alt text.