Images
4.0 Images
4.3 Change the image on a page
4.4 Remove an image from a page
4.5 Setup a revolving slideshow
Note: To print all topics in this section, choose the 'printer friendly version' link below.
Return to Quick Reference Guide Index
Add an Image
4.1 Add an Image to a page
1. Be sure you are on the Edit tab of the page to be edited.
2. Place your insertion point in the body at the location that you want the image to be placed. You can see the line of the cursor just below the linked text in the image below.
3. Now click the Insert/edit Image button (the one that looks like the photgraph of a tree).
'
4. After clicking this button, the Insert/Edit Image dialog box will pop up. Click the Browse button to the right of the Image URL field.
5. The file browser window will appear. Click the Upload button in the upper-left corner of the file browser.
6. After clicking the Upload button, several new buttons will appear. Click the Browse button to select the image from your computer to upload to the file browser.
7. Click the Upload button (next to the Browse button) to finish the image upload process. Your image will be uploaded and in the bottom right hand corner of the file browser window you will see it appear.
8. Be sure the image is still highlighted in the file browser. Click Send to Tinymce.
9. The image URL now appears in the URL field in the Insert/Image dialog box. You have the option of adding an Image Description. This enables your images to be described to those using a screen reader. Click Insert. Your image should appear on your webpage.
Return to Quick Reference Guide Index
Change an Image
4.3 Change the Image on a Page
1. Locate the desired page and be sure you are on the Edit tab. Click on the image you wish to change.
2. When you do this, notice that the Insert/Edit Image button darkens. (The icon of the small tree.) Click this button.
3. The Insert/Edit Image dialog box appears, with the current image showing in the Image URL field. Click the Browse button to change your image to the desired image. You will either need to upload your new image (see section 4.1 steps 5-8) or select an image already uploaded to the system. Typical image file extensions are .jpg, .gif, and .png. (Do not use .bmp files - convert them to a different, smaller file type first.)
4. Click the Update button to finish the process.
Return to Quick Reference Guide Index
Edit an Image
4.2 Edit an Image on a page
Resize an Image
1. Locate your desired page and be sure you are on the Edit tab. Click on the image you wish to edit.
2. When you do this, notice that the Insert/Edit Image button darkens. (This is the button with the tree on it.) Click this button.
3. The Insert/Edit Image dialog box will appear, with the current image showing in the Image URL field. Click the Browse button to bring up the File Browser dialog box.
4. The image you are wishing to resize should be highlighted in the list. Click the Resize button at the top of your screen.
5. A small Width x Height area will appear directly beneath the Resize button. Type in the proportions you wish to resize the image to. Keep in mind that these measurements are in pixels (pixels is indicated by the abbreviation px).
If you are unsure of the dimensions you are after, try to find another image that is about the size that you want. Right-click on that image and click 'Properties' to view the image dimensions.
Here are some sample image sizes in pixel dimensions for your reference. (Note: This image suffers some quality loss as it is enlarged.)
100 x 96 pixels
250 x 192 pixels
350 x 267 pixels
6. By default, the Create New Image box is checked. This allows you to keep the original file, in the event you do not have it saved elsewhere. If you do have the original file, you may un-check this box. This will save file space on your website's file system.
7. After resizing the image, it will automatically be highlighted for use. Click the re-sized image in the bottom, right corner of the File Browser window. You will be returned to the Insert/Edit Image screen and the image URL field will contain the URL of the re-sized image.
8. Click the Update button to finish the image resizing process.
Note: Do not use the Appearance tab in the Insert/Edit Image dialog box to resize a large image. This only changes the way the image appears, and does not change the actual file size/dimensions. Visitors will still have to download the full file, large or small. On slower internet connections, this can be very cumbersome. It may even turn visitors away from your site due to download time.
Align an Image on the Page
1. Locate your desired page and be sure you are on the Edit tab. Click on the image you wish to edit.
2. Notice that the Insert/Edit Image button darkens. Click this button.
3. The Insert/Edit Image dialog box will appear with the current image showing in the Image URL field. Click the Appearance tab at the top.
4. Use the Alignment drop-down menu to select the alignment to apply to that image. This will justify your image to position it on whichever side of the screen or text you designate. The box with the tree and Latin words to your right provides a preview of what effect the selected alignment option will have on your page and the text next to it.
5. When you have defined an alignment you are pleased with, click Update to finish the process.
Put Extra Space around an Image
1. Locate your desired page and be sure you are on the Edit tab. Click on the image you wish to edit.
2. When you do this, notice the Insert/Edit Image button darkens. Click this button.
3. The Insert/Edit Image dialog box will appear, with the current image showing in the Image URL field. Click the Appearance tab at the top.
4. Using the vertical and horizontal space options, you can move the image away from the text or closer to it. These dimensions are defined in pixels. Most people are happy with 2px or 3px of space around their image. Play around with it to figure out what you like best.
5. When you have defined image spacing you are pleased with, click Update to finish the process.
Place a Border around an Image
1.Locate your desired page and be sure you are on the Edit tab. Click on the image you wish to edit.
2.When you do this, notice that the Insert/Edit Image button darkens. Click this button.
3. The Insert/Edit Image dialog box opens, with the current image showing in the Image URL field. Click the Appearance tab at the top.
4. Here you will find a field for adding a border. The border thickness is defined in pixels. leaving this field blank results in no border, 1 px produces a very thin border; 2px a bit thicker, and so on.
5. When you have defined an image border you are pleased with, click Update to finish the process.
Return to Quick Reference Guide Index
Remove an Image
4.4 Remove an Image from a page
1. Locate your desired page and be sure you are on the Edit tab. Select the image you wish to remove by clicking on it.
2. Push the backspace key on your keyboard.
3. The image should disappear from your page.
4. Save your page.
Return to Quick Reference Guide Index
Setup a Revolving Slideshow and/or a Photo Gallery
4.5 Set up a revolving slide show and/or a photo gallery
CREATE A NEW PHOTO GALLERY
- Click “Create Content” in your left hand sidebar.
- Select “Gallery.”
- Name your photo gallery in the “Title” field.
- If you are putting this gallery together for use as a slideshow, then you will need to designate which page you want the slideshow to display on under the “Page to include slideshow” drop-down menu. This drop-down menu is right underneath the “Description” box.
- Now, you can begin to upload the photos that will be a part of your new photo gallery page and/or slideshow. You can reorder these pictures after they are uploaded by using the crosshair to the left of the image and dragging it up or down to the desired location within the list of images.
- If you do not want this to show in your sidebar, move on to step #7 below.
- If you want this to gallery to be a selection in your navigation sidebar, you will need to name the gallery again in the “Menu link title” field and select where you would like it fall (whether you want it to be a secondary menu item underneath a main menu item, or what-have-you). See screenshot in step 4 for visual representation.
- Select “Publishing options” at the bottom of the page and check the “Published” box, if it is not already checked.
- Click “Save”.
EDIT AN EXISTING PHOTO GALLERY
- Make sure you are logged into your website.
- Visit this URL: http://extension.oregonstate.edu/[COUNTY NAME HERE]/gallery/
- Select the appropriate gallery you wish to edit.
- Once you’re in the gallery, click the “edit” tab at the top of the page (just as you would do if you were editing any other page on a Drupal site).
- From this screen, you can delete images that are already in your slideshow gallery, add captions, add more photos, and reorder the photos.
- To reorder the photos, click and hold the crosshairs next to the image and drag it to the location position you would like it to be.
- To add new photos, click the “Add another item” button at the bottom of the list of photos.
- Then click the “Choose File” button. You will now be in your computer and can browse to the location on your computer where you have the image(s) saved that you would like to upload. Select the image and then click “Open” to insert that photo into the gallery.
- You must click the “Upload” button next to a photo after you have selected it from your computer before it will actually appear within the slideshow (and of course, you must save the page after you are finished editing).
- Note that only one image can be uploaded at a time, but multiple images can be uploaded before saving the actual page. However, do not go more than an hour in between saves, or the Drupal system will log you out and you will have to start over.
- Then click the “Choose File” button. You will now be in your computer and can browse to the location on your computer where you have the image(s) saved that you would like to upload. Select the image and then click “Open” to insert that photo into the gallery.
- To remove a photo, within the gallery, simple click the “Remove” button that appears next to the undesired image.
- After all desired revisions have been made to your gallery, be sure to click the “Save” button at the bottom of the page, per usual page editing protocol.
Return to Quick Reference Guide Index