This is an example of what the Weekend Worksheet looks like when you use Print Preview in the Meeting Editor:

Weekend Sheet — Print Preview

The Weekend Meeting window was set up like this for the above worksheet to be displayed:

Weekend Meeting Editor window

Preparing the Worksheet Worksheet is self-explanatory with the exception of the images.


Adding Images to the Worksheet

It is very easy to add images to the worksheet. It is as simple as dragging and dropping the images from File Explorer onto the Notes and Images pop-up window:

Weekend Meeting window — Drag and Drop Media

As mentioned on the window, you can drag and drop the following types of images onto the window:

  • BMP
  • GIF
  • JPG, JPEG
  • PNG
  • TIF, TIFF

Notes IconDon't worry if you select other types of files at the same time. They will be ignored.

Image Orientation

You may have noticed a difference in image orientation in the above snapshots:

Image Orientation

This happens for two related reasons:

  1. The image was taken with a digital camera and uses EXIF Orientation information in the photo.
  2. The Meeting Editor internal preview can't cater for EXIF Orientation because it uses older web browser technology under the hood (specifically Internet Explorer version 7).

But, don't worry if this happens, because you can use the Preview in Browser feature to display the worksheet in a modern browser, like Microsoft Edge, and all will be fine:

Image Orientation — Preview in Browser

Notes IconMeeting Schedule Assistant will eventually get updated to use the new Microsoft Edge WebView2 browser control and this issue will be obsolete. But this control is still being actively developed by Microsoft and there are a small handful f features that need to be addressed before we can properly migrate to this modern browser control. What this space!

Advanced Customization

The images that you and and drop onto the window is converted into a HTML snippet. This HTML is designed to work with the default template to show the media as thumbnails in a grid.

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. But don't worry if this all sounds too complicated because you don't need to know HTML and it as-is.

CSS Classes

The HTML snippet uses CSS classes to help make it easier for adjusting the look and feel.

Notes IconIt is assumed that you already know how to copy the existing template files and are comfortable with customizing them to meet your needs.

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)