HOWTO: How to Include Images in Your Stories

Example

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

<div class="list">
    <ul>
    </ul>
</div>

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->get_title %></h1>
    <% $element->get_data("deck") %>
    <hr size="1" noshade />
% }

%# Display all the pages of this story
% $burner->display_pages("page");

<hr size="1" noshade />
% if (my $prev = $burner->prev_page_file) {
    <a href="<% $prev %>">Previous Page</a>
% }

% if (my $next = $burner->next_page_file) {
    <a href="<% $next %>">Next Page</a>
% }

page.mc

<%perl>
foreach my $e ($element->get_elements) {
    if ($e->has_name("related_media")) {
        $burner->display_element($e);
    } elsif ($e->has_name("paragraph")) {
        $m->out("<p>" . $e->get_data ."</p>\n");
    }
}
</%perl>

related_media.mc

%  my $rel_media = $element->get_related_media;
<img src="<% $rel_media->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.

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 page.mc. 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.