Members' Articles
Join or Renew Online
About the Site

• Using this Site
• Terms of Use & ©
• Creating and Editing Content
• Contact PHSNE

phsne.org
PHSNE Forum
PHSNE Archive

• View
• Edit
• History
• Print

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 may want read Images and Uploads in the formal pmWiki documentation after you are comfortable using the simple examples on this page.

In addition to uploads to this site you can link to images at an online photo collection such as Flickr or at your own or another web site. We encourage using Flickr for larger individual images or large collections of images since it reduces the resources required at the PHSNE site.

Image Basics

Images for display may come from other sites on the Internet (e.g., an online photo sharing service or members personal web site) or from images stored on this server.

Images from other sites may be included by URL reference. The URL is their address on the internet, e.g. http:/www.phsne.org is the URL of PHSNE's home page. Remember that if you link to images at another site, they will disappear or change if the other site is modified. Unless you control the other site, it is better to put a link to the site rather than the image itself.

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 200 Kbytes 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, e.g. a group panorama that you would like to provide a large file suitable for high quality printing at full size.

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 wrapping to the right of the image. The markup and text that produced this layout is shown below. The "[[<<]]" markup after the text tells wiki that you want to stop flowing text around the image and start next text below it.

 %lfloat thumb% Attach:Towerhill-Flower-100px.gif
 Example of simple image attachment to page.  Thumbnail sized image floating to the left of the page,
 without any adornment. Text is wrapping to the right of the image.  The markup and text that produced
 this layout is shown below.  The "[[<<]]" markup after the text tells wiki that you want to stop
 flowing text around the image and start next text below it.
 [[<<]]

Thumbnail sized image floating to the right of the page, without any adornment. Text is wrapping to the left of the image. The image markup, without other text, that produced this layout is shown below.

 %rfloat thumb% Attach:Towerhill_Flower_100px.jpg

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.

 %lframe width=150px% Attach:Towerhill_Flower_150px.gif"Taken at Towerhill Gardens" | [-Flower-]

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 "Attach:file.ext" directive is in link brackets [[...]] so that the image is not shown, rather a link to it for your browser is created. Roll your cursor over it to see the URL created for your browser.

Sagus Iron Works HNS Waterwheel

Wayside Inn, Mill Stream View

The markup for the Sagus Ironworks image above is:

%lfloat width=250px% Attach:SagusIronWorksWaterwheel_250px.gif

 '''Sagus Iron Works HNS Waterwheel'''
 ||width=250px
 ||Camera: ||Kodak Stereo (1950s) ||
 ||Film: ||Fuji Sensia 100 ||
 ||Scanner: ||Nikon Coolscan 4000ED ||
 ||Editing: ||Photoshop 7 ||
 ||Download: ||[[Attach:SagusIronWorksWaterwheel.jpg|129K JPEG]]
 [[<<]]

Images Attached to Your Page

The "(:attachlist:)" markup is handy for giving you a list of all the images uploaded for a page. Warning: This markup allows a user to upload an image to replace the one on the site if they have the upload password (usually the administrator has set the upload password to be the same as the edit password for your page).

This is useful tool to put on your page while you are editing it if you have a number of images to serve as a quick reminder of the names of files you have uploaded. Unlike the "Attach:" markup, the upload link is always live for the images with "(:attachlist:)" so you can put it on a page temporary in order to replace a file with a new version. It would be a good idea to remove it after your edits are complete to prevent accidental overwriting of files on the server. For this page, "(:attachlist:)" produces the list:

• SagusIronWorksWaterwheel.jpg Δ ... 129,455 bytes ... September 17, 2009, at 07:15 AM
• SagusIronWorksWaterwheel_250px.gif Δ ... 33,617 bytes ... September 17, 2009, at 07:15 AM
• Towerhill-Flower-100px.gif Δ ... 8,535 bytes ... September 17, 2009, at 07:15 AM
• Towerhill-Flower.gif Δ ... 8,535 bytes ... September 17, 2009, at 07:15 AM
• Towerhill-Flower.jpg Δ ... 60,951 bytes ... September 17, 2009, at 07:15 AM
• Towerhill_Flower_100px.gif Δ ... 8,535 bytes ... September 17, 2009, at 07:15 AM
• Towerhill_Flower_150px.gif Δ ... 16,827 bytes ... September 17, 2009, at 07:15 AM
• WaysideInnStreamView.jpg Δ ... 136,379 bytes ... September 17, 2009, at 07:15 AM
• WaysideInnStreamView_250px.gif Δ ... 17,323 bytes ... September 17, 2009, at 07:15 AM

Flickr Images

You may include images from Flicker on your page. We recommend this for larger images and very large collections of images, since it conserves resources at the PHSNE site. This wiki supports Flickr slide shows, Flicker galleries via PictoBrowser, and linking individual images.

See Flickr Examples for information on including Flickr photos on your page.

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.

Note: Unless the other site explicitly encourages embedding images from their site (e.g. Flickr) you should always get permission from the other site to directly link an image into your page. Be aware of and follow any Terms and Conditions of use at the other site. You are using server bandwidth from the other site to display the image, so simple courtesy says you should obtain permission. Also note that some sites have set their servers up to deny embedding images in other sites, so this may not work.

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 thumb directive sets the image display width to 100 pixels, the height is scaled to preserve proportions. Text is wrapping to the right of the image. The markup and text that produced this layout is shown below. The "[[<<]]" markup after the text tells wiki that you want to stop flowing text around the image and start next text below it.

Image from homemoviehistory.com presented with the permission of Alan Kattelle.
%lfloat thumb% http://homemoviehistory.com/images/f120.jpg

 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 [@thumb@] directive sets the
 image display width to 100 pixels, the height is scaled to preserve proportions.  Text
 is wrapping to the right of the image.  The markup and text that produced
 this layout is shown below.  The "[[<<]]" markup after the text tells wiki that you
 want to stop flowing text around the image and start next text below it.

 ''Image  from homemoviehistory.com presented with the permission of Alan Kattelle.''
 [[<<]]

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 markup. So please be respectful of members with slower connections and do not link to directly to large images.