Adding a new bio image to team gallery

1. Open the team gallery from the BIO PHOTOS folder that the new bio is going in

2. Add the image by clicking to upload or dragging it in with the others

3. Drag the image to re-arrange the order of the bios

4. Double click the new image to edit it

5. If you mouseover the image, a small circle should appear. Move that so it is directly over the persons face.

6. Add the name and job title in the first space next to the photo using this format

<b>Firstname Lastname</b><br>Job Title

7. Add the category FOR BIO PAGE so it will appear on the Staff bio page

8. Click the OPTIONS tab at the top and in the CLICKTHROUGH URL box add this code:

#" data-featherlight=“#name

9. Replace name after the # with the first name and first letter of their last name (ex. John Smith would be johns)

10. If two people have the same first name and first letter of last name, add a “2” (ex. johns2)

11. Click SAVE to close the window. The image should now be added on the Staff Bio page

Adding new bio text

Now this is where is gets a little technical. You have to be really careful what you edit here as a simple error in the code will break the whole thing.

1. Go to the STAFF BIO page and click to EDIT the page. 

2. Above each team title there is a blank box that when you mouseover should say CODE. Click to edit this.

3. An individual bio is set up like this:

<div id=“namecode">
<h2>Job Title</h2>
<p><img src="imageurl">Bio Text</p>

4. Replace “namecode” with the name combo you created for the bio image (ex: johns)

5. The first and last name (capitalized) should go between the <h1> and </h1> tags

6. The job title (also capitalized) should go between the <h2> and </h2> tags

7. The bio text should go after the <scr="..."> code and end with the </p> tag

8. If the bio is more than one paragraph, you will need to put </p><p> in between each paragraph

9. SAVE everything when you are done

Adding the image for the bio popup

To add the image to the pop up you will need to get the url for the image you want to use. 

1. Go to the team gallery where you added the original bio image

2. If you want to use an alternate image, like a drawing, you can upload it to the gallery and leave it as is

3. Find the image in the main window to the right and right click to OPEN IMAGE IN A NEW TAB (or window). If possible, this is done best in a different browser where you are not logged in (it also saves all the navigating back and forth between pages).


4. Select the URL from the address bar and COPY it

5. Go back to the staff bio page and go back to editing the code block

6. PASTE the link to the image in between the QUOTES ("") after <img src= so it looks like this:

<p><img src="IMAGE URL HERE">Bio Text Here</p>

7. After pasting the code, remove the “?” and any text after it from the url


adding a video to a bio

1. Go to the YouTube or Vimeo page for the video you want to add. 

2. For YouTube, select SHARE under the video, then EMBED and COPY the code

3. For Vimeo, click the SHARE icon in the video and then COPY the EMBED code

4. Find the bio you want to edit from within the proper code block

5. PASTE the video after the last </p> tag for that bio but before the </div> tag

6. You can adjust the size of the video by editing the width property in the embed code