Images

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.

Select Wprksheet-S-140-Weekend-Meeting template

Here is an example:

<div class="thumbnailsContainer">
       <div class="thumbContainer">
               <span>CIG_IMG074.jpg</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</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</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.

CSS Classes

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)