msa advance mwb weekend
The images that you drag and drop onto the Notes and Images window is converted into a HTML snippet.
This HTML is designed to work with the "Worksheet-S-140-Weekend Meeting" from the Styles list to show the media as thumbnails in a grid.
Here is an example:
| <div class="thumbnailsContainer"> <div class="thumbContainer"> <span> CIG_IMG074.jpg#8202;</span> <div class="thumb"> <img src="D:\My Photos\2018-07-19 The Wild Place Project\CIG_IMG074.jpg"/> </div> </div> <div class="thumbContainer"> <span> CIG_IMG088.jpg#8202;</span> <div class="thumb"> <img src="D:\My Photos\2018-07-19 The Wild Place Project\CIG_IMG088.jpg"/> </div> </div> <div class="thumbContainer"> <span> CIG_IMG113.jpg#8202;</span> <div class="thumb"> <img src="D:\My Photos\2018-07-19 The Wild Place Project\CIG_IMG113.jpg"/> </div> </div> </div> |
|---|
If you are comfortable with editing HTML code then you can customize the HTML as you see fit.
The HTML snippet uses CSS classes to help make it easier for adjusting the look and feel.
Here is a breakdown of the CSS classes and elements:
| thumbnailsContainer | Main container for the grid of image thumbnails |
|---|---|
| thumbContainer | Container for the image thumbnail and caption |
| thumbContainer span | Image thumbnail caption |
| thumb | Container for the image thumbnail |
| thumb img | Image thumbnail |
| thumb img:hover | Image thumbnail (when mouse hover over) |