Image Block

The Image Block allows for a single image to be used within a SAM, but multiple Image Blocks can be used in a SAM. The Image block allows for optional text, a hyperlink, and Alt Text (alternative text) for SEO purposes. 

Settings

Block Preview

Block Preview displays the block as it will appear in the SAM

Code

Code displays how the JSON is written as an additional view for programmers.

(X) deletes the block from the SAM

Select Image

Enter a URL that ends in .jpg, .png (supports transparency), .gif (supports animated GIFs)

or select am image from the Media Assets:

clicking the image here will bring up the Media Assets Library and another image can be chosen to replace this one. 

Hyperlink

Users can add a hyperlink to an image as an additional option. When the image is tapped in the published SAM, it will act as a redirect to the URL posted in this field. This can also be used as an alternative to the Action Block which is a button with a URL redirect action. 

Width and Height Controls

Depending on the selection, the user can control the size of the image within the block, and the size of the block. 

• px will adjust the height of the block itself scaling the image to fit within the block
• % will adjust the size of the picture based on the percentage of its original size

• px will adjust the height of the block itself scaling the image to fit within the block
• % will adjust the size of the picture based on the percentage of its original size
• Auto will adjust the block relative to other blocks in the SAM

Fill the Block

On by default, Fill the Block scales the image to fill the entire block. This can be unchecked and used in conjunction with the previous size controls.

Alternative Text

Alt text (alternative text), also known as "alt attributes", “alt descriptions", or technically incorrectly as "alt tags,” are used within an HTML code to describe the appearance and function of an image on a page.

• Adding alternative text to photos is first and foremost a principle of web accessibility. Visually impaired users using screen readers will be read an alt attribute to better understand an on-page image.
• Alt text will be displayed in place of an image if an image file cannot be loaded.
• Alt text provides better image context/descriptions to search engine crawlers, helping them to index an image properly and provides for a better SEO.

The full article on Alt Text can be read here.

An ALlt Text example for the image above would be:

Align Image

When images are not scaled to fit the block, they can have their alignment changed to be left, center, or right. 

Top and Bottom Text

Optional text can be added above and below the image as part of the same block using the same functionality as available in the Markdown Block described here.

Padding

Padding allows for the content to be manipulated within its block on all sides by entering a percentage or pixel value.