Speakers

Overview

The speakers or faculty page can be one of the most difficult to maintain. Experience with basic html and patience are required. The goal of this code is to format the list in a legible and stylish manor. Also included is the ability to add short biographies without creating separate pages.

It is highly recomended that you use an external text editing program. On windows, Notepad will work fine, but you will benefit from a proper HTML editing program such as VS-Code from Microsoft. On Mac you should use something like TextMate, VS-Code.

Notice how important indentation is to following the structure of the HTML and making sure you've properly closed all the tags.

Microsite v3 Update: You need to add the shortcode [showspeakerbios] to the page in order to load the resources required for the biography popup.

Usage

Basic Example (No Biography or Photograph)

<div class="speakers">
    <div class="speaker">       
        <p><strong>Richelle Kruisselbrink</strong> <small>MD FRCPC</small><br>
        <small>Assistant Professor, McMaster University<br>
        Staff Physician, Department of Anesthesiology<br>
        Grand River Hospital/St Mary’s General Hospital, Kitchener-Waterloo</small></p>
    </div>
    <div class="speaker">       
        <p><strong>Asad Siddiqui</strong> <small>BHSc MD M. Ed FRCPC</small><br>
        <small>Assistant Professor<br>
        Pediatric Anesthesiology Fellow<br>
        The Hospital for Sick Children</small></p>
    </div>
    <div class="speaker">
        <p><strong>Name</strong> <small>Credentials</small><br>
        <small>Affiliations<br>
        On multiple lines</small></p>
    </div>
</div>

Example with Biography (No Photograph)

<div class="speakers">
    <div class="speaker">
        <p><strong>Name</strong> <small>Credentials</small><br>
        <small>Affiliations<br>
        On multiple lines</small><br>
        <button class="btn btn-biography">Biography</button></p>
        <div class="biography">
            <p>This is the full text of the biography.</p>
        </div>
    </div>
</div>

Example with Biography and Photograph

Requirements:

Images must be square.
Suggested size is 350px by 350px
Resolution should be 110ppi/dpi

<div class="speakers">
    <div class="speaker">
        <img src="url_to_image_jpg" alt="Name">
        <p><strong>Name</strong> <small>Credentials</small><br>
        <small>Affiliations<br>
        On multiple lines</small><br>
        <button class="btn btn-biography">Biography</button></p>
        <div class="biography">
            <p>This is the full text of the biography.</p>
        </div>
    </div>
</div>

Code Snippets

As indicated above, Microsite 3 requires a shortcode to enable the biography popup:

[showspeakerbios]

Sometimes all you need is to add the button, use the code below:

<br>
<button class="btn btn-biography">Biography</button>

If there is no photograph for the speaker add a placeholder:

<img src="https://www.cpd.utoronto.ca/images/NoPhoto.png" alt="">

Overview​

Usage​

Basic Example (No Biography or Photograph)​

Example with Biography (No Photograph)​

Example with Biography and Photograph​

Code Snippets​