Managing Images and Files

Complexity Level: Basic

Overview

This page shows you how to add, find, and use images and files on your Springboard website. Pictures and files make your website more interesting and useful for visitors. You'll learn how to upload pictures, organize them into folders, and add them to your website pages.

Words used on this page

• Image Library: The place where all your website pictures are stored.
• Upload: The way you add new pictures or files from your computer to your website.
• Folder: A container that helps you organize your pictures and files.
• Gallery: A special way to show multiple pictures on your website.

When to Use This Feature

Use this section if you need to:

• Add new pictures to your website.
• Find pictures you've already uploaded.
• Organize your pictures into folders.
• Create picture galleries or slideshows.
• Upload documents like PDFs for visitors to download.

Step-by-Step Instructions

Opening Your Image Library

1. Click My Website, then click Images (under Libraries).

   

2. You will now see your Image Library with all your uploaded images.

   

Uploading Images

1. Navigate to your Image Library (follow the steps above).

2. Click the green Upload Your Images button in the top left corner.

   

3. A modal will open where you can select image files from your computer.

   

4. Click Select files on your computer to look through your computer folders, or drag and drop image files from an open folder on your computer to the modal. You can select multiple pictures by holding down the Ctrl key (or Command key on Mac) while clicking on each picture.

   

5. If you choose to drag and drop images into the modal, they will start uploading automatically. If you use the button to select images on your computer, click Open when you've selected your images to start the upload.

   

6. Update the Title for each image if desired. By default, each image will retain the file name from your computer.

7. Use the dropdown menu to choose a Folder for each image if desired. By default your images will be uploaded to the Root level, meaning they are not in a folder.

   

8. Click Finish Uploading. You will see a spinning icon while your images are uploading, and will then be returned to the Image Library.

   

Creating Image Folders

Folders help you keep your pictures organized, so you can easily find them when adding pictures to a page.

1. Navigate to your Image Library.

2. Click the green Add Folder button in the top left corner.

   

3. Enter a Title for your folder (for example, "Logos" or "Team Photos").

   

4. Click Save & Finish to create your folder, or use the arrow to click Save & Add Another.

   

5. Your new folder will now open automatically. You can upload images directly to this folder by clicking Upload Your Images, or you can follow the steps below to move existing images into your new folder.

   

Moving Images into Folders

1. Navigate to your Image Library.

2. Locate the images you want to move.

3. Check the box to the left of each image.

   

4. Once you have selected all of the images you would like to move, click Move Selected at the bottom of the page.

   

5. Use the dropdown menu to select a new folder for the selected items.

   

6. Click Save & Close.

   

7. You can now click the title of the folder to view your images.

Adding Pictures to Your Website Pages

1. Click My Website, then Website Content to navigate to your Site Structure.

2. Click the title of the page to which you would like to add an image.

   

3. Locate the Image content type in the left hand menu, under Popular.

4. Drag the Image content type to your preferred content location, and drop it into place.

   

5. You can add images to the page that already exist in your Image Library, or you can upload a new image:

   • If your image is already in the Image Library, click Select this image next to the image you would like to add to the page.

   • To upload a new image, click the green Upload Images button in the top left corner, then select your image on your computer and click Open. Update the Title for your image, and select a Folder for it to live in. Click Finish Uploading. Once your image has been uploaded, it will appear at the top of your image list. Click Select this image next to your new image to add it to the page.

6. Click Edit next to your new image to update the Image Info:

   • Content location: This will default to the content space in which you dropped the Image Content Type. Use the dropdown menu to pick a new content space if desired.

   • Content position: This will default to the position in which the Image Content Type was added. Use the dropdown menu to select a different position if necessary.

   • Title: If desired, enter a Title for your image. This title will display on your website.

   • Alternate text: Enter Alternate text for your image. This is a short sentence that describes the image, and will improve your website's accessibility.

   • Caption: If desired, enter a Caption for your image. This will display on your website.

   • Alignment: Update the Alignment if necessary. This is the placement of the image with respect to the text on the page. The default option will display the image based on the default settings for your website design. You can also choose to align the image Left, Right or Center.

   • Link: Use the dropdown menu if you would like to set a Link for your image. You can link your image to A page on another site, Another page on your site, A blog post on your site, An event on your site, A downloadable file, An email address, or A phone number.

   • Customize image display settings: If you would like to customize your image's display settings, toggle to Yes. Update the display settings as desired. By default, your image display settings are set to match your website's design by the Firespring team.

