Using Image Zoom in Templates

ScreenSteps provides the MEDIA:IMAGE (1) template section which is used to output the HTML (or other markup) for displaying an image.

As of version 2.0.3 you can add a MEDIA:IMAGE FULL-SIZE (1) section to your templates. When exporting, ScreenSteps will use this section (rather than MEDIA:IMAGE) whenever an image has to be reduced in size in order to to fit within the maximum media height and width for the template.

This new section has three additional variables that you can use: %fullsize_source%, %fullsize_width% and %fullsize_height%. They mimic the %source%, %width% and %height% variables in the MEDIA:IMAGE section but resolve to the values for the full-size image.

The default section included with ScreenSteps provides a zoom link (3) that will open the full-size image in a new browser window.

You can copy and paste the following section definition to help get you started in your own templates.

[-- START MEDIA:IMAGE FULL-SIZE --]
<div class="image">
<a href="%fullsize_source%" class="image" target="_blank"><img src="%source%" width="%width%" height="%height%"></a>
<div class="caption"><a href="%fullsize_source%" target="_blank">Zoom</a></div>
</div>
[-- END MEDIA:IMAGE FULL-SIZE --]