LibWizardry Workshop: Videos and Images

You can use images in Slides or in the Question Panel in several ways.

Slides: In the Content options, choose one of these:

• An Image - Upload an image to be the entire content of the slide.
• Website/URL - If you want to link to an image on the web rather than uploading it, enter the URL here. It will be the content of the slide.  
• Custom content (via rich text editor) - Here you can make an image part of the slide.  See WYSIWYG editor box below.

Question Panel

• Text Block opens a WYSIWYG editor that allows image input.

To Add an Image as the entire Slide Content, follow these steps.

1. Know where the slide file is on your computer.  (This method does not draw from your image library.)

2. If you are replacing an existing slide, "Clear File" before uploading the new slide.

3. Create or Edit a slide. Give it a name and choose "An Image" as the slide content. (Instructions continue below image.)

4. Drag the image file from your computer or click "Choose a File," navigate to the file on your computer and open the appropriate file.

5. To make the image fit the available space, set the width to 100%.

6. Add descriptive Alt Text to make the image friendly for the visually impaired.

7. Click "Save."

When you open the Rich Text Editor as a Slide or Question Panel Text Box, you get a WYSIWYG editor. (This is pronounced "Wizzy Wig" in the Biz.)

This allows you to create text content, hyperlinked text, and add images and tables.

Add images like this:

1. Before you start, know where the image file is on your computer.
2. Put your cursor where you want the image. (This can be changed later.)
3. Click on the Insert Image icon, as shown in the image below.
4.  You will get an Image Properties box that looks like the image below. (Ignore all that stuff in the preview.)

• If you know the URL of an image you want to link to, enter it here and skip to step 7.  (If this makes no sense to you, ignore it and click on Browse Server.)
• Otherwise, click on Browse Server.
• 

5. This will open the Image Manager Library as shown below. If you have uploaded images in another Springshare account, you will see all of your images here.

• You may choose one of these images (purple square) or upload a new image (red square).  
• To upload a new image, you will need to navigate to the location of the file on  your computer or drive as you would with an attachment, then click "Open."
• It may take some time to upload the file. 
• Find it in your library and click the "Reuse this image" icon (purple square).

6. Once you have uploaded and selected your image, you will return to the Image Properties box, but this time there will be content, like this:

  Let's walk through each line (color coded):

• URL is supplied after you upload the image. If you want to change the image, delete this URL and Browse the server again.
• Alternative Text is not required, but for accessibility, you should put a description that will tell someone who cannot see what the image shows.
• Width and Height are the size of the image in pixels.  You can change these numbers to increase or decrease the size of the image. (Note: Some fuzziness may occur.) 
  • To maintain the proportions of the image, make sure the Lock icon displays a closed lock. 
  • The curly arrow will revert the picture to its original size.
• Border - for no border, leave this blank. To put a thin black line, put a 1.  The larger the number, the thicker the border.  You cannot change the color of the border here.
• HSpace and VSpace. These create a margin of white space around the image so text or other images aren't too close to be visually pleasing.
• Alignment. 
  • Not set = The picture will be inline with the text, if there is any.
  • Left or Right - The image will be to the right of the text or the left of the text.

The image in this discussion is Aligned Left with a Border of 1 and HSpace 20.

7.  Ta Da! You have an image.  If it doesn't look right,  you can highlight the image, click the image icon and edit it to your heart's content.

1. Copy the URL (address) of the image.  This may be an existing photo in your Springshare image library or you can right-click and copy the image address from the source.  As we are modeling responsible image use, here is an example using a copyright-free (CC00) image:

2. When you create the slide, choose “Website/URL” as the slide content option.
3. Paste the image address and SAVE.

To embed a video in the Slide Display:

1.First locate the video you want to use. We are going to use a video from YouTube, but you may also use a video from Films on Demand or other source that gives you an embed code.

Click on the "Share" link, then click on "Embed."

2. Copy the embed code by clicking on the "copy" link or highlighting and copying the code.  The numbers underlined in blue are the size of the embedded video in pixels. You may choose to edit these later.

3. In LibWizard, choose "Embedded Media" as your Slide Content choice in the Slide Display, then paste the code you copied into the box.  Then SAVE!

4. Your video should now be embedded. If you are unhappy with the size, you may change the width and height in the code. (Make sure they are proportional to the original!)  Be aware that not all screens are the same size and it may be safest to leave it the original size while allowing the full screen option.

Advanced Fun Facts about the Editor

• Use the "Remove Format" icon (looks like Tx) when you've copy-and-pasted something and it looks wonky.  This will remove any pesky formatting it inherited from its home and you can then treat it as you wish.
• The Source button will allow you to edit in html code, if you know it.  If you're crafty, you can also use this to paste embed code or widgets in your text.
• Your pages will be more accessible and professional if you use Styles to change font sizes instead size and use Format to create headings and subheadings instead of just making headings big and bold.

Optimizing images can decrease fuzziness and speed up load time because the file size is smaller.

Just upload your image into the Web Resizer and choose how big or small you want the image to be.

Web Resizer