7. Click Save & Close.

Creating an Image Gallery

Image galleries allow you to display multiple images in a stylized gallery.

1. Locate the page to which you would like to add an image gallery.

2. Click the title of the page to edit the page.

3. Locate the Image Gallery content type in the left hand menu, under Popular.

4. Drag the Image Gallery content type to your preferred content location, and drop it into place.

5. Fill in the required Image Gallery Display Settings:

   • Content location: This will default to the content space in which you dropped the Image Gallery Content Type. Use the dropdown menu to pick a new content space if desired.

   • Content position: This will default to the position in which the Image Gallery Content Type was added. Use the dropdown menu to select a different position if necessary.

   • Title: Enter a Title for your image gallery. This title will not display on your website, and is for organizational purposes.

   • # of images to display per page: By default, your image gallery will display 12 images per page. You can update this number to display more or less per page. You can add more than the set number of images to your gallery, and it will automatically add page numbers and navigation arrows to your image gallery to make it easier to view.

   • Max # of columns: Select your preferred number of columns for your image gallery.

   • Image gallery text options: Select what information displays in your image gallery by checking or unchecking the boxes next to the information you wish to display.

   • Open gallery items in a lightbox: By default, your images when clicked will open in a lightbox, or floating modal, on top of the page content. Select your Lightbox text options by checking or unchecking the box next to the options you would like to enable. To disable the lightbox setting, toggle to No.

6. Click Save & Close. Your Image Gallery has now been added to the page.

7. Click Add Image Gallery Item to select images for your gallery:

   • Check the box next to images that already exist in your image library, then click Use Selected Images at the bottom of the screen.

   • Click the green Upload Images button to add images from your computer. Select your images on your computer and click Open. Update the Title for your images, and select a Folder for it to live in. Click Finish Uploading. Once your images have been uploaded, they will appear at the top of your images list. Check the box next to the images, then click Use Selected Images at the bottom of the screen.

8. Your images will now appear in your Image Gallery. Click the title of each image to update the image info:

   • Title: Enter a Title for each image. This title will display based on your chosen settings for your image gallery.

   • Alternate text: Enter Alternate text for each image. This is a short sentence that describes the image, and will improve your website's accessibility.

   • Caption: If desired, enter a Caption for each image. This will display based on your chosen settings for your image gallery.

   • Action text: If you are linking an image, enter action text that will act as a clickable link.

   • Link: Use the dropdown menu if you would like to set a Link for your image. You can link your image to A page on another site, Another page on your site, A blog post on your site, An event on your site, A downloadable file, An email address, or A phone number.

9. Click Save & Close.

Creating an Image Slideshow

Image slideshows allow you to display multiple images in a stylized slideshow.

1. Locate the page to which you would like to add an image gallery.

2. Click the title of the page to edit the page.

3. Locate the Image Slideshow content type in the left hand menu, under Popular.

4. Drag the Image Slideshow content type to your preferred content location, and drop it into place.

5. Fill in the required Image Slideshow Display Settings:

   • Content location: This will default to the content space in which you dropped the Image Slideshow Content Type. Use the dropdown menu to pick a new content space if desired.

   • Content position: This will default to the position in which the Image Slideshow Content Type was added. Use the dropdown menu to select a different position if necessary.

   • Title: Enter a Title for your image slideshow. This title will not display on your website, and is for organizational purposes.

   • Enable autoplay: By default, your image slideshow will be set to automatically play through its slides. Users can still manually advance the slideshow if they would like, too. Use the dropdown menu to select how long each slide is visible. Toggle to No if you would like to disable autoplay.

   • Image slideshow text options: Select what information displays in your image slideshow by checking or unchecking the boxes next to the information you wish to display.

   • Image slideshow controls: Select what controls display for your image slideshow by checking or unchecking the boxes next to the controls.

   • Transition speed: Select your preferred transition speed.

   • Transition effect: Select your preferred transition effect.

