NAME

How to Include Images in Your Stories

VERSION

1.1

DATE

2003/01/18

DESCRIPTION

This HOWTO describes how to include images in your stories.

EXAMPLE

Using a structure like the following,

column.mc
Top-level story type element.
page.mc
Subelement of column.mc.
related_media.mc
Subelement of page.mc.

Use the following code to include images in your stories.

  ###### Code for column.mc ######
  <!-- Start "Column" -->
  %# 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>
  % }
  <!-- End "Column" -->
  ###### End code for column.mc ######
  ###### Code for page.mc ######
  <!-- Start "Page" -->
  <!-- This code fetches your elements and sub elements -->
  <%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>');
      }
  }
  </%perl>
  <!-- Rest of your page code here -->
  <!-- End "Page" -->
  ###### End code for page.mc ######
  ###### Code for related_media.mc ######
  <!-- Start "Related Media" -->
  %  my $rel_media = $element->get_related_media;
  <img src="<% $rel_media->get_uri %>" align="right">
  <!-- End "Related Media" -->
  ###### End code for related_media.mc ######

DISCUSSION

You can add as many Related Media elements 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 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.

AUTHOR

SR <sandy9735@yahoo.com>

CODE AUTHORS

David Wheeler <david@wheeler.net>

Scott Lanning <slanning@theworld.com>

George Harrison

Sandy R.

SEE ALSO

Bric::FAQ