Images

Click a graphic to enlarge it.

IMAGES

An image increases the attractiveness of a page or post and is more engaging to the reader. But the image needs to be relevant. So if I don't have a photograph to go with a page or post, I search the internet for something generic but appropriate. Having an image is especially important for news posts, since that will highlight each post in the post preview box on the site homepage, bringing attention to an item.

Inserting images

  1. Insert imagePut the page or post in edit mode (for something you've already created, view the page or post and click the pencil icon at the upper right).
  2. Click where you want the image to appear in the post to position the cursor there. Then open the Insert menu and pick Image.
  3. Click the Upload Images box and select an image you have already saved on your computer. (Alternatively, if you already have uploaded some images to this page, you can select one of them. You can also pick Web address (URL) and paste in the web address of an image elsewhere on the internet, BUT if that image ever goes away, it will break on your page too.
  4. NOTE: Before hitting the OK button, it is best to type in alternate text in the "Alt text (optional)" box with a very brief description. This helps patrons with limited eyesight who use screen readers, helps folks with limited bandwidth, etc.
  5. After inserting an image, use the pop-up menu by it (click on the image if necessary to display the menu) and try different image sizes (S, M, L, 100%, and Original) and alignments to get a good look. See the FORMATTING IMAGES section of this help page for details.
  6. You can also change the weblink for an image by clicking "Change" in that pop-up box. See USING GRAPHICS AS WEBLINKS below on this help page.

Inserting images from Google Drive

While you can also use  Insert  and Drive  and Image to insert images from your Google Drive, you MUST go into drive.google.com and either set each image or the folder of those images to be publicly viewable. In Google Drive, RIGHT-click on the folder or file and select Share. Change the setting to "Anyone with the link can view" and the files will start displaying properly.

Finding images that are not copyrighted

However, you cannot simply pluck any image from the internet and use it, as you'd likely be violating copyright. You can search for images with Google that are authorized for your use:
  1. Go to www.google.com
  2. Type a search term in the box, such as school bus.
  3. Click Images at the top of the search screen.
  4. Then click the Search tools button.
  5. Click Usage rights from the new menu that appears.
  6. Change the default  Not filtered by license to one of the other choices. Try different ones to see if they yield better results.
Non-copyrighted images

Once you've found a graphic you like, click on it to enlarge it, and either RIGHT-click on the image and pick something like Save image as... to save it to your computer. Or, if you want a larger version of the image, you can try clicking the View image button and then RIGHT-click on that and save the image. When you've clicked on an image in the Google Search, you can also click the Visit page button to see the image in its original context. That can sometimes help you decide if it is available for your use.

Using graphics as weblinks

By default clicking on a graphic displays the underlying full-size image. But you can change that to any weblink and thus turn a graphic into a handy weblink to a service or page. This is especially helpful for folks using small screen devices.
  1. Click on the graphic while in page editing mode.
  2. Select Change in the top line of the pop-up box showing the graphic’s links.
  3. In the dialog box, change Link to this URL: to the desired web address. (Text to display: only affects the alternate text that shows up when an image is not displayed.)
Image link change


    Formatting images

    When you first create an image, it will show its properties bar where you can change its size, alignment, if text flows around it or not, and its weblink. You can also edit those properties later:
    1. Click the pencil icon at the top to put the webpage into edit mode.
    2. Click on an image, and its property bar will appear.
    Image properties bar

    Let's play around with an image to see some of the properties and tips for improving things. Below is an image set to Medium. How large Small, Medium, or Large will appear depends on the size of the original image

    I put captions under an image, using italics.
    The above image is medium and centered.

    Notice that I added a caption by simply typing some text below the image. I like to put captions in italics to help readers know that text is a caption and not part of the main article.

    You can also stretch an image to the full width of a page or column. The image below is set to 100%. Notice, however, how the link box around it is then a bit too wide. The right edge gets cut off:


    I really don't like that, so if I set an image to 100%, I either remove its link, so the surrounding box goes away:



    Or, if I want to keep the link so readers can view a larger image or so that the image becomes a weblink, I'll set it to 100% but then:
    1. I click somewhere in the column to put the cursor near the image.
    2. I click the <HTML> link in the page's upper  property bar to reveal the underlying code for the page.
    3. I scroll up through the HTML code until I find image's width code, and change it from 100% to 90%. That yields the result below - a wide image that has a link box but doesn't overflow the column.

    Here is what the relevant HTML code look likes before I change it:

    100 percent image width code

    And here I've changed it to 90% and then I click Update:

    90 percent image width

    Other HTML Customizations

    If you know HTML, you can always reveal the HTML code for a page and make custom changes like this. Sometimes I'm not happy with the size of an image using the default S, M, L, 100%, or Original options. So I'll insert the image and then edit its HTML code to specify a particular width or height in pixels.

    The IMG control has this format in HTML:

    <img border="#" src="URL" style="width:90%" alt="Alternate text">

    where the number for border controls its thickness (and 0 means no border), URL is a web address like http://www.bps-ok.org, and the style="width:90%" part is sometimes replaced by pixel sizes in the form of width="100" height="75" to make the image 100 pixels wide and 75 pixels tall.

    If you have a weblink for an image, that shows up in HTML as anchor links surrounding the IMG code. For example, an image that serves as a weblink to www.bps-ok.org might look like this:

    <a href="http://www.bps-ok.org">
    <img border="1" src="https://sites.google.com/a/bps-ok.org/madison/school.jpg" style="width:90%" alt="Madison">
    </a>

    Slideshows

    Although one way you can insert a slideshow into your Google Site is by uploading photos into Picasa or Google+ photo album and then using the Insert menu's Google+ > Photo Album to insert that into your page, that slideshow does NOT even appear on an Apple smartphone or tablet, probably because it relies on Java to work.

    So you should instead create a slideshow using the Google Slides application that is part of Google Drive. Just create a presentation, in the directory on Google Drive that the district webmaster created for your site, that is a series of slides with photos. After you've created that presentation, you can then go into Google Sites and edit the page where you want the slideshow. Put the cursor where you want the slides to appear and use Insert > Drive > Presentation to locate and select the Google Slides presentation.
    Insert presentation

    When you insert the presentation, you'll get a dialog box with options. I would suggest turning off the border and title but turning on Start slideshow as soon as the player loads and turning on Restart slideshow after the last slide.

    You'll need to experiment with the Size: options. I found the Small (410px) size works well for slideshows in one column of a two-column layout.

    Insert presentation options

    Comments