|
|
AboutThisSite / ImageExamples
Introduction
This page has various examples of image markup for members pages. Some are simple, some more complex. Snipits of the markup required to achieve the effects shown are provided in the text. For more details about images and uploading images, you should read Images and Uploads after you are comfortable using the simple examples on this page. Image Basics
Images for display may come from other sites on the Internet (e.g., a members personal web site) or from images stored on this server. Images from other sites may be icluded by URL reference. The URL is their address on the internet, e.g. Images are stored on the server in a directory who's name includes the page group and page name (ThisSite/MembersMarkupEamples/image_name.jpg for this page). Thus your names for images will not conflict with names assigned by other members on other pages. It is important to know that images on the sever are always sent to the browser in full resolution, even if the page markup calls for a small thumbnail. The browser resizes the image as instructed by the wiki to the smaller (or larger) size. Thus you should scale images in your image editing software to a size appropriate for their use on the site. Large image files inconvenience users on slow connections! Generally speaking, "gif" files will be smallest, so if you have the tools please convert files that are appropriate for gif representation. Many of the common image editing tools can convert an image to gif format. Gif works very well for web images, however if you desire better photographic quality (e.g. you are offering files for download to print) then jpeg will be a better choice. To avoid overloading the server with large image files, this wiki is set to accept upload files of up to 100K bytes in size, so you must resize the image to fit in this constraint. Contact the site administrator if you need to upload a larger file. Image Links from Other Sites
Note: If your browser security is set to not load images from a site other than the site the page you are viewing is on, you will not see the image linked in this example.  Example of a simple image linked from another site. Thumbnail sized image floating to the left of the page, without any adornment. Note that the Image from homemoviehistory.com presented with the permission of Alan Kattelle.
Example of a simple image linked from another site. Thumbnail sized image floating to the left of the page, without any adornment. Note that the Recall that the image sent to the browser will be sent at the full size of the file at the source website, the wiki will instruct your browser to scale it to the size you selected in the margup. So please be respectful of members with slower connections and do not link to directly to large images. Attaching Photos and Images
These example demonstrate how to mark an image for upload and attachment to your page at the wiki server.  Example of simple image attachment to page. Thumbnail sized image floating to the left of the page, without any adornment. Text is wraping to the right of the image. The markup and text that produced this layout is shown below. The "
 Thumbnail sized image floating to the right of the page, without any adornment. Text is wraping to the left of the image. The image markup, without other text, that produced this layout is shown below.
 Flower Now a more complex example. The image is framed, placed to the left of the page, made 150 pixels wide, labeled with small text, and provides a mouse roll-over tag to display when the user puts cursor over the image. The image markup, without other text, that produced this is shown below.
More Examples of Images
Some sample stereo cards follow to demonstrate presenting images with technical data for download. The images are presented left floating with a width of 250 pixels (2.5 times thumbnail size). The image is a gif file to minimize loading time for page. A simple table is used to format the technical data and the normal text flow to the right places the table there automatically. The table width was set to 250 pixels so that it would not spread out too much on the right. The file a user can optionally download is a higher resolution jpg file. The "  Sagus Iron Works HNS Waterwheel
 Wayside Inn, Mill Stream View
The markup for the Sagus Ironworks image above is:
Images Attached to This Page
The "
Notes:
1Actually, some advanced markup techniques allow sharing of images across pages. But you then have to coordinate edits among page authors. So it is probably not worth the extra trouble for a member's page.
This page & PHSNE publications linked from this page are Copyright © 2006-2012 Photographic Historical Society of New England, Inc. Members' Pages, images, videos and documents copyright © their original creators or assignees. |
