HOWTO: Insert Images
This example shows how to create the necessary elements and template for inserting images into web pages.
Images require a minimum of two element types: one with its content type set to Image, and a Subelement with its Related Media property set. This example uses the Photograph and Story elements that are predefined in default installations of Briclage 2.0. If these elements do not already exist in your installation, or if you prefer to use elements with different names, then you can create them using the information provided below.
Publishing → Element Types → Add a New Element Type
| Key Name | Name | Content Type | Fixed | Related Media |
|---|---|---|---|---|
| photograph | Photograph | Image | Optional | No |
| captioned_photo | Captioned Photo | Subelement | N/A | Yes |
Elements of content type Image have five predefined custom fields that are automatically populated with image information. The width and height properties are useful when creating img tags in HTML.
You may wish to set the fixed property of Image elements where the images are not associated with a particular page or story—static site images such as those found in headers or footers, for example.
Only elements of type Subelement may be inserted into other elements. It is not possible to insert an element with an Image content type directly into a story element. A subelement must therefore be defined to act as a container for the image element. By doing so, it is possible to create an element that contains more than just an image. In this example, the Captioned Photo element will contain a Caption text field and an Alt text field (to hold the alt attribute text for the HTML img tag).
Add the following custom fields to your new Captioned Photo element:
Publishing → Element Types → Captioned Photo → Edit
| Widget Type | Key Name | Label | Min. Occur. | Max. Occur. |
|---|---|---|---|---|
| Text Box | caption | Caption | 1 | 1 |
| Text Box | alt | Alternative Text | 1 | 1 |
The Captioned Photo element must be added to the Story element so that authors can use it. If you don’t already have a Story element, or you want to create a story element with a different name, you need to create one now:
Publishing → Element Types → Add a New Element Type
| Key Name | Name | Content Type | Fixed | Related Media |
|---|---|---|---|---|
| story | Story | Story | Optional | No |
Edit the Story element, and add the Captioned Photo subelement:
Publishing → Element Types → Story → Edit
Existing Subelement Types → Add Subelement → select Captioned Photo → Add Elements
In this example, a Template Toolkit template is created for the Story element. This in turn will call the Captioned Photo element template to display the photo.
Template → New Template
| Template Type | Category | Element Type |
|---|---|---|
| Element | / | story |
| Element | / | captioned_photo |
For the purposes of this example, the story.tt template will only handle the Captioned Photo element. In practise, it would be more complex, with options to handle a variety of element types:
My Workspace → Templates → /story.tt → Edit
All the elements are now in place for adding a Captioned Photo to a story. Use an existing story of type Story, or create a new one as shown in the example below:
Story → New Story
| Title | Slug | Story Type | Primary Category |
|---|---|---|---|
| Photo Story | photo-story | Story | / |
Add a Captioned Photo:
My Workspace → Stories → Photo Story → Edit
Content → Add Element → Captioned Photo
A Captioned Photo element will be inserted into the story. At this point, related media (a photograph) must be associated with the Captioned Photo element. Use the Edit button to either upload a new Photograph element, or to search for an existing Photograph element.
Enter suitable values in the Caption and Alternative Text fields.