HOWTO: Insert Images

This page is under construction

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.

Create or Edit Elements

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

Photograph Element

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.

Captioned Photo Element

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

Story Element

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

Template

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

Story Page

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.