Flickr Phrase Examples
I'm assuming that you know *roughly* what's going on here (if not, see the instructions), and so this page is limited to:
- explaining some advanced features
- giving some examples
Tagging (*new*)
You can now specify a tag you would like the images to have.
This lets you:
- use a coloured phrase (e.g. by only using letters tagged with 'yellow')
- use a stylised phrase (e.g. by only using 'neon' / 'graffiti' / 'mosaic' letters)
- use photos that they took themselves (if they have tagged them with a unique identifier)
- do something I haven't thought of...
<script src="http://www.quakr.co.uk/flickrphrase.js?phrase=yellow;tag=yellow;width=600;" type="text/javascript"></script>
gives...
See a page of tagged examples here.
Draw inspiration from the One Letter tag cloud.
Image Size (image_size - defaults to 75)
This refers to the size of each square image. The default thumbnail size from flickr is 75px. This parameter will not do any resampling of the image, only resizing via the HTML img tag. As with any image that has been resized without being resampled, the smoothness of the image may take a hit.
Changing the image_size parameter will automatically change the height of the iframe so that the attribution credits are directly under the photos.
<script src="http://www.quakr.co.uk/flickrphrase.js?phrase=small;width=600;image_size=40" type="text/javascript"></script>
gives...
Fade Effect (fade_in - defaults to yes)
The default position is that an onload is added to the img tag to use Effect.Appear from script.aculo.us. That's not Transitional XHTML compliant. But it looks so much nicer.
If you need the compliance, you can turn off the fade, and the onload will disappear.
<script src="http://www.quakr.co.uk/flickrphrase.js?phrase=no fade in;width=650;fade_in=no" type="text/javascript"></script>
gives...
(hit refresh to see the difference on the load)
Width (width - defaults to 600)
This resizes the iframe that contains the phrase, not the photos in the phrase. Although an image_size change above leads to automatic resizing of the iframe, it may be desirable to change the iframe size for vertical effects.
The height of the iframe should change automagically.
<script src="http://www.quakr.co.uk/flickrphrase.js?phrase=down;width=75" type="text/javascript"></script>
gives...
...and you will note that the credits should automatically be visible and scrolling sideways.
And to emphasise that the photos will still run horizontally...
<script src="http://www.quakr.co.uk/flickrphrase.js?phrase=abcdefghi;width=225" type="text/javascript"></script>
gives...