Example

In Bricolage 1.6 or later, using a structure like the following:

Use the following code to include images in your stories:

column.mc

% # Only show this if we are on the first page
% unless ($burner->get_page) {

<h1><% $story&#x002d;>get_title ></h1>

< $element&#x002d;>get_data("deck") %>

<hr size="1" noshade />

% }
%# Display all the pages of this story

% $burner&#x002d;>display_pages("page");
<hr size="1" noshade />

% if (my $prev = $burner&#x002d;>prev_page_file) {

<a href="<% $prev >">Previous Page</a>

% }

% if (my $next = $burner&#x002d;>next_page_file) {

<a href="< $next >">Next Page</a>

% }

page.mc

<%perl>

foreach my $e ($element&#x002d;>get_elements) {

   if ($e&#x002d;>has_name("related_media")) {

       $burner&#x002d;>display_element($e);

    } elsif ($e&#x002d;>has_name("paragraph")) {

        $m&#x002d;>out("<p>" . $e&#x002d;>get_data ."</p>\n");

    }

}

</%perl>

related_media.mc

  my $rel_media = $element->get_related_media;

<img src="<% $rel_media&#x002d;>get_uri %>" align="right" />

Discussion

You can add as many Related Media subelements as you like, then order their position on the page using the ordering tools in the UI. I wanted to use an image that is right-aligned on the page, then, on certain occasions, another image, in the same story, that is left aligned. I did it like this:

Disclaimer: I don’t know if the following is the best way to do this, but it works.

I created an element called Left Image of type Related Media. Then I added it as a sub-element of F. The template for Left Image, called left_image.mc, looks exactly like the related_media.mc template, except the align in the image tag is align="left". This allows you to use multiple images in your stories, and have the layout be a bit more aesthetically pleasing.

That’s it, this allows you to handle images in your stories.