Using alternative images in print

Note that since this blog post was published Connexions has changed how authors should specify images for online vs. PDF views. (Authors do not need to update existing content; they have been updated automatically.) See this blog post for information on the new method.

Since the introduction of CNXML 0.6, Connexions authors have had a pretty cool but often overlooked tool at their disposal: Print-alternative images for media objects. In other words, authors can specify a video to embed online and an image to display instead when viewing the content in print. Let's take a look at how you can add print-alternative images to your interactive Connexions content!

Connexions totally re-vamped the way media elements are included and displayed back when CNXML 0.6 rolled out. The snippet below specifies an embedded video with an image alternative (the important part is highlighted):

<media id="building-on-past" alt="Building on the past.">
  <video mime-type="video/mpeg"src="Building_on_the_Past.mpg"
         autoplay="false" width="320" height="260" />
  <image mime-type="image/jpeg"
         src="building_on_the_Past_title_screen.jpg" />
</media>

Check it out: There is an image element under the video element! The media element contains both a video element and an image element.

When it comes time to generate a module's PDF, Connexions always looks for a second child of a media element to use as a print-alternative. If it doesn't find one, it either displays the media as-is or creates a reference to the URL of the media file, depending on the type of media element used.

So why would you want to include a print alternative for your online media? Consider these cases:

• You're writing an instructional module about playing the clarinet. You've embedded a tutorial video from YouTube but, unfortunately, it's hard to print videos into textbooks. So instead, you create an image of the fingerings demonstrated and use it as a print alternative.
• In that same clarinet module, you've embedded a beautiful sample of jazz clarinet music. For print, you specify an image of the sheet music for the piece performed.
• You use small PNG diagrams to illustrate some neuron interactions in your module about brain chemistry. Those diagrams look great online (and control the size and load time of your module) but look ridiculously tiny in print. Changing the print-width attribute for the image simply distorts the image and reduces its overall quality. So you create EPS vector images from your original diagrams and specify them as the print alternative. Connexions' PDF/print system then reads the EPS images and creates higher-quality diagrams for print that can be scaled to any size.

If you have any more bright ideas about how to use print-alternative images in Connexions, or have any questions about using print-alternative images, please feel free to contact us.