​Important Notes for Images/Videos

  • Resize your images before uploading to a library. 
  • Free online options: PicMonkey, Fotor (see more details below) 
  • Typically, width should be 100%, not a fixed width,  so it flexes for mobile.
  • Images can be displayed as a part of a slideshow.  Details on how to insert a slideshow web part can be found in the Editing Page Instructions.
  • Videos can be added to a website by inserting embedded html code.  Details on how to do this can be found in the Editing Page Instructions.
  • Image information for school websites can be found on the Images for School Websites page.
  • Don't forget to publish images in the Site Collection Library (& others).  See details below.

Uploading Images

  1. Navigate to the image library of choice.  This is typically the library on the sub-site.
    • Click on GEAR>Site Content
    • Click on Images Folder

  2. Upload to the image folder (3 options)
    Option 1: Find the image on your computer (desktop or windows explorer), select it by clicking on your mouse and drag it over to the image library.  Release the mouse when the blue outline shows up and it says "Drop here..."

    Option 2: Click on "+ new document", Click on "Browse" button and navigate to where the file is located on your computer.  Select "OK" to upload and then select "Save" when the image pop-up comes up (use defaults)

    Option 3: Similar to Option 2 but use the top Ribbon and select "Upload Document" and the click on "Browse" button to find the image file.  Select "OK" and then "Save".

Publishing images

  1. Site collections libraries (and some others on school sites - refer to School Website Instructions) require that you publish items before they will appear on your site.   This can be done one at a time or there is also an option to "mass publish".
  2. To publish an invididual document or image
    • Navigate to your library and select the image/document by clicking on it
    • On the Files Tab (in upper right corner), click on "Check in"
    • When the pop up appears, select the "Major version (publish)" and click on "OK"

      Note that is there is no "Check In" button available and there's only a "Check Out" button (as shown below), this means that you have either already published the file or the item doesn not require publishing.

  3. To publish multiple items at one time (more difficult to do...)
    • Navigate to the Content and Structure view (Gear>Site Settings>Site Administration>Content and Structure)​
    • Navigate to the library you are working on
    • Select all items by checking the box at the far left, above all items and to the left of TYPE.  All items will be highlighted.
    • Actions>Publish>OK

Tools for Editing Images

There are many photo editing programs out there to use.  See below for additional options. Make use of the program that works for you whether you are using a Mac or PC.  If using a chromebook, there are many web-based online free editing programs that you can. 
TIP:  If editing on an iPhone, changes to the orientaiton of a photo will not save.

Resize images using Pixlr (Recommended)
  1. Go to https://pixlr.com and choose the editor option.
  2. Create a new file and make it the same size as the instructions say.
    Go to File > open image in the top left > navigate to the picture you want to resize > OK.
  3. When the picture opens in a new window, choose the Marquee tool on the left (left column, 2nd button down), select the entire picture, and copy it (edit>copy).
  4. Click the window with the new canvas, and paste (edit > paste).
  5. This is the point where you need to resize the image, so go to edit > free transform.
  6. Resize the image to fit on the canvas, and save it as a JPG with a high quality.

Crop photos using picmonkey (No longer Free) 
  1. Go to http://picmonkey.com​
  2. Click Edit a Photo
  3. Upload your photo:  Open>My Computer>Navigate to your photo and select it​
  4. Click CROP>Check Scale Photo
  5. Enter the exact dimensions you desire>This will create a frame that you can move around your photo to determine the area you want to include  (NOTE: If you are working with a large photo, you can make the frame larger by draggin the corner> Click APPLY
  6. Click SAVE>Save to my computer

​​Batch cropping staff photos

  1. Go to http://birme.net/ 
  2. On the bottom left click "Browse for Files" select the photos you want to crop (may have to do it in several batches) and click "Ok"
  3. On the right, make sure the "Resize and crop to dimensions" option is selected, and change the width and height to the correct dimensions.
  4. Make sure the "No auto-sizing" option is selected.
  5. On the bottom left click "save as .ZIP" and save that file to your computer


Additional tools to resize photos if needed:​

  • Canva. A free web-based photo editing tool, also an iPhone app. https://www.canva.com/
  • DrPic.  A free web-based tool to crop and resize images.  http://www.drpic.com/ 
  • MS Office (Picture Manager).  This program is part of the MS Office suite and included on all BVSD laptop and desktop computers.
  • Microsoft Windows Paint​