Skip to main content
Feature Guides

Images and Videos

Images and Videos are critical components of any webpage. They add uniqueness, power, and creativity that fancy text or organization can never do. Importing videos and images can, however, have more settings than one realizes and it is important to make sure lots of the data is filled out and edited while adding them to the BYU site.

Images

General image guidelines

  • Upload the largest image available. Brightspot will take care of the cropping and resizing for different contexts.
  • Shared images appear in search and are available to any page. One-off images appear only on a single page and nowhere else.
  • Make sure to include short, descriptive Alt Text for each image to meet accessibility guidelines. You may want to include the words "Image of" at the beginning, since screen readers don't always indicate that the text refers to an image.

Add a new image

  1. Go to the dashboard
  2. Drag an image to the Upload panel, OR click the select files link. You can add multiple files.
  3. Once the window says Your files are ready for upload, click the Upload button
  4. Click on a newly uploaded image in the search window that appears after upload is complete
  5. Add or edit the metadata
    A list of all the settings of an image
    • Title - default is the file name. Change this to a title that will help you identify the image when you're searching
    • File - should show your image. If you want to update the image, change Keep Existing to New Upload and add your new image. If you want to edit the focus or sizes of this image, click the Edit link.
    • Alt Text - Used for accessibility (such as screen readers used by people with low or no vision). This field has a default value of the file name, but that's not usually helpful. Update this to something short but descriptive.
    • Caption - Can be shown with the image in rich text context
    • Credit - Can be shown with the image in rich text context
    • Source, Copyright Notice, Date Taken, etc - metadata that does not appear publicly
  6. If needed, use the tabs across the top to edit the metadata, location or other overrides.
  7. Click the Save button in the top right to save your image in Brightspot

Edit an image's focus or cropping

  1. If you're not already there, go to the image in Brightspot by clicking on the image's title in the dashboard or in the search window.
  2. To change the focus of the image, click anywhere on the image preview below the dropdown that says Keep Existing. When you click, a small white circle will appear and will set that spot as the new focal point for the image.
  3. To edit or change the image size, click on the Paintbrush box in the top right corner of the image preview below the dropdown that says Keep Existing. This will open the Image Editing window.
  4. The Edit tab will be opened by default. Here, you can perform basic edit functions (such as flipping an image horizontally).
  5. To view and edit any of the cropped versions of the image, click on the Sizes tab. To edit a size, click the thumbnail in the right sidebar. The image will appear on the left, with a window indicating the visible area of the image. Drag the corner handles of the window to change the visible area.
  6. When you're finished editing, click the Done button in the top right corner.

Videos

Adding videos to your page is a lot more straightforward.

Add a New Video

  1. Go to the dashboard
  2. Drag an image to the Upload panel, OR click the select files link. You can add multiple files.
  3. Once the window says Your files are ready for upload, click the Upload button
  4. Click on a newly uploaded video in the search window that appears after the upload is complete or click upload and edit the metadata.

Adding a Video to a Page

Screenshot of a list of Video options

When you are adding a video to the site, without having uploaded it first, it will give you the following three options to use.

Brightcove: In order to use this option you will need to have a Brightcove account and have your videos uploaded and edited with them.

HTML5: This is where you can upload or add your own video to the site. Once selected, it will give you a dropdown to Add Video and a video can be uploaded or selected from Brightspot.

YouTube(URL): This does not mean YouTube specifically but any URL address on the internet with a video. However, it is recommended that a personal video is uploaded instead, as it flows better with the site.

Related Training

data-content-type="oneOffPage"

How to Show/Hide "Photo by"

Add or remove the credit text in photos.
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText= overrideTextAlignment=
data-content-type="oneOffPage"

6. Add an Image While Editing

If you're in the middle of editing a page you don't want to go back to the dashboard to add an image before you can use it in your page. Brightspot has you covered.
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText= overrideTextAlignment=
data-content-type="oneOffPage"

4. Add an Image

Get general image guidelines, add an image (with relevant metadata) to the shared image library, and edit an image's focus or cropping.
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText= overrideTextAlignment=
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText=

Questions & Answers

data-content-type="article"
Q&A

What video formats are supported by Brightspot?

October 12, 2020 05:25 PM
Brightspot allows the direct upload of videos from Brightcove, Youtube, or HTML5. When creating a video within Brightspot, you must select the video provider as one of those three options before providing the link or uploading the video file.
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText= overrideTextAlignment=
data-content-type="article"
Q&A

How can I upload large videos to Brightspot?

October 12, 2020 05:24 PM
There is no defined file size limit on Brightspot, but large videos can take a long time to upload. One option to streamline the process is to download a program such as Handbrake (available for free) to compress your videos into smaller files. Set the compression to 1280*720 so that your videos are still saved with optimal website viewing quality. This smaller file size will make them more manageable for upload to Brightspot.
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText= overrideTextAlignment=
data-content-type="article"
Q&A

What is the limit on file size when uploading videos to Brightspot?

October 12, 2020 05:23 PM
There is no limit on file size when uploading onto Brightspot. Larger file sizes take longer to upload, but videos can be compressed beforehand to ease the process.
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText= overrideTextAlignment=
data-content-type="article"
Q&A

How do I embed videos in the lead of a page?

October 12, 2020 05:21 PM
Click the plus button located beneath the Lead. Select the Misc category of content or scroll to the bottom of the page to select Video. Then, upload the video of choice and it will be displayed in the Lead of your webpage.
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText= overrideTextAlignment=
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText=