RoderickT Page - 1

Using flickr in web pages

How to use FlickR in your own web siteI use Serif WebPlus X2 to create web pages.

IntroductionThis article is one of a series I am in the process of writing. Its primary purpose is to act as a record and arevision of techniques I have discovered as I develop various computer orientated projects. These cover avaried list of interests including photography, nature, maths, physics and social economics and history.

I am for ever trying to remember how I did things 12 months later, ore even a week later, so decided to keepthese notes. By placing them online increases there availability to me and may even be of use to others. AlsoI hope that I may benefit by any one interested enough to comment or add improvements.

TopicThis paper explores using Flickr in developing your own web pages. It covers

� Embedding a single photo� Linking to Flickr Photo� Create Rollover Thumbnails� Linking to Flickr Slideshow� Embedding Flickr Slideshow within own page.

It is part of a larger project in which I have been reviewing various methods of developing web pages appro-priate to the enthusiast rather than the professional. To date I have looked at Google Sites, Synthasite andcurrently learning Serif WebPlus X2, which is the tools used in this article, although the Flickr connectionsshould be appropriate to other HTML development tools.

FeedbackIf you feel inclined to make any comments then you can reach me at roderict@googlemail.com, and my webproject can be found at http://roderickt.uuuq.com/page10.html, although at the time of writing this (April2009) it is still in its early stages.

RoderickT Page - 2

Using flickr in web pages

How to use FlickR in your own web siteI use Serif WebPlus X2 to create web pages.

Sample Web PageThis is a page from my web site, you can click here to see it for real. It has a simple photo of a wall with apainting of a monk on the top and a collection of thumbnails that popup name of my FlickR Set when themouse is over and will start a flickr slide show in a new web page for that set if clicked.

I will describe how this was built and later describe how to imbed flickr slide show directly into your ownweb page.

RoderickT Page - 3

Using flickr in web pages

FlickrBelow is the flickr page for the photo I am embeddingin my web page.

To insert this photo click on the “Share This” buttonwhich will pop up the menu on the right,

Click on “Grab the HTML” and copy it ready to pasteinto Serif WebPlus.

RoderickT Page - 4

Using flickr in web pages

Insert in WebPlus Page

Click on the “Insert HTML Code” button in left hand tools menu.

This pops up the “Attach HTML Code” window, and just click on“Paste to Body” button and the code will be added. The cursor thenchanges to the standard insert pointer and just indicate the positionyou want the photo to be.

Fine adjustment

The actual photo is not shown in theWebPlus window, you are given awindow similar to the one on the right.It is advisable to check it by reviewingthe page in the standard methodsavailable to you from Serif.

To shift position move this window and

RoderickT Page - 5

Using flickr in web pages

Link to flickr slide show

Thumbnail link to flickr slide show

This section describes how to make a collection ofthumbnails as shown on the right, with each one linked to adifferent set of flickr photos.

Checkout how they look and work on my web pageRoderickT Photo Examples

ThumbnailThe example shows how the Insect Thumbnail greys out slightly and pops up text when the mouse is over it.To create this thumbnail I used the excellent free program Paint.Net

Create two layers and fill the 2nd layerwith say, grey colour and then reduceopacity so that the original photo showsthrough.

In the top layer type required text.

When happy with result flatten the image(command is in the File Menu) and save withnew name.

RoderickT Page - 6

Using flickr in web pages

Copy this address

Identify flickr slide showStart flickr in the normal way and select set and then click on “Slideshow”.

Copy the url of theslideshow as indicatedon the right.

Return to WebPlus and select “Rollover”from the fly-out in the left hand tool bar

Make sure you do not select the Pop UpRollover to the right, I did this and it tookme half an hour and a visit to Serif Forumto find out why it was not working.

RoderickT Page - 7

Using flickr in web pages

The Rollover Graphic will pop up. Use“Browse” button to select the thumbnailimage that you want, in my case the one Ibuilt using Paint.NET

Select “Set” button to add the hyperlink.This opens the Hyperlinks window. Pastethe URL Address copied previously.

I prefer the slide show to be opened in anew window, so I select this in the “Type”drop down list.

Click on “Over” button in the Rolloverstates, and then on the “Browse” button toselect the image with the text built before.

Click OK.

The mouse pointer should now be the usu-al WebPlus broad box that you can use toposition the image. If you double clickrather than paint it should place image atreal size. It will be the “normal” imagewith no text.

It is a good idea to review page usingstandard WebPlus review options to see ifall works as expected.

RoderickT Page - 8

Using flickr in web pages

Flickr slide show

The flickr slide show iseasy to use.The image on the right ishow it starts. It has athumbnail panel at thebottom that will fade outof view unless you placeyour pointer in that area.The top menu behavessimilarly. The bottomright box lets you switchbetween window and fullscreen modes.

You can select “Info” orjust click the image to seetitle and any captions.

To see the standard flickrpage for a particular im-age just click on the namein the information panel .

RoderickT Page - 9

Using flickr in web pages

Flickr slide show inside own page

August 2008 flickr blog described the new slideshow which included the ability to embed the slideshow inanother web page. I have covered this slideshow in this article and now describe how to embed it withinyour own web page.

The information about the slideshow can be found at the flickr blog herehttp://blog.flickr.net/en/2008/08/20/new-slideshow/

When in your Flickr system start a slideshow in the usual way by clicking on small slidescreen icon. I find itbest to show a pre built Flickr Set.. When you place your mouse pointer within the slideshow window men-us will popup.

� Click on Share on top right and then� click inside the text window just below “Grab the embed HTML” which will highlight the text� click “Copy to clipboard”.

RoderickT Page - 10

Using flickr in web pages

Embed Slideshow Instructions

SELECT THE “Insert HTML Code” button and then click on “Paste to Body”, and this should producethe default embedded Flickr slideshow with a size of 400 x 300. This will be indicated by the placehold-er box, but it is good practise to preview result and make fine alterations to position as appropriate.

The result should look simi-lar to the illustration on theright.

RoderickT Page - 11

Using flickr in web pages

The embedded slide show has a subset of instructions based upon Flickr’s online slide show.

CustomisationIf you refer back to the “Share” dialogue on the online Flickr slideshow you will see a “Customize thisHTML” option you can select. This opens up more possibilities but to date all I have done is varied thesize. This option opens the following dialogue.

Note.I have increased thesize of the embeddedslideshow.