Note: Flickr support for Members' Pages is under development. This page is not tested, may change often, and the markup to embed Flickr photos and may have the usual number of early bugs.
This page provides examples of various markup to support displaying Flickr images on your PHSNE Members' Pages. You can display individual photos from a Flicker account, or display a slide show or gallery of the photos assigned a specific Flickr tag. In order to view any photo from Flickr at this site, the photo must be publicly viewable. Photos you have set for private viewing at Flickr can only be seen at Flickr when you are logged into your account.
You can view the raw markup language for this page by clicking on source if the markup descriptions below are not clear.
Flickr ID
To use the slide show and galley markup, you must know your Flicker user name and/or user ID. Your name is the screen name shown by Flickr when you log in. For PHSNE the Flicker name is "phsne".
Your ID is a unique identifier assigned by Flickr when you opened your account. It is of the form "00000000@N00" where the "@" is always present. If you have not created what Flickr calls a "memorable web address" for your Flicker pages, then you can find your ID in the URL of your photostream at Flicker. Just go to your photostream and you will see your ID as part of the URL displayed by your browser- something like "http://www.flickr.com/photos/33071373@N02/".
If you have created a "memorable Flicker web address" then your original account ID will not be displayed as part of your URL, rather the URL name you picked will be displayed. In this case, go to Flickr's
GetInfo API Page while you are logged into Flickr. Your user ID will be shown on the right hand side of the page.
Slide Show
This custom site markup uses Flicker's slide show mechanism to display the images from an account with a specified tag.
You need to know your Flicker account ID and the tag names to use this markup. Your user ID is the item sometimes seen in your Flicker URL with the "@" in it. For example, PHSNE's user ID is "33071373@N02". Your ID will be in the same form.
Here is an example of a normal sized Flickr slide show (500 pixels square) in a table, using the second row of the table to provide a caption that formats to the frame size.
This shows a Flickr slide shows from the PHSNE Flickr account right floating with tag=bod. It has been changed from default of 500 to 300 pixels square. Since there are more thumbnail images than will fit, in this example the thumbnails
run off the left side of the frame and are not all visible. If you want all the thumbnails to be accessible you will have to limit the number of images to one line of thumbnails or use the default frame size. This slide viewer is provided by Flickr and we have no way to fix this issue.
The markup to produce this, with abbreviated commentary text, is:
%rfloat% (:flickrslideshow user_id=33071373@N02 tag=bod width=300 height=300 :)
This shows a Flickr slide shows from the PHSNE Flickr account right floating with tag=bod.
It has been changed from default of 500 to 300 pixels square.
...
[[<<]]
The [[<<]] at the last line forces the wiki to stop wraping text (or other images) around the slide show and start the next item below the slide show.
PictoBrowser Gallery
PictoBrowser is a free third-party gallery style display for tagged Flickr photos. It displays the title and notes for the photo. PictoBrowser allows the viewer to browse a collection of photos from thumbnails or keyboard commands.
Clicking on a thumbnail will go to that image. Hovering you cursor over the main photo will hide the thumbnails. Clicking on the main photo will move to the next photo. Hovering over the bottom of the frame will bring the thumbnails back up.
In addition to moving among the photos by clicking on the thumbnails, you can use the left and right arrow keys to go backwards and forwards. This allows you to navigate the photos without bringing the thumbnails back up. You must first click on a photo to establish "focus" for the keyboard for these keys to work.
Note the "Link" displayed when thumbnails are displayed. This provides you with a link back to the image at flicker as required by the Flickr Terms of Use. Hover over the "Link" to see the link, click on "link" to go to the photo at flicker. If notes are available for the image at Flickr, a "Note" link will appear to display them. Hover over the "Note" link to show notes.
The markup that produced the two Pictobrowser windows above is:
You must provide both a account ID and user screen name for the account at Flickr to use PictoBrowser. If none is specified they default to the PHSNE Flicker name and ID.
If no "width" and "height" are specified, they default to 500 pixels.
The "valign" parameter specifies the vertical alignment of the photo in the frame. The available options are "bottom", "mid", "center", and "top".
Next we show a smaller PictoBrowser frame floated to the left with text wrapping around it to the right..
This shows a PictoBrowser frame from the PHSNE Flickr account with tag=meeting-2008-03. The width and height been changed from default of 500 pixel width
to 400 pixels to fit this formating. Note, that PictoBrowser has adjusted the thumbnails so that all are accessible. However, image titles do not wrap so you must leave room for them when you size the window - or keep the title short enough to fit. This set of photos has notes attached, so use the notes function to view them.
The markup that produced this example of using PictoBrowser, with abbreviated descriptive text is:
%lfloat% (:pictobrowser user_name=phsne user_id=33071373@N02 tag=meeting-2008-03 width=400 height=400 valign=center:)
This shows a PictoBrowser frame ....
[[<<]]
Single Image
You can display a single Flickr photo in your flicker account by obtaining it's unique URL from Flickr. To obtain the unique URL go to the photo's page on Flicker by clicking on the image while logged into your Flickr account. Then on the tools just above the photo, click on "All Sizes". Under the photo, Flickr will provide the photo's URL as option 2. Copy this URL and paste to your web page to obtain an embedded photo like:
William Henry Jackson with mammoth plate camera.
(From BPL Western Photographs Collection,
copy shot by Lew Regelman.)
This markup has set the photo from Flickr in a framed box at the left, with this text flowing by it on the right. The frame was set at 50pct (pct is used for % in some markup that also uses the % character as a delimiter). The photo is the "medium" sized image at Flickr to minimize bandwidth. The reader can always get a larger, or smaller, version of the image at Flickr if one is available.
The Terms of Use of Flicker require that you provide a link back the the photo at Flicker. If you click on this photo you will go to the photo page for it at Flickr. You can get the link to the photo page by copying it from your browser URL display when you are on the photo page.
Note that the caption identifies the photograph and the collections at the BPL where the image is located, and the photographer who shot this copy while on tour there. PHSNE is dedicated to preserving our photographic heritage and assigning proper attributions of images is an important part of maintaing our heritage.
The markup that produced this single photo from Flickr is:
>>lframe width=50pct<<
%width=100pct%[[http://www.flickr.com/photos/phsne/3084881014|http://farm4.static.flickr.com/3258/3084881014_4c0e5af9aa.jpg ]] |
William Henry Jackson with mammoth plate camera.
(From BPL Western Photographs Collection,
copy shot by Lew Regelman.)
>><<
