Making Democracy Work
Upload and Resize Your Photos or Images
See this Q&A about legal issues and sources.
First, you must have a photo file on your computer. It is a file that ends in .jpg (or .jpeg), .gif, or .png.Next, you upload the photo using LEW. During this process, you will give it a name and choose the size you want the photo to be on your page.
Finally, you edit the page where you want the photo to appear and paste the special command that references the photo to the point on the page you want people to see the image.
That's it!
Read on for more details and recommendations.
The image will be uploaded to the "images2" directory after you have the opportunity to:
When embedding the image on a page of your choice, you can:
- Name the file. See the upload page for suggestions. Keep it simple!
- Enter some "alternate" text: if a photo, enter a short caption
- Choose the size of the image
- Specify words to be placed below the image as a caption (optional)
- Specify how text will wrap around the image or not.
- Make the image "clickable". You can specify the URL (web page name) to be displayed when a user clicks.
- This function supports upload and resizing of images. Often you may want to crop or enhance a photo by making it brighter or removing red eyes, for example. Please do this before you upload it by using an image processing program. There are free programs like Picasa.com or pixlr.com or picnik.com that will do this for you. Or you may use programs like Photoshop or Paint Shop Pro.
When you have the image ready, you will upload it to LEW: go to the site generation home page and click on "Upload or Delete File" near the bottom of the page. On the next page, click on "Choose File" and find the image file on your computer, then click "Upload".
- Choose a simple but meaningful name for your image and enter a few descriptive words as "alternate text". This is important for people who cannot see your image. They may be using screen reader devices which will read the "alternate text" to them. Read the advice on the form for more info.
- The upload service displays your image in three different sizes and lets you pick a size expressed in pixels. Don't choose too large of an image. Try 300 pixels wide for a rectangular photo if there are several people in it. If only one or two faces, you can make it smaller. You will find that smaller than you first think may be probably better.
- Look at the uploaded image by clicking on the link following "location of the image". You may not be able to tell whether you like the size until you embed it on your LEW page, but if you can see that it is not a good size, just upload it again.
- Following the message that your file was successfully uploaded, you will see a choice of commands. Copy the <image-xxx...> command you want. Read more about placing your photo.
- Edit the page where you want the photo to appear and paste the <image-xxx...> command at the point you want the photo to be. Make any needed changes like adding a caption or a link.
Yes.
- Just click on the "Upload or Delete File" button.
- When asked for the name of the file, be sure to specify the same name as previously.
- Check the box "Replace an existing file previously uploaded".
- Select the (new) size you wish.
Yes. See details about how to delete an image.
Please see how to change alternate text.
This upload capability does not support a slideshow. Please see Photos and Slideshows for some recommendations.
Yes. The "regular" HTML <img...> command will still work -- even for photos in the images2 directory.
If you try to upload your own photo and have any problems, please send an email to support@lwvnet.org and tell us about your experience.
- On the page that said your photo was correctly uploaded, we give you some sample code you can use. Copy the <image-xxxx/xxxxxx.jpg> command you want.
- Go back to the site generation home page and click on the name of the page where you want the photo to appear.
- On the edit page, if you did not copy the code for the photo as in the first step, you may find that code in the right column of this page. Scroll to "List of files for linking and images to embed" and find the image command for the photo file you want. Copy it.
- In one of the boxes labeled "Section Text", find the point where you want the image to appear. Paste the copied code there.
- You can preview the page now (scroll to the bottom and click on "Preview") to see the photo.
- Read on to see changes you can make about the placement or adding a caption or making the image "clickable".
The <image-xxxx...> command for LEW has 3 modifiers that tell LEW where to place it:
If using "left" or "right", read about how to stop text from wrapping.
- here: will place the image where the command starts. The next text immediately following will be placed below the image.
<image-here/photo.jpg>Text text
- right: will place the image on the right side of your page. Any text that immediately follows will be placed before the photo and continue around the left side of the image.
<image-right/photo.jpg>Text text
- left: will place the image on the left side of your page. Any text that follows will be placed after the photo and continue around the right side of the image.
<image-left/photo.jpg>Text text
If you are not using captions on any photo, repeatedly use the "here" option:<image-here/photo.jpg><image-here/photo.jpg><image-here/photo.jpg>
If you are using captions (and we apologize for this), you should repeatedly use the <image-left..> instead of "here".
Do:<center><image-here/photo.jpg></center>
Do NOT forget the final "/center"! Otherwise everything that follows will be centered.
Do:<image-left/photo.jpg><image-right/photo.jpg>Text text.
Just code the following command:<br clear="all">
After that command, anything that follows will start in the left margin below the image.
Very easily! Just use the format:"Caption"<image-here/photo.jpg>
The words between the double quotes will be centered beneath the photo. Text will wrap or not as specified by the "image-here", "image-left", or "image-right" command.
Note: if you are using captions and want photos to be placed next to each other as space permits, use <image-left...>. You may also need to stop wrapping.
You would enter those words as text. Use the <image-left/photo.jpg> command then start your caption just after that command. To force the caption to start below the top of the photo, you can use <br> commands. You may also need to stop wrapping.
Just add the URL or web page name after the photo name separated by a comma:<image-here/photo.jpg,+http://lwv.org>
If the link is to another web site, do include the + (plus) sign to ask the browser to open a new window or tab when someone clicks. This makes it easier for the person to get back to your web site.
If you want the "click" to go to one of your pages, just enter the pagename.html without the + sign.
<image-here/photo.jpg,contact.html>
Here is the command:
"caption"<image-side/photo.jpg,+http://lwv.org>
where:
All possible ways to use the command are shown at the bottom of the right-hand column on every edit page.
- "caption": Put the words you want to be displayed as the caption below the image enclosed in double quotes. Optional.
- <image-side/: where side is either "here", "left", or "right" depending on how you want text to wrap around the image (or not).
- photo.jpg: the name of your image. On the page edit form, all photos will be listed so you can choose.
- ,+http://...: after a comma, a full URL or web page address may be coded. If someone clicks on your image, this page will be opened in a new window if you include the + (plus) sign. Optional.
- > The command must end with the greater than sign.