Showing Images as Thumbnails in Output

example

Let's say you have a topic that looks like this, with a large image in the middle of the content:

Suppose that, in the output, you want the end user to see this image as a small thumbnail. Furthermore, if the end user hovers over the image, it will be shown at its full size.

First, you must decide if you want the thumbnail settings to be applied to this image only, or to many images like it throughout your project. Let's say that you have many images and want to apply the settings to all of them. To begin, you might create a class of the <img> style in your style sheet, perhaps calling it "LargeImages."

After double-clicking this style class, you can set the properties on the Thumbnail tab of the Properties dialog.

Next, you right-click on the image in the topic and apply the new image style class to it.

Afterward, both in the editor and in the output, the topic looks like this, with the image shown as a thumbnail:

If the user hovers over the thumbnail image, the full version of the image displays in a popup, like this:

1. Open the topic style sheet that you want to modify.

2. Complete one of the following sets of steps, depending on whether you want to use the Simplified view or Advanced view in the Stylesheet Editor.

   • Simplified The Simplified view is better for new users. It provides an easier way to apply properties to styles, with format options available from a toolbar (similar to the way one would use the Text Format toolbar to change the look topic content without a style). In many cases, only the most common property options are available in the Simplified view (e.g., font, letter/word spacing, paragraph alignment/indentation, auto-numbering format, borders, background). One advantage of the Simplified view is that you can apply a property to multiple styles at the same time. You can also click a check box to hide the properties in the editor, allowing you to see only the styles.
   • Advanced The Advanced view displays style classes and properties in hierarchical tree structures. It is not as quick as using the Simplified view, but it allows you to edit a great deal more settings than are available in the Simplified view.

   Warning: When editing styles, make sure the proper medium is selected in the Stylesheet Editor before you begin (you can do this from the Medium drop-down list). Flare remembers the last medium that you used when working in the style sheet, so it may or may not be the one that you want to use the next time around. If you want all mediums to use the same setting, select the "default" medium and the properties will "trickle down" to the other mediums. If you are not using different mediums, you do not need to worry about selecting one when you edit styles. See About Style Sheet Mediums.

If using the Simplified view:

1. In the local toolbar, make sure the first button displays (which means that the Simplified view is currently shown in the editor). If the button displays instead, then click it.
2. In the upper-left corner of the editor, click in the Show Styles field and select Show Image Styles.

3. Select the appropriate image (img) style.

   example

   Let's say that you are creating a WebHelp system that contains small images (e.g., less than 48 pixels high) as well as bigger images (e.g., larger than 48 pixels high). Suppose you want all of the bigger images to appear as thumbnails in the output. In that case, you might create a class of the <img> tag and name it "BigImages." For the smaller images, you can use the parent <img> tag (or even a style class), but for the larger ones, you can use the img.BigImages style class. The large images will automatically be displayed as thumbnails in the output, until the end user performs an action to see the picture in its full size.

4. In the local toolbar of the editor, click . The Properties dialog opens.
5. Select the Thumbnail tab.
6. In the area on the left, select one of the options.
   • Mouse Over The end user can see the picture in its full size by hovering the mouse over the thumbnail. As a result, the full size of the image will be shown in a popup window.
   • Hyperlink The end user can see the picture in its full size by clicking the thumbnail. As a result, the full size of the image will be shown.
   • Popup The end user can see the picture in its full size by clicking the thumbnail. As a result, the full size of the image will be shown in a popup window.

   Note: If you select None, the image will not be shown as a thumbnail. If you select Inherit, the image will use whatever thumbnail settings are applied to the parent <img> tag.

7. If you want to set a maximum width or height for thumbnail images, complete the Max Width or Max Height fields. You probably only need to complete one of these areas.

   The default setting is to show images as thumbnails if they are more than 48 pixels high. If that is the case, the image will be resized in the output to be 48 pixels high, and the width will be adjusted accordingly. The image will be shown in its full size when the user performs one of the actions you specified in the previous step.

   If you want to change either the maximum width or height settings, first click in the upper-right drop-down and select Length. Enter a number in the field and use the down arrow in the lower-right corner to select a unit of measurement. See About Units of Measurement.

