Working with images

Defining images in the templates

The following datadef form elements are are reused in many places in the 2015 templates when images are to be included in the page content:

Datadef element	Description
... > Image > Type	Specifies whether the image file is referenced internally or externally. Internal files reside in your Cascade Site along side your other Cascade assets. External images exist anywhere on the web and are reference by URL.
... > Image > File	This element is used to define the location of the image file to be used. If 'Type' (above) is set to 'internal', the datadef presents an asset chooser to select your desired image. If 'Type' is set to 'external', a text field is presented in which you provide the full URL to your desired image. Note that this URL must include the protocol prefix ('http://', 'https://') to properly reference the desired image.
... > Image > Alternative text	Alternative text (alt text) is used to convey the content and function of the image,to provide a caption or description of the image. Refer to the WebAIM article on alt text for more information and tips on its usage.
... > Image > Set internationalization	Used to apply internationalization to the image alt text. Refer to 'Internationalization'.

Image sizes

Here is a rough guide to selecting images of appropriate size. Note that the recommend sizes below are all rather large, even for images that are displayed in small areas of the page. As such, it is also recommended that all images used on the web be properly optimized (e.g., using 'Save for Web & Devices' in Photoshop rather than 'Save As...').

Image display	Recommended image width
Window width	2000px
Full container width	1200px
3/4 container width	900px
2/3 container width	800px
1/2 container width and smaller	720px