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".
darcy
How do I access the screen shown in the final image?
Trevor DeVore
@darcy: The final image is how the exported HTML looks in a web browser.
Heidi E
I cant find this functionality. Is it not available in the demo version of the application? (Also, I'm using Windows, not MacOs.)
Trevor DeVore
@Heidi: This functionality is present in the demo. Are you able to locate the HTML Templates preference pane (Edit > Preferences menu)?
Heidi E
Oh, that was it!! Thanks!!