8. In the Properties dialog, click OK.

If using the Advanced view:

1. In the local toolbar, make sure the first button displays (which means that the Advanced view is currently shown in the editor). If the button displays instead, then click it.
2. In the upper-left corner of the editor, click in the Show Styles field and select Show Image Styles.

3. Select the appropriate image style. For example, you can select the parent img tag, or you can select a class that you may have created for that tag. If you created classes of the tag, you can click the plus button next to the <img> tag and select the class instead.

   example

   Let's say that you are creating a WebHelp system that contains small images (e.g., less than 48 pixels high) as well as bigger images (e.g., larger than 48 pixels high). Suppose you want all of the bigger images to appear as thumbnails in the output. In that case, you might create a class of the <img> tag and name it "BigImages." For the smaller images, you can use the parent <img> tag (or even a style class), but for the larger ones, you can use the img.BigImages style class. The large images will automatically be displayed as thumbnails in the output, until the end user performs an action to see the picture in its full size.

4. From the Show Properties drop-down list on the upper-right side of the editor, select Show: Property Groups.

5. In the Properties section, click the plus button next to Thumbnail to expand the group.

   The property name is shown in the left column. The right column is used for selecting and entering values for the property.

6. To the right of mc-thumbnail, enter one of the following:

   • hover The end user can see the picture in its full size by hovering the mouse over the thumbnail. As a result, the full size of the image will be shown in a popup window.
   • link The end user can see the picture in its full size by clicking the thumbnail. As a result, the full size of the image will be shown.
   • popup The end user can see the picture in its full size by clicking the thumbnail. As a result, the full size of the image will be shown in a popup window.

   Note: If you enter none, the image will not be shown as a thumbnail. If you enter normal, the image will be replaced with its thumbnail.

7. If you want to set a maximum height or width for thumbnail images, complete the mc-thumbnail-max-height or mc-thumbnail-max-width fields. You probably only need to complete one of these areas.

   The default setting is to show images as thumbnails if they are more than 48 pixels high. If that is the case, the image will be resized in the output to be 48 pixels high, and the width will be adjusted accordingly. The image will be shown in its full size when the user performs one of the actions you specified in the previous step.

   If you want to change either the maximum width or height settings, click to the right of either field and enter the appropriate width or height (e.g., 60px, 1in).

3. Press CTRL+S or click to save your work.

To apply a particular style class to an image (after you create it in the Stylesheet Editor), simply right-click the image where it is inserted. Then from the menu, select Style Class and choose the appropriate style.

1. Open the content file (e.g., topic, snippet).
2. Right-click on the picture.
3. From the context menu, select Edit Picture. The Edit Picture dialog opens.
4. Select the Thumbnail tab.
5. In the area on the left, select one of the options.
   • Mouse Over The end user can see the picture in its full size by hovering the mouse over the thumbnail. As a result, the full size of the image will be shown in a popup window.
   • Hyperlink The end user can see the picture in its full size by clicking the thumbnail. As a result, the full size of the image will be shown.
   • Popup The end user can see the picture in its full size by clicking the thumbnail. As a result, the full size of the image will be shown in a popup window.

   Note: If you select None, the image will not be shown as a thumbnail. If you select Inherit, the image will use whatever thumbnail settings are applied to the parent <img> tag.

6. If you want to set a maximum width or height for thumbnail images, complete the Max Width or Max Height fields. You probably only need to complete one of these areas.

   The default setting is to show images as thumbnails if they are more than 48 pixels high. If that is the case, the image will be resized in the output to be 48 pixels high, and the width will be adjusted accordingly. The image will be shown in its full size when the user performs one of the actions you specified in the previous step.

   If you want to change either the maximum width or height settings, first click in the upper-right drop-down and select Length. Enter a number in the field and use the down arrow in the lower-right corner to select a unit of measurement. See About Units of Measurement.

7. Click OK.
8. Press CTRL+S or click to save your work.