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

Can I use images with custom HTML from the Brightspot server?

October 12, 2020 05:20 PM
If you want the original image address in Brightspot to add to custom HTML, you can find the URL of the original by editing it. Open the uploaded image, select “Edit,” and “View Original.” Keep in mind this won't update if you upload a new version of the image. Alternatively, you could also add the image as an Attachment and then create a custom permalink that always points to the latest version by adding a URL.
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText= overrideTextAlignment=
data-content-type="article"
Q&A

How do I upload a PNG to Brightspot without a background?

October 12, 2020 05:19 PM
Brightspot is currently set with a default gray background behind images in order to display captions and photo credits. This can be disabled with CSS. Images can also be uploaded without a background using a SVG format and embedding the image link using HTML. Please contact the migration team for assistance as needed
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText= overrideTextAlignment=
data-content-type="article"
Q&A

How do I keep the alt text and captions from original images in a mass import?

October 12, 2020 05:17 PM
In a mass import, alt text and captions can be preserved if they are saved in the metadata of an image. Certain platforms include this data from uploaded pictures, so when migrating the content to your new site in Brightspot be sure to check!
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText= overrideTextAlignment=
data-content-type="article"
Q&A

How do I create image links?

October 12, 2020 05:12 PM
Image links cannot be created in the same manner as their text counterparts. However, by adding an “Image Only” Content Promo users can create an internal or external linked image. Using the “Add Module” button in the Rich Text menu, users can also embed an “Image Only” Content Promo within a body of text. The “Add Module” button indicated in the image allows users to select their preferred module to add to the Rich Text. In this case, select “Promo” from the drop down and fill in the desired link and image. Under Promo Style, select an “Image Only” option from the Template dropdown so that your image link appears as desired.
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText= overrideTextAlignment=
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText=