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 |