6. Click Save & Close. Your Image Slideshow has now been added to the page.

7. Click Add Image Slideshow Item to select images for your slideshow:

   • Check the box next to images that already exist in your image library, then click Use Selected Images at the bottom of the screen.

   • Click the green Upload Images button to add images from your computer. Select your images on your computer and click Open. Update the Title for your images, and select a Folder for it to live in. Click Finish Uploading. Once your images have been uploaded, they will appear at the top of your images list. Check the box next to the images, then click Use Selected Images at the bottom of the screen.

8. Your images will now appear in your Image Slideshow. Click the title of each image to update the image info:

   • Title: Enter a Title for each image. This title will display based on your chosen settings for your image slideshow.

   • Alternate text: Enter Alternate text for each image. This is a short sentence that describes the image, and will improve your website's accessibility.

   • Caption: If desired, enter a Caption for each image. This will display based on your chosen settings for your image slideshow.

   • Action text: If you are linking an image, enter action text that will act as a clickable link.

   • Link: Use the dropdown menu if you would like to set a Link for your image. You can link your image to A page on another site, Another page on your site, A blog post on your site, An event on your site, A downloadable file, An email address, or A phone number.

9. Click Save & Close.

Uploading and Sharing Files

In your Springboard, you can upload and share files, or documents, on your website using the Documents Library.

1. Click My Website, then click Documents (under Libraries).

2. Click the green Upload Documents button in the top left corner.

   

3. Click Select files on your computer to look through your computer folders, or drag and drop document files from an open folder on your computer to the modal. You can select multiple files by holding down the Ctrl key (or Command key on Mac) while clicking on each picture.

   

4. If you choose to drag and drop files into the modal, they will start uploading automatically. If you use the button to select files on your computer, click Open when you've selected your documents to start the upload.

5. Update the Title for each document if desired. By default, each document will retain the file name from your computer.

6. Use the dropdown menu to choose a Folder for each document if desired. By default your documents will be uploaded to the Root level, meaning they are not in a folder.

7. Click Finish Uploading. You will see a spinning icon while your files are uploading, and will then be returned to the Document Library.

8. You can now link to your document when adding content to a page by choosing To a downloadable file in the Link setting dropdown. You'll see this setting when adding multiple different types of content, including Images, Image Galleries or Slideshows, and Buttons.

   

Tips & Helpful Guidance

• Picture sizes: For best results, resize large pictures before uploading them. Pictures wider than 2000 pixels might slow down your website.

• Picture names: Give your pictures clear names before uploading them. Names like "team-photo.jpg" are better than "IMG_12345.jpg".

• Folders: Create folders with specific names like "Team Photos" or "Product Images" to keep your pictures organized.

• File types: The Springboard works best with these image types:

  • JPG/JPEG: Best for photographs and colorful images

  • PNG: Best for logos and images that need transparent backgrounds

  • GIF: Best for simple animations

  • SVG: Best for logos and icons that need to be resized without losing quality

• Document types: For documents, you can upload:

  • PDF: Best for most documents

  • DOC/DOCX: Microsoft Word documents

  • XLS/XLSX: Microsoft Excel spreadsheets

  • PPT/PPTX: Microsoft PowerPoint presentations

Troubleshooting

Problem: Your picture won't upload

Solution: Check that your picture isn't too large. Try making it smaller or saving it in a different format (like JPG). Pictures should be less than 10MB in size.

Problem: You can't find a picture you uploaded

Solution:

1. Use the search box at the top of the Image Library to search by name.

2. Click Title or Created above your images to sort alphabetically or by date added.

3. Check if the picture was added in a folder by clicking on the different folder names.

Problem: Your picture looks blurry on your website

Solution: You might be using a small picture and stretching it too large. Try uploading a larger, higher-quality version of the picture.

Problem: You can't delete a picture

Solution: The picture might be used on a page of your website. Find and remove the picture from all pages first, then try deleting it again. You can check to see if an image is being used on the pages of your website by clicking the gear icon next to the image, then View Uses. Click Edit to open and edit the page in a new tab.

Related Resources

• Adding and Editing Pages
• Organizing Your Content
• Managing Print Services