Images and Video

You can add images and videos to two different zones on your page:

Within the main content area (where the page text is located)
In the right sidebar (like the tulip picture on this page)

They function slightly differently depending on which you choose: images in the sidebar, for example, open in a "lightbox" and allow the user to scroll through them, but images in the main content area of the page do not. The way you add them differs, as well. The instructions to add images and videos to the main content area are at the top of this page, and the instructions to add them to the sidebar are at the end.

That's Not Going to Work

Life may crush your dreams; adding images to your site shouldn't. To keep your hope alive, make sure your images will work before you try to add them. Every image must:

Be a valid file type: if your image is not a JPEG (or JPG) or PNG then save it as one of those. BMP, PSD, or other types of files won't work.
Have a valid name: the file name can't have spaces, periods, ampersands, or other special characters in it.
Be in a valid place: if your image is on a USB stick, external drive, or network location, save it to your desktop before you try to add it to your page.

Main Content Area - Images

Image Placement

To add an image to the body of the page, make sure the cursor is located where you want the image to be placed relative to the text you have on your page, and then use the image tool button located above the content editor:

The image will go wherever you have your cursor when you insert it. If it didn't go where you want, it's usually easiest to just delete it, make sure your cursor is in the correct place, and try to insert it again. You can also select the image, cut, and paste it, but the results in the editor are not always predictable when you do this.

Ghost in the Delete

No, you're not going crazy. Sometimes, deleting the space before or after the image will delete the image as well. If you're having trouble getting rid of extra spaces, try moving to the line above or below the image to make those changes.

Now You See It, Now You Don't

When you're in the edit view of your page it may look like there is the correct amount of space between your image and any text below it, but when you save/publish the page, the space disappears and the text is wedged up tight below your image. If this happens, just put your cursor at the start of the line of text, hit your spacebar, and then Enter. It will look like too much space in the editing view, but will look correct for visitors in the public view.

Of course, you'll only notice this if you're checking your pages in the public view after you publish them, which is why you should always double-check your changes.

Add an Image from Your Computer

To add a picture saved on your computer (or phone or tablet, if you're editing on a mobile device), use the Upload mode, which should be active by default. To select the image you can either click on Choose File, and select the picture you'd like to use or drag the image file directly onto the dialogue box (you can only use the drag & drop method for images saved on your computer, not images in documents or websites):

SchoolBundle will automatically resize your image, if needed. Note that dragging and dropping won't work with IE. But that's not a problem because you're using Chrome, anyways, right?

Add an Image from the Web

If you choose to use an image from the web (including the CBE Image Library or a couple of our favorite free and fully legal image sites, Unsplash or Pixabay), select the URL mode and enter the URL of the image (you can usually find this by right-clicking on the image you want to use and choosing "copy image address" or something similar, depending on your operating system and browser).

Most sites show a page of small thumbnail images for you to choose from (including the CBE Image Library). Make sure you don't use the URL of the small, low-resolution thumbnail image - click on it first to view the full-size version, and use that URL.

Don't use the URL from the thumbnail:

Click on it to get the full-sized version, and use that URL for your story:

Click OK to add the image to the page:

Edit an Image

Once you've added an image to your page, you can modify the alignment for it (left, right, or centre), add a title and caption, change the size, or make your image a link. Note that the editing function for images in the main content area is different than it is for images in the sidebar (there is no crop function for images in the main content area).

Click on the image to reveal the edit tools:

Hint: If you click on an image and the Edit box doesn't appear, try clicking on the Add Image tool button, close the box that comes up, and click on your image again. Usually, it will show the Edit box after you do this if it didn't before.

To resize the image, drag the square in the lower right-hand corner of the image.

To change the alignment or to add a caption, title, or link, click the Edit button in the middle of the image. You can delete an image this way as well (or by just selecting the image and using the delete key on your keyboard).

Main Content Area - Video

YouTube

Schools wishing to add videos to their website, must upload the video to their school's YouTube channel. Channels are set up through School Web Support. Please do not add these to personal YouTube accounts. If you are uncertain if your school has a channel, please email School Web Support and we are happy to help you.

Add a Video

To add a video to the main content area on your page, click the Video icon in the editing toolbar above the content section:

In the video dialogue window, add the video embed code (you can see more information about how to find the embed code is just below), and click Insert to add it to the page:

Hint: depending on your browser, it may work just to copy the Embed URL of the YouTube video directly into the content area - the page will recognize it and automatically show the video in your page with only one step!

Finding the Video Embed Code

You can find the video URL for YouTube videos by clicking Share on the video page. Don't copy the Share code, though: instead, click on Embed:

In the embed screen, uncheck "Show suggested videos when the video finishes" and then click Copy to copy the code to your clipboard:

If your doesn't show a checkbox, don't panic. YouTube doesn't change their interface as often as Facebook (who has changed theirs three times while I've typed this sentence), they do move things around, or take them out sometimes. If you don't have the checkbox, you can outsmart the computer and do it anyways. Here's how:

If you're embed text includes ?rel=0 after the code of the video, it means "play related videos" is off, like in the example above. If yours doesn't have that, you can just add it in before you put the embed code in your page. Make sure it's after the random-looking identifier for your video (SvxHR-cItQc in the screenshot above) and before the closing quotation marks.

Why not show related videos? The videos that YouTube decides are related may not be the ones that you think are related. For the Fuel For School video used in this example, the second related video the YouTube lists is the Calgary Catholic Teacher Recruitment Video 2014, which likely isn't related to your breakfast program fundraising. Not showing related videos keeps the view focused on the content in your page, rather than launching them on a YouTube journey.

Once you add it, this is how the video appear in your page (this is the actual video, not a screenshot, so you can click to watch and see how it actually displays in the page):

Remove a Video

You can delete a video that you've added to your page by selecting it and hitting Delete or Backspace on your keyboard. When you click on a video, even in edit mode, it will start playing, so use your mouse to select a space or empty line before or after the video, along with the video itself. This will allow you to select it, rather than just playing it.

Sidebar Area - Images

To add images to the sidebar (right-hand section of the page) from either your computer or an online source, use the image tool button located below the content editor:

Choose an Image

To add an image you have on your computer, click the Add Picture button and choose your computer in the Add Picture dialogue box, then browse to the picture on your computer and select it.

To add an image that's online (including in the CBE Image Library or Unsplash or Pixabay), choose From URL instead, type or paste in the full URL, and then click Preview to proceed (you must click Preview or the image won't be added to your page):

Caption an Image

Whether you are adding an image from your computer or from the internet, you need to include a caption. The caption should simply and clearly describe the image, and will be used to help make your website accessible to visually-impaired visitors.

When you're done, click Save to confirm that you would like to include this image.

Save an Image to Your Page

After you have selected and uploaded your image, added the caption and saved the image to the system, you will see your image included in the Add Picture dialogue box:

Click Save to add the picture to your page and exit the Add Picture wizard, or back to exit the Add Picture wizard without saving the image to your page.

After you have added a picture to your page, you will see it listed just below the content editor area of the page. You can remove it from your page by clicking the X, edit the picture by clicking the pencil icon.