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. It is good practice 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 shared image

1. Go to the dashboard
2. Drag an image to the Upload panel, or click the select files link. Multiple files can be added simultaneously.
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 the upload is complete.
5. Add or edit the metadata:
   

   

   • Title - default is the file name. Change this to a title that will help identify the image when searching for it.
   • File - should show the image. If updating the image, change Keep Existing to New Upload and add the new image. 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 when placed in a rich text module.
   • Credit - Can be shown with the image when placed in a rich text module.
   • 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 Publish button in the top right to save the image in Brightspot.

Replace an Image

After an image has been added, it is sometimes necessary to replace it. Either all instances of the image can be replaced, or a singular instance can be replaced.

• Replace a Single Image: Go to the page or article where the image is located, and click on it to open the Edit Image window. Click on the image again and choose one of the already uploaded images, or, if it is a one-off image, switch it the dropdown from Keep Existing to Upload New, and upload the new image.
• Replace All Instances: Search for the image in the search bar at the top of Brightspot, and open up it's editor page. Under File, switch the dropdown from Keep Existing to Upload New, and upload the new image. Click Publish to complete the change.

Upload an Image

Edit an image's focus or cropping

Brightspot has preset dimensions for images and automatically crops them around their focus point when they are placed onto a page. If the image needs to be cropped in a certain way, it is best to do so outside of Brightspot, before uploading the image (or by uploading a cropped copy of the image to use instead). Use the following steps to change the focus point that Brightspot automatically crops around:

1. Go to the image in Brightspot by clicking on the image's title in the dashboard or in the search window.
2. Click anywhere on the image preview below the dropdown that says Keep Existing. After clicking, a small white circle will appear and will set that spot as the new focal point for the image.
3. Click Publish in the top-right corner to save the changes

Brightspot's automatic image cropping can also be manually adjusted for certain image types (i.e., when the image is used as a promo, or placed in a list). To make the adjustment, follow these steps:

1. Go to the image in Brightspot by clicking on the image's title in the dashboard or in the search window
2. 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
3. The Edit tab will be opened by default. Here, basic edit functions can be performed, such as flipping an image or adding a color filter
4. To view and edit any of the cropped versions of the image, click on the Sizes tab. To edit a size, click the desired image type in the left sidebar. The image will appear on the right, with a window indicating the visible area of the image. Drag the corner handles of the window to change the visible area
5. After editing, click the Done button in the bottom-left corner
6. To save the changes, click Publish in the top-right corner

Place an Image on a Page

Videos

Adding videos to the page is more straightforward.

Upload a New Video

This method only works for videos already stored on the computer. For more options, see the heading Add a Video from the Internet (below).

1. Go to the dashboard.
2. Drag video to the Upload panel, OR click the select files link. Multiple videos can be added simultaneously.
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 to adjust video settings.
5. To save the changes, click Publish in the top-right corner

Add a Video from the Internet

To add a video from Brightcove, YouTube, or another link on the internet,

1. Click the + sign at the top of the editor and choose Video
2. Select the Provider. The following three options are given:
   

   

   • Brightcove: To use this option, it is necessary to have a Brightcove account and have the videos uploaded and edited with it.
   • HTML5: This is where a video can be uploaded to the site from the computer. Once selected, it will give a dropdown to Add Video and a new video can be uploaded or selected from Brightspot. The videos should be in .mp4 format, and for best results, the resolution should be set to 1280 × 720 px. Once chosen, click Choose to upload the video.
   • 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 (HTML5) video is uploaded instead, as it flows better with the site. Once chosen, paste the URL of the page where the video is located
3. Add a Title under the Headline to assist in locating the video
4. Click Publish

Adding a Video to a Page

If the video is not being added to the Lead of a page, it is necessary to add it inside of a Rich Text module:

1. Navigate to the page where the video should appear
2. Go to the Content section and click + Add Module
3. Choose Rich Text
4. Inside the Rich Text module, click the video icon
   

   

5. Under Video, click Required and choose the video to add
6. To change the thumbnail:
   
   1. Click the pencil icon next to the name of the image
   2. Go to the Overrides tab
   3. Under Thumbnail, change from None to Shared Image or One Off Image and choose the thumbnail
7. Open the Enhancement Styles dropdown to alter alignment and size
8. Click Save and Close
9. Publish changes made to the page