Valid XHTML <object> Tags for Flickr Slideshow - Web Team Procedures and Notes

This page is intended for use only by the Web Team.

Go to Code for Video, Slideshows, and more for Videos and More.

Flickr Slideshow (embedded) -
[Use this instead of Flickr's Slideshow Embed Tool which is not valid]

Display Photos in One (1) Flickr Set

NOTE: Tested and validates. Off-site service: flickr.com.

Get a specific photo set (uses set_id):

<div class="embeddedmedia flickr centertag" style="width:495px;">
<span class="source"><a href="http://www.flickr.com/photos/ohlonecollege/sets/SETID/">SETNAME_OR_DESCRIPTION photoset on Ohlone College's Flickr site.</a></span>
<object type="application/x-shockwave-flash" data="http://www.flickr.com/apps/slideshow/show.swf?v=71649"
  width="495" height="372">
  <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=71649" />
  <param name="allowFullScreen" value="true" />
  <param name="flashvars" value="offsite=true&amp;lang=en-us&amp;page_show_url=/photos/ohlonecollege/sets/SETID/show/&amp;page_show_back_url=/photos/ohlonecollege/sets/SETID/&amp;set_id=SETID" />
</object>
</div>

REPLACE "SETID" with ID of desired set of photos.

Size and Code Notes

  • 495x372 are maximum dimensions for current Ohlone templates; may also use these proportional sizes:
    • 450x338
    • 350x263
    • 250x188 - 250 x 260 makes the controls display above/below the photo
  • may also change "centertag" to "rightfloat" or "leftfloat" and use a width/height
  • Configuration Settings: Combining these in <param name="flashvars" value="" /> will narrow results:
    • set_id=
    • user_id=
      User ID for Ohlone College Flickr account: 11324776@N00. Utility to get a Flickr account's user ID (user_id): idGettr.
    • tags=
      Separate multiple tags with + (plus) sign encoded as %2B. See also tag_mode.
    • tag_mode=
      Either "any" (the default value) for any combination of tags, or "all" if you want all tags to match: tag_mode=any or tag_mode=all. Undocumented: tag_mode=bool for Boolean search [works with Full Text search (not with Tags search); example:
      (speech+2010+sigmachieta) OR graduation]
    • text=
      Spaces must be coded as: %20
    • media
      Filters results as either photos (media=photos) or video (media=videos).
    • license
      Allows you to specify the license on a photo (see the flickr.photos.licenses.getInfo method for values). Multiple licenses can be searched by separating them with commas.
    • group_id= (for Flickr Groups)
    • photoset_id=
    • contacts=
    • favorites=
    • frifam=
    • nsid=
    • single=
    • firstIndex=
    • firstId=
    • http://paulstamatiou.com/how-to-quickie-embedded-flickr-slideshows/

Display Photos with One (1) Specific Tag (includes user_id)

NOTE: Tested and validates. Off-site service: flickr.com.

Get all of Ohlone College's photos tagged with "respiratorytherapist" (uses user_id and tags):

<div class="embeddedmedia flickr centertag" style="width:495px;">
  <span class="source"><a href="http://www.flickr.com/photos/ohlonecollege/tags/respiratorytherapist/">Photos tagged &quot;respiratorytherapist&quot; on Ohlone College's Flickr site.</a></span>
<object type="application/x-shockwave-flash" data="http://www.flickr.com/apps/slideshow/show.swf?v=71649"
width="495" height="372">
<param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=71649" />
<param name="allowFullScreen" value="true" />
<param name="flashvars" value="offsite=true&amp;lang=en-us&amp;page_show_url=%2Fphotos%2Fohlonecollege%2Ftags%2Frespiratorytherapist%2Fshow%2F&amp;page_show_back_url=%2Fphotos%2Fohlonecollege%2Ftags%2Frespiratorytherapist%2F&amp;user_id=11324776@N00&amp;tags=respiratorytherapist" />
</object>
</div>

NOTE: Pathnames in the page_show_url and page_show_back_url variables are encoded and the encoding is encoded (whew).

Display Photos with Multiple Tags (Boolean OR) using Tags Only Search (includes user_id and m=tags)

NOTE: Tested and validates. Off-site service: flickr.com.

Get all of Ohlone College's photos tagged with:

  • "speech" or "respiratorytherapist" - use: speech+OR+respiratorytherapist
  • NOTE: Including m=tags searches Tags Only. Not including m=tags option on URL searches Full Text (text and tags).
  • Does Not Work: "(speech 2010 sigmachieta) OR respiratorytherapist"
<div class="embeddedmedia flickr centertag" style="width:495px;">
<span class="source"><a href="http://www.flickr.com/search/?q=speech+OR+respiratorytherapist&amp;w=11324776%40N00&amp;m=tags">Photos tagged &quot;speech OR respiratorytherapist&quot; on Ohlone College's Flickr site.</a></span>
  <object type="application/x-shockwave-flash" 
  data="http://www.flickr.com/apps/slideshow/show.swf?v=71649" 
  width="495" height="372">
    <param name="flashvars" value="offsite=true&amp;lang=en-us&amp;page_show_url=%2Fsearch%2Fshow%2F%3Fq%3D%26m%3Dtags%26w%3D11324776%2540N00%26ss%3D2&amp;page_show_back_url=%2Fsearch%2F%3Fq%3Dspeech%2BOR%2Brespiratorytherapist%26m%3Dtags%26w%3D11324776%2540N00%26ss%3D2&amp;method=flickr.photos.search&api_params_str=&amp;api_tags=speech%2COR%2Crespiratorytherapist&amp;api_tag_mode=bool&amp;api_user_id=11324776%40N00&amp;api_media=all&amp;api_sort=date-posted-desc&amp;jump_to=&amp;start_index=0" />
    <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=71649" />
    <param name="allowFullScreen" value="true" />
</object>
</div>

NOTE: Pathnames in the page_show_url and page_show_back_url variables are encoded and the encoding is encoded (whew).

Display Photos with Multiple Tags (Boolean AND) using Tags Only Search (includes user_id and m=tags)

Get all of Ohlone College's photos tagged with:

  • "2012" and "graduation" - use: 2012 AND graduation [NOTE: Tthe word "AND" is default and seems to be optional.]
  • Group AND words using parentheses encoded as %28 for open/left parenthesis and %29 for closed/right parenthesis
  • NOTE: Including m=tags searches Tags Only. Not including m=tags option on URL searches Full Text (text and tags).
<div class="embeddedmedia flickr centertag" style="width:495px;">
<span class="source"><a href="http://www.flickr.com/search/?q=2012+graduation&amp;w=11324776%40N00&amp;m=tags">Photos tagged &quot;2012 AND graduation&quot; on Ohlone College's Flickr site.</a></span>
  <object type="application/x-shockwave-flash" 
  data="http://www.flickr.com/apps/slideshow/show.swf?v=71649" 
  width="495" height="372">
    <param name="flashvars" value="offsite=true&amp;lang=en-us&amp;page_show_url=%2Fsearch%2Fshow%2F%3Fq%3D2012%2Bgraduation%26m%3Dtags%26w%3D11324776%2540N00%26ss%3D2&amp;page_show_back_url=%2Fsearch%2F%3Fq%3D2012%2Bgraduation%26m%3Dtags%26w%3D11324776%2540N00%26ss%3D2&amp;method=flickr.photos.search&api_params_str=&amp;api_tags=2012%2Cgraduation&amp;api_tag_mode=bool&amp;api_user_id=11324776%40N00&amp;api_media=all&amp;api_sort=date-posted-desc&amp;jump_to=&amp;start_index=0" />
    <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=71649" />
    <param name="allowFullScreen" value="true" />
</object>
</div>

NOTE: page_show_url and page_show_back_url (shown in blue with red variables) are encoded and the encoding is encoded (whew).

Display Photos using Full Text Search (includes user_id, but not m=tags)

A Full Text search searches tags, descriptions, and titles; do not include m=tags on a Full Text search.

NOTE: Tested and validates. Off-site service: flickr.com.

Get all of Ohlone College's photos with:

  • All of the words "awards", "ceremony" and "2011" in the tags, description, and/or title
  • Boolean AND and OR are not allowed in keywords (unless those are words being searched for)
<div class="embeddedmedia flickr centertag" style="width:495px;">
<span class="source"><a href="http://www.flickr.com/search/?q=awards+ceremony+2011&amp;w=11324776%40N00">Photos described as or tagged &quot;awards ceremony 2011&quot; on Ohlone College's Flickr site.</a></span>
  <object type="application/x-shockwave-flash" 
  data="http://www.flickr.com/apps/slideshow/show.swf?v=71649" 
  width="495" height="372">
    <param name="flashvars" value="offsite=true&amp;lang=en-us&amp;page_show_url=%2Fsearch%2Fshow%2F%3Fq%3Dawards%2Bceremony%2B2011%26w%3D11324776%2540N00%26ss%3D2&amp;page_show_back_url=%2Fsearch%2F%3Fq%3Dawards%2Bceremony%2B2011%26w%3D11324776%2540N00%26ss%3D2&amp;method=flickr.photos.search&amp;api_params_str=&amp;api_text=awards+ceremony+2011&amp;api_tag_mode=bool&amp;api_user_id=11324776%40N00&amp;api_media=all&amp;api_sort=relevance&amp;jump_to=&amp;start_index=0" />
    <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=71649" />
    <param name="allowFullScreen" value="true" />
</object>
</div>

 

 

 

TESTING TESTING TESTING - MAY NOT BE WORKING RIGHT:

By Full Text Search (fancier boolean search example) using user_id (search descriptions, titles, and tags) (without m=tags)

NOTE: Tested and validates. Off-site service: flickr.com.

NOTE: I know that "sigma" and "chi" and "eta" are not tags but are in some photo descriptions or titles (at least for now on February 16, 2011), and I know that "respiratorytherapist" is not in the full text but is a tag.

Get all of Ohlone College's photos tagged with "sigma chi eta" (group these words inside parentheses) or "respiratorytherapist" (uses user_id). Group AND words using parentheses encoded as %28 for open/left parenthesis and %29 for closed/right parenthesis. Do not use m=tags which switches to search only tags.

<div class="embeddedmedia flickr centertag" style="width:495px;">
<span class="source"><a href="http://www.flickr.com/search/?q=%28sigma%2Bchi%2Beta%29+OR+respiratorytherapist&amp;w=11324776%40N00">Photos described as or tagged &quot;(sigma chi eta) OR respiratorytherapist&quot; on Ohlone College's Flickr site.</a></span>
  <object type="application/x-shockwave-flash" 
  data="http://www.flickr.com/apps/slideshow/show.swf?v=71649" 
  width="495" height="372">
    <param name="flashvars" value="offsite=true&amp;lang=en-us&amp;page_show_url=%2Fsearch%2Fshow%2F%3Fq%3D%2528sigma%2Bchi%2Beta%2529%2BOR%2Brespiratorytherapist%26w%3D11324776%2540N00%26ss%3D2&amp;page_show_back_url=%2Fsearch%2F%3Fq%3D%2528sigma%2Bchi%2Beta%2529%2BOR%2Brespiratorytherapist%26w%3D11324776%2540N00%26ss%3D2&amp;method=flickr.photos.search&amp;api_params_str=&amp;api_tags=(sigma%2Bchi%2Beta)+OR+respiratorytherapist&amp;api_tag_mode=bool&amp;api_user_id=11324776%40N00&amp;api_media=all&amp;api_sort=date-posted-desc&amp;jump_to=&amp;start_index=0" />
    <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=71649" />
    <param name="allowFullScreen" value="true" />
</object>
</div>

NOTE: page_show_url and page_show_back_url (shown in blue with red variables) are encoded and the encoding is encoded (whew).