Saint Paul Public Schools
UrbanPlanet Help Site
Home > Content Display > Ways to Use Images
Ways to Use Images
Please note: This section will be updated with new illustrations to reflect changes with the new Urban Planet version.

Images can be used in a variety of ways
to add interest while serving a purpose.

- In an Image Gallery thumbnail images display across and down the page.
- In an Urban Planet Slideshow pictures can display one at a time.
Or create a slideshow in another application (such as iPhoto or PowerPoint), save it as a video, and upload it to your site. Try uploading some music to accompany it.
- Within Text images display in a zigzag pattern and the text flows around them.
- Images can draw your viewer's attention to a Sidebar. Images in a Sidebar can also Link to other sections or web sites.
- Images can be uploaded in a group to eliminate the time it takes to upload one at a time.


  • IMAGE GALLERY
  • SLIDE SHOW
  • INCLUDE IMAGES WITHIN TEXT
  • HTML TO CONTROL IMAGE PLACEMENT
  • ADD AN IMAGE TO A SIDEBAR
  • UPLOAD GROUP OF IMAGES

    • IMAGE GALLERY
    An Image Gallery ia an Attachment that creates thumbnails across and down the section. It can be added to most sections types. See Sample Gallery at the bottom of this item.

    STEP 1
    In edit mode, click on Image Gallery under Attachments.


    STEP 2
    Click on


    STEP 3
    Fill in Title


    STEP 4
    Enter a number for Summary Images to select how many images you want to appear before the viewer needs to click to another section to see more images.


    STEP 5
     for your image. Select the image then click Open


    STEP 6
    Click on Give the Image a caption. Continue to add images.


    STEP 7
    Click then again.


    STEP 8
    Click on


    Image Gallery: Sample Gallery

    Booth at the 2005 Student Technology Showcase Tech Integration Coaches Student Showcase refreshments



    SLIDE SHOW

    STEP 1
    Add an Image Gallery to your section or item. Include these simple instructions for your viewers:
    To view the gallery as a slide show click on the first picture in a gallery then click on View as Slideshow or Next.

    Or you can create a slideshow in another application (such as iPhoto or PowerPoint), save it as a video, and upload it to your site. Try uploading some music to accompany it.

    INCLUDE IMAGES WITHIN TEXT

    STEP 1
    Create a subsection and enter text in the Section Introduction.


    STEP 2
    Under Attachments on the left click on Image. Click on 


    STEP 3
    Click on and find/select an image in the .jpg or .gif format. Click on Then click on


    STEP 4
    Caption the image (optional). Click on .  Click on

    STEP 5

    Continue to upload images.


    STEP 6

    Click on to check how the section looks. Click on If needed, the look of the page can be improved by moving paragraphs down, changing where a sentence breaks, or changing the size of the image.


    STEP 7
    Click on


    HTML TO CONTROL IMAGE PLACEMENT

    The Images need to be the size that you want them to appear on the page. When you include an image using HTML you will not have resizing options as you do when uploading an image.

    STEP 1
    Create a subsection to hold the images you will use. Upload the images. Hide this section (edit-- Access Settings-- Hide Section-- True-- Save)


    STEP 2
    Go to the public view of the of the subsection created in STEP 1. Click on the image which will be needed first. It should have a url (address) which ends in .jpg or .gif. Copy the address starting after the site address.

    Return to Administration.


    STEP 3
    In the Section Introduction for the subsection which will contain the copied image, enter the text. To place the copied image use this formula: <img src="/image.jpg"> The text between the quotes is the location of the image you copied above.

    Repeat the process for each picture.



    ADD AN IMAGE TO A SIDEBAR
    This (will be) a sample Sidebar with picture.


    STEP 1
    In the Section Introduction click on Sidebar under Attachments.
    Click on


    STEP 2
    Type Title and Body (optional).
    Click on Click here to upload an image.


    STEP 3
    Click on and find/select a .jpg or .gif image. Click on . Click on


    STEP 4
    To link this picture to another section or site, type the URL (address) in the Link field. Click on


    STEP 5
    Click on again.

    Click on


    UPLOAD GROUP OF IMAGES

    Aladdin DropZip Option     STEP 1

    Put the desired images into a folder on your desktop.

    Aladdin DropZip Option STEP 2

    If you do not have Aladdin DropZip, go to http://www.aladdin.com/downloads and choose StuffIt Standard Edition (demo or buy, mac or win.)

    Aladdin DropZip Option STEP 3

    After downloading, open DropZip. Drag the image folder onto the DropZip window. This will create a copy with the extension .zip

    Aladdin DropZip Option STEP 4

    Browse, open, upload the .zip file the same way you would for any image. The images will unzip and upload as separate images.


    Mac OSX Option STEP 1

    Put the desired images into a folder on your desktop.

    Mac OSX Option STEP 2

    Press the Control key while clicking the mouse. A menu should appear. (Or you can select the folder and go to the File menu.) Select Create Archive of "your image folder". This will create a copy with the extension .zip

    Mac OSX Option STEP 3

    In your Urban Planet admin you will Browse, open, upload the .zip file the same way you would for any image. The images will unzip and upload as separate images.