18.7.3.2 Using thumbnails for links to illustrations in HTML
In extract replacement code you can provide a thumbnail—a miniature version—of the first graphic in the extract, and use the thumbnail as a link to the extract.
§18.7.3.2.1 Choosing a thumbnail method
§18.7.3.2.2 Providing separate thumbnails
§18.7.3.2.3 Providing scaled thumbnails
§18.7.3.2.4 Including text with a thumbnail
18.7.3.2.1 Choosing a thumbnail method
The best way to provide thumbnails depends in part on which of the following you are generating:
• compiled or local-based Help system.
The issue is the thumbnail graphic itself.
For server-based HTML or OmniHelp, you can include an additional smaller version of each image, to replace (and provide a link to) the original image. Providing an additional image for a thumbnail makes sense if users are downloading a page at a time; if they do not want to view the full-size image, they can avoid the time cost of downloading it.
However, for a compiled Help system (such as HTML Help), or a local-based system (such as JavaHelp, Oracle Help for Java, or local HTML or OmniHelp), the additional-image method increases the file size (and download time), because of the added size of the thumbnails themselves. For these cases it can make more sense to use the original image file, but specify a smaller size, and let the browser do the scaling. The resulting thumbnail might not be as pretty but it should still be identifiable, and that is really all that is required of thumbnails.
Which method is better for a given project? It depends. The graphics count and sizes are among the factors to consider.
18.7.3.2.2 Providing separate thumbnails
If you provide separately created thumbnails, use the following option, which is the default:
; ExtrGraphThumbnail = Named (default,
; use original name plus ExtrGraphSuffix)
When ExtrGraphThumbnail=Named, you provide a thumbnail version of the first image in each extract. You must create the thumbnails yourself, using a third-party graphics tool, and store them in the same directory with the output graphics. Each thumbnail must have the same file name as the corresponding output graphic, but with a suffix added to the base name. You specify the suffix as follows:
; ExtrGraphSuffix = suffix for file name of first graphic in an
; extract, used in the predefined <$$_extrgraph> macro to identify
Name thumbnail after output graphic
Except for the suffix, each thumbnail must have the same name as the corresponding output graphic.This means that if your project involves having Mif2Go produce graphics with generated names, you must make each thumbnail name match the Mif2Go-generated name (not the original name).
Place thumbnail in project directory
Each thumbnail you create must be placed in the same directory with the corresponding output graphic; this might be different from the directory where your original graphics are located.
For example, suppose your document references the following graphic:
And suppose Mif2Go generates from jaguar.bmp the following output graphic:
You must provide the following thumbnail for jaguar.jpg:
D:\MyDoc\HTMout\aa0f3de8tn.jpg
If Mif2Go does not find a properly named thumbnail for the first graphic in an extract, you get either a broken link or just the alt text in the replacement code.
If there is no graphic in the extract, the value of <$$_extrgraph> for that extract is NULL, and the literal name extrgraph appears in the replacement code wherever you specified <$$_extrgraph>.
18.7.3.2.3 Providing scaled thumbnails
When you use scaled thumbnails, the name of each thumbnail is the same as the name of the full-size graphic. To provide thumbnails scaled by the browser at run time from your original graphics, specify the following option:
When ExtrGraphThumbnail=Scaled, Mif2Go uses the original image, applying scaling factors that you can specify:
; ExtrGraphHigh = size in pixels for height of thumbnail
; display of graphic when ExtrGraphThumbnail=Scaled
; default 96 pixels (one inch)
; ExtrGraphWide = size in pixels for width of thumbnail
; display of graphic when ExtrGraphThumbnail=Scaled
; default 96 pixels (one inch)
; ExtrGraphClass = name of CSS class to use in predefined
; ExtrGraphTarget = target attribute for window used by <$_extrthumb>
For the thumbnail, ExtrGraph* settings override any [Graph*] settings for width and height values. The ExtrGraph* settings do not conflict with (for example) a user-defined <$ExtrGraphHigh> macro, nor with predefined macro variable <$$_extrgraphhigh> or <$$_extrgraphwide>; all are in different Mif2Go internal namespaces.
If you want to use a reduced size for thumbnails, but not all images have the same aspect ratio, set only one of ExtrGraphHigh or ExtrGraphWide to the number of pixels you want, and set the other to 0 (zero).
If you want the thumbnail to be the size of the original image as it appears in FrameMaker, instead of specifying width and height values, set the following option:
; OrigSizedThumbnail = No (default)
; or Yes (use original Frame size for it)
When OrigSizedThumbnail=Yes, the size specified for the image in FrameMaker is used for the thumbnail instead of any size values specified with ExtrGraphHigh or ExtrGraphWide. This can be a reasonable way to present screenshots when you do not want the thumbnail to be any smaller, but you want users to have a way to make the screenshot legible. For a simpler way to accomplish the same objective, without using extracts, see §23.5.2 Replacing or surrounding a graphic with macro code.
Predefined macro <$_extrthumb>
For convenience you can use built-in macro <$_extrthumb>, which is defined as follows:
<p class="<$$_extrgraphclass>"><a href="<$$_extrfile>">
target="<$$_extrgraphtarget>"><img src="<$$_extrgraph>" \
<$_if ($$_extrgraphhigh > 0)> height="<$$_extrgraphhigh>"<$_endif>\
<$_if ($$_extrgraphwide > 0)> width="<$$_extrgraphwide>"<$_endif>\
alt="<$$_extrtitle>" /></a></p>
Using this macro, the settings you need for scaled thumbnails can be reduced to the following:
18.7.3.2.4 Including text with a thumbnail
Suppose you want to display, next to each thumbnail, text to indicate that a full-size version of the graphic is but a click away; for example, Click to enlarge.
If you use extraction to create the thumbnails (see §18.7.3.2.3 Providing scaled thumbnails), you can do something like the following to put the text next to the image:
<td><p class="thumbtext">Click to enlarge</p></td>
Add an entry for p.thumbtext to your CSS, perhaps in [CSSStartMacro] if you have Mif2Go generate CSS each time. You could also give the table a class, and define its properties in the CSS file.
> 18 Splitting and extracting files > 18.7 Customizing and replacing extracts > 18.7.3 Replacing extracts with links in the parent file > 18.7.3.2 Using thumbnails for links to illustrations in HTML