<< Chapter < Page Chapter >> Page >

This code results in the following image:

The Taj Mahal
The photograph of the Taj Mahal in this figure and the following figures was taken by Steve Evans . It is licensed for public use under the Creative Commons Attribution License.

The following CNXML code shows how to display the same image with a specific size (in this case, 250 pixels wide by 250 pixels tall):

<figure id="figure_size_adjusted"><media id="TajMahal" alt="The Taj Mahal"><image mime-type="image/jpeg" src="TajMahal_medium.jpg"height="250" width="250" /></media></figure>

The resulting figure is displayed below:

The Taj Mahal

When specifying width and height , enter the value in pixels. For example, the code above will produce a print image that is 250 pixels tall and 250 pixels inches wide.

It is not necessary to specify both the height and width of an image. If you supply only one of these, the other value will be calculated to preserve the same height-width ratio as the original image. You only need to supply both when you wish to change the shape of the image.
The height and width attributes do not affect the size of the image in the print (PDF) version of the module. To change the printed size of the image, use the print-width attribute (see below). You can use any combination of print and online sizing attributes for an image.

Adjusting the size of a printed image

You can adjust the size of the image in the print (PDF) version of your document by using the print-width attribute. The height of the image will be adjusted proportionately to the width set in print-width . There is no print-height attribute.

The following CNXML code shows how to display the Taj Majal image above with a specific printed size (in this case, 4.5 inches wide):

<figure id="figure_size_adjusted"><media id="TajMahal" alt="The Taj Mahal"><image mime-type="image/jpeg" src="TajMahal_medium.jpg"print-width="4.5in" /></media></figure>
The print-width attribute does not affect the size of the image when viewing the version of the module. To change the online size of the image, use the height and width attributes. You can use any combination of print and online sizing attributes for an image.

Creating a linked thumbnail image

A thumbnail is a small version of an image that, when clicked, displays the larger, full-size version of that image. You can create a thumbnail in your modules by completing the following steps:

  1. Using image-editing software, create a thumbnail-sized version of your image file. Make sure to change the name of the thumbnail image so that you know which is which (e.g. "myimage_thumb.png").
  2. Add the thumbnail image to your module using the files tab as you would with any image fie.
  3. Create the media and image elements as you would normally do for a full-sized image.
  4. Use the optional thumbnail attribute to the image element as shown in the example below.
Here is an example of the CNXML code required to include a thumbnail image that links to a full size version: <figure id='thumbnail'><media id="thumbnailmedia" alt="The Taj Mahal (thumbnail version)"><image mime-type='image/jpeg' src='TajMahal_medium.jpg'thumbnail='TajMahal_Thumb.jpg'/></image></media></figure> This code results in the following linked image:
The Taj Mahal (thumbnail version)

Get Jobilize Job Search Mobile App in your pocket Now!

Get it on Google Play Download on the App Store Now




Source:  OpenStax, Ideas and tools for improving connexions modules and collections. OpenStax CNX. Mar 22, 2010 Download for free at http://cnx.org/content/col11184/1.2
Google Play and the Google Play logo are trademarks of Google Inc.

Notification Switch

Would you like to follow the 'Ideas and tools for improving connexions modules and collections' conversation and receive update notifications?

Ask