How Can I Get a Step Image To Appear Below the Step Instructions?

If you would like your images to appear below step instructions when you export HTML you need to make a slight modification to the HTML template you are using. This lesson will show you how.

Reveal Template

In the HTML Templates preferences pane right-click on the template you would like to modify. Select Reveal Template Folder from the contextual menu.

Edit index.html file

Now open the index.html file in your favorite text editor.

Update Configuration Section

In the configuration section change the step image position property to bottom.

Edit STEP Section

Locate the STEP section in the template. In the STEP section the %MEDIA:IMAGE% template variable appears before %STEP_INSTRUCTIONS%.

Edit the template so that %STEP:INSTRUCTIONS% appears before %MEDIA:IMAGE%.

Export Using Template

Now when you export using the template the step image will appear below the instructions text. Note that the GUI in the HTML preferences pane will not display "below" as an option. As long as you don't make any changes to the template image position using the GUI the value won't be changed from "bottom".