Intermediate Skills‎ > ‎Insert‎ > ‎

Photo-Videos

For both photos and videos it is easiest to work with files that are already available within your Google services Drive (your own file or shared with you), Photos/PicasaWeb Albums and YouTube.

Photos

Sites can use photos from 4 sources:
  • Photos / Google+ Photos / PicasaWeb Albums
  • Drive
  • Attached to Site Page
  • Images Elsewhere on the Web

With options, here are some considerations for making a choice:
  • Photos / Google + Photos / PicasaWeb Albums - is the preferred photo repository for personal photo management.
    • If you're working with many of your own photos and also want slideshows this is a good choice. *
    • When embedding these photos Google sends the right size image to the browser resulting in faster page loading.
    • Drawback - when editing the site, you only have access to your own photos/albums.  There's no easy way to use the Google Site tools to integrate a photo shared with you.  (TBD - however with photos now visible in Google Drive, perhaps there are improved sharing options)
    • Note: Google continues to evolve its photo services, originally PicasaWeb Albums, then Photos within Google+, and now Photos service (separated from Google+).  Features and functions available to Google Sites changes periodically. 
      • Initial integration with PicasaWeb Albums worked well (sharing permissions, slideshows with captions...)
      • When Google+ Photos and the Photos service were rolled out, the PicasaWeb interface remained operational, co-existing with a common repository of photo files.  
      • Google+ added a curve ball, but most integration to PicasaWeb features continued working, the Google+ sharing was different, but could continue to use PicasaWeb.google.com service to prepare images for sites use.
      • In summer 2015 images in the photos services became visible in Google Drive.  TBD - how does this alter for prior differences between the behavior of embedded images using the two different methods.
      • PicasaWeb Albums services discontinuation (*) - In February 2016, Google announced that it will discontinue PicasaWeb Albums service as of 2016-05-01.  Existing albums and images will remain, but some capabilities will be lost.  This may impact the ability to embed slide shows since they rely upon PicasaWeb URLs.  This situation is currently in transition, and I hope Google will provide a viable new mechanism for embedding slideshows in to sites.  For more info visit:  picasa.google.com  and googlephotos.blogspot.com.TBD - continue tracking.
      • Drive - using Drive to store photos for use in a Google Sites is effective when sharing files.
        • Both you and other people can place files into Drive, and so long as the images are shared with you, you can insert them into a web page.
        • Drawback - these images may load slower when a web page is accessed in a browser.  The entire file is sent to the browser (ever if it is far higher resolution than needed).
      • Attached to Site Page - this is effective when you have a limited number of photos, and don't already store them in a cloud-based repository.  
        • Note the maximum storage capacity of a Google Site is 100MB (as recently as June 2015) - attached files are part of the site, while images in PicasaWeb/Photos or Drive are not.
      • Images elsewhere on the web - if you have the URL for an image that exists on the web, the image can be inserted into a page.
        • Copyright and permission - you should have permission from the owner of the host site and the copyright holder that you can reference their images to include in your website.
          • First issue - copyright law
          • Second issue - by referencing images from their site into your pages, when someone loads your webpage it loads the images from the source site, creating a small load on the source web server.
        • The image could disappear at any time. The webmaster of the other site could change their site at any time (without any knowledge of or regard for you - unless you happen control the source site too) leaving you with a 'broken URL' that can't load the desired image.
        • Just because you can (technically) do something doesn't mean that you should do it.  You might not have permission, and this approach might not save you work in the long run if the image disappears from their site, breaking your page.

      Steps to Embed

      All use a similar process for all:
      1. Use command:  Edit -> Insert -> ...
      2. Use the dialog box to select a photo
      3. Use the layout controls to position the object on the page.
      4. Finally, inserting images also prepares a link so that clicking on the image will take the visitor to the images source (into PicasaWeb, into Drive viewer, or viewing the attached image via its URL in the browser).  If you don't want the link, remove it.

      PicasaWeb Albums / Photos

      • Use command:  Edit -> Insert -> Google -> Google+ -> Photo (or Photo Album for Slideshow)

      Drive

      • Use command:  Edit -> Insert -> Google -> Drive -> Image 

      Attached to Site Page

      • Use command:  Edit -> Insert -> Common -> Image 
      • Click 'Upload Images' and select the files on your computer.  It gets uploaded and attached to this page of the site.

      Images Elsewhere on the Web

      • First, get the URL for the source image
        • typically when viewing the source page containing the image, you can 'right-click' on the image and select 'Copy Image URL'
        • occasionally you need to use your browser's 'view source' mode and dig around the HTML to find the image URL.
      • Use command:  Edit -> Insert -> Common -> Image 
      • Click 'Web address URL' and complete the dialog box.

      Videos

      Sites can easily embed videos from two sources:
      • Drive
      • YouTube

      Steps to Embed

      We start assuming the video are already loaded into Drive or YouTube, and that the file has suitable viewing permissions for your site audience.

      Drive

      • Use command:  Edit -> Insert -> Google -> Drive -> Video
      • Use the dialog box to select from your videos, or enter a URL if the desired video does not appear.
      • In the next dialog, set the properties as desired (size, title, etc.)
      • Finally use the layout controls to position the object on the page.

      YouTube

      • Go to YouTube and get the URL for the video
      • Use command:  Edit -> Insert -> Google -> YouTube
      • Use the dialog box to enter the URL and set other properties (size, title, etc.) as desired.
      • Finally use the layout controls to position the object on the page
      Examples are available on the Examples/Photo-Videos page


      Next