Flickr Editor Guide 7.x-1.7

This user manual is written from a content editor's perspective, but also site builders should start here (after installation and configuration).

The Flickr module provides an easy way to embed Flickr images on your website. Some functionalities depend on the configuration by the sitebuilder. Most are covered here, including how to find out if they are activated.

In addition you should read How to manage photos on Flickr.com.

Flickr Filter

Insert Flickr photos, albums or slideshows directly in the text of a post, using a text filter tag with a certain syntax.

An example to follow step by step

Add content at node/add for example to create an article. Give the new post a title, e.g. Flickr Filter test. Select a Text format that offers the filter to insert Flickr images. You should see expendable Flickr Filter options under the Text format select field. If none of the formats offer the possibility to insert Flickr photos, try with another content type (e.g. a Basic page). If none of the available content types offer you the possibility to embed Flickr photos, ask the sitebuilder to install the Flickr module and enable the Flickr Filter sub-module.

You'll find some sample tags in the text of this guide page. Copy and paste the text of the two sections below 'Single photo' and 'Album' into the Body field to have a working example out-of-the-box. Remember to paste as plain text (Ctrl+Shift+V) if you use Rich Text editing to avoid the formatting coming along as well. Click Save at the bottom and look at the result (to do each time you make a change and want to see how it looks like).

Single photo

Filter syntax

The filter format is:
[flickr-photo:id=7357144724, size=m]
It consists of:

An opening square bracket ([).
The term flickr followed by a dash (-).
The type: photo, photoset, gallery, user, group or favorites followed by a colon (:).
A series of parameters separated by commas: id, size, class, style, num, tags, extend, tag_mode, location, date, media, heading, sort, filter, count, mintitle and minmetadata
A closing square bracket (]).

Photo ID

Change the 'id' of our sample image. Use the Flickr Advanced Search to find a Flickr photo of your own choice. Click one you like. The last number of the URL of the Flickr photo page is the ID, for example https://www.flickr.com/photos/98518260@N02/9244503345/.

Size

See https://drupal.org/node/2170535#sizes.

Try to change the size of our sample image. TAKE CARE, the c (800px) size is missing on Flickr images uploaded before March 1, 2012.

More info at https://www.flickr.com/services/api/misc.urls.html and https://www.flickr.com/help/faq/search/?q=sizes

Float single photos

If the text already wraps around the first image (Lady with phone), the AutoFloat module is active (https://drupal.org/project/autofloat). If not, go back in 'Edit' mode and add to our sample image:
, class=floatright
Put it at the end of the text filter tag above but inside the square brackets. Don't forget the leading comma. This is prefered as it avoids inline styling and is targeted with CSS that can be modified easily.

Also this will work:
[flickr-photo:id=9247388074, size=m, style=float:right;]

If the AutoFloat module is enabled (recommended), it should precede over the existing 'floatleft' and 'floatright' classes found, but not over the inline styles. Thus inline styling is the way to override AutoFloat behaviour. The margins on the 'text side' of the image from autofloat.css get applied anyway, so the text doesn't "lean" against the image.

To pass multiple classes or styles the syntax has to look like:
[flickr-photo:id=9247386562, size=m, class=foo bar, style=float:left; border:solid 2px;]
Thus without quotes, but with semicolons between styles.

Other parameters

Besides id, size, class and style there are mintitle and minmetadata. You'll find examples, their use and default values at the bottom of the text filter help on the 'Edit' page and at the bottom of this section below. Try to add some of them to find out how they work.

For albums you even have more parameters available (see below).

Overlay browser

After saving, click the image to see if an overlay browser is active like Colorbox (recommended) or Lightbox. If the image opens in a new tab or goes to the Flickr photo page, apparently not. Ask the sitebuilder to install one of these.

Album

[flickr-photoset:id=72157634563269642]

You can create an album for a:

user : Most useful in combination with Flickr tags to filter on. User ID 'public' grabs all users CC licensed photos.
photoset : Currently the only way to have an arbitrary album to show as a slideshow.
gallery : The only way to have an arbitrary album with photos from others. Currently no slideshow support. Do not put own pictures in a gallery.
group : Most convenient way to manage the images by multiple Flickr users, e.g. for a sports club website.
user favorite photos : A gallery is preferred as it gives more flexibility. Left for legacy purposes.

All aforementioned parameters that also apply on single images can be used. Obviously the 'id' is now a user, set, gallery or group ID. A number that includes '@' is a user or group ID. A very long number (>16 characters) is a photoset or gallery ID.
Examples:

user : https://www.flickr.com/photos/98518260@N02/9244503345
photoset : https://www.flickr.com/photos/98518260@N02/sets/72157634563269642
gallery : https://www.flickr.com/photos/martinpostma/galleries/72157645025390895

For users and groups you can also use the path alias if it exists:

group : https://www.flickr.com/groups/southseauk

For albums you have the extra sizes 'x' and 'y' available that result in a full featured or basic slideshow over the full content width (responsive). Note that for now a slideshow is only supported for photosets, groups and users and any other parameters are ignored (NO sort or tags).
To add some spacing above and below a slideshow, modify your CSS or add some lines that contain a non breaking space:

&nbsp;
[flickr-photoset:id=72157634563269642,size=y]
&nbsp;

For all other sizes the following parameters can be used:

num : The number of photos to show.
tags : Flickr tags to filter on.
extend : Extends the tag matching to words found in the Flickr photo title or description.
tag_mode : Matches 'all' defined tags (AND) or 'any' (OR).
location : Grab photos near a certain GPS point. Lat/lon/radius (in km)
date : Grab photos taken on a certain date. Also within an interval covering multiple days.
media : photos, videos or all.
heading : To suppress the album title.
sort : Date taken, posted, number of views, random or unsorted.
filter : Interesting or relevant. Only for user albums.
count : To suppress how many are available on Flickr.

Again, you'll find parameter examples, their use and default values at the bottom of the text filter help on the 'Edit' page and at the bottom of this section below.

Instructions as seen in the filter tips on an 'Edit' page (slightly edited)

Insert a Flickr photo. A working example:

[flickr-photo:id=7357144724, size=m, mintitle=999, minmetadata=999] (accepts only the parameters id, class, style, size, mintitle and minmetadata)

To float single photos use [flickr-photo:id=9247386562, class=\"floatright\"], [flickr-photo:id=9247388074, style=\"float:left;\"] or use https://drupal.org/project/autofloat (recommended).

Insert a Flickr album. Working examples:

[flickr-photoset:id=72157634563269642, size=s, num=8, tags=kids/men, media=all, sort=random, count=false, mintitle=999, minmetadata=999, heading=none]
[flickr-gallery:id=72157648989290536, size=q, num=4, sort=views]
[flickr-group:id=91484156@N00, size=q, num=8, tags=flowers, media=all, sort=random, count=false, mintitle=999, minmetadata=999, heading=none]
[flickr-user:id=lolandese1, size=q, num=6, tags=kids/men, media=all, sort=random, count=false, mintitle=999, minmetadata=999, heading=none]
[flickr-user:id=public, size=q, num=10,tags=Augusto Canario, filter=interesting, sort=views, extend=true]
[flickr-user:id=public, size=q, num=8,location=48.867556/2.364088, date=2015-01-11, filter=interesting, sort=views]
[flickr-favorites:id=lolandese, size=q, num=4, tags=tomosborn/people, media=all, sort=random, count=false, mintitle=999, minmetadata=999, heading=none]

Common sizes:

s : small square 75
t : thumbnail, 100 on longest side
q : big square 150
m : small, 240 on longest side
n : small, 320 on longest side
- : medium, 500 on longest side
x: Full featured responsive slideshow (for group, set and user IDs only)
y: Basic responsive slideshow (for set and user IDs only)

The 'c' size (800px) is missing on Flickr images uploaded before March 1, 2012. Photos with non existing sizes will be skipped in albums.

TIP: Not only the node body but also blocks make use of a text format. Build your own custom Flickr album block using the Flickr Filter syntax.

PARAMETER EXAMPLES. Omitting a parameter will result in the default value to be used.
id=lolandese1
A photo, set, user or group ID. id=public grabs CC licensed public photos (only for [flickr-user:...]). Default: id=@default_userid (@: set in configuration). Valid ID values: numeric ID (the one that contains a '@'), path alias, Flickr username or the user's email.

class=floatleft foo bar
Syntax as in HTML. Wrap the value in quotes (or not) and put spaces between multiple classes. Applies to the outer HTML element of a photo or album.
style=float:left; border:solid 2px;
Syntax as in HTML. Wrap the value in quotes (or not) and put semicolons between different style declarations. Applies to the outer HTML element of a photo or album.

size=q
Big square (150px). The sizes x and y display a slideshow and ignore number, media, tags, location, date and sort settings. Default single photo: size=@default_size, album photo: size=@default_size_album (both @: set in configuration).

num=4
Display 4 photos. Default: num=@default_number (@: set in configuration). For albums only. If set to 1, the single image will behave as such. Heading and counter will be omitted, and float might apply. Used to display a single changing random or recent image.

media=all
Display both photos and videos. Default: media=photos. For albums only.

tags=kids/men
Separate multiple tags with a slash (/). Display all set, group or user photos that contain the indicated tags. Case insensitive, matches any tag, for photosets and galleries even partial. You can exclude results that match a term by prepending it with a - character. Public albums will only display photos that match all tags. Like on Flickr, whitespace gets removed from tags (e.g. 'Victoria park' becomes 'victoriapark'). For albums only.

extend=true
Extend the tag filter to search for matching terms also in the Flickr photo title and description besides Flickr tags. Default: extend=@default_extend (@: set in configuration). For albums only.

tag_mode=all
Matches 'all' defined tags (AND). The other possible value is 'any' (OR). If this parameter is omitted, 'all' is used if no Flickr user ID is known (public search), otherwise 'any' is used. For albums only.

location=48.85837/2.294481/0.2
Display photos within 200 mt from the Eiffel Tower. Lat/lon/radius (in km). Separate values with a slash (/). To get the coordinates for a location, right-click on a Google map and choose 'What's here?' or copy/paste it from the URL. Substitute the comma (,) with a slash (/). Optionally add a radius to force a major number of results to filter on (max. 32 km). If the radius is omitted it defaults to 14 meter and gradually expands to 32 km until a sufficient number of results are returned. For user and group albums only, also public.

date=2015-01-11
Display photos taken on 11 January 2015. Accepted date formats, also relative formats (e.g. 'first day of last month | last day of last month'). Separate two date values with a vertical bar (|) to cover a timespan of multiple days. For user and group albums only, also public. Tip: Use it in combination with a location to grab public photos of an event.

heading=h3
Wraps the album title in HTML tags. Use 'p' to apply no style or 'none' to suppress the title. Default heading=@default_heading (@: set in configuration). For albums only.

sort=views
Display the most viewed Flickr photos first (popularity, slower response after cache clear). Other values: unsorted = recent as delivered by the Flickr API (fastest response), random (slower response after cache clear), taken (newest first), posted (newest first) , added (for groups only, newest first) and id (on photo ID, newest first). Default: sort=unsorted. For albums only.

filter=interesting
Display the most interesting photos. Other possible value: relevant. For user (also public) and group albums only.

count=false
Suppress display of the counter under the album (e.g. 5 out of 124 on Flickr). Default: count=@default_count (@: set in configuration). For albums only.

mintitle=999
Suppress display of the title in the photo captions for images below a width of 999 px. Default: mintitle=@default_mintitle (@: set in configuration).

minmetadata=999
Suppress display of the metadata in the photo captions for images below a width of 999 px. Default: minmetadata=@default_minmetadata (@: set in configuration).

Flickr Block

There are a few blocks that are able to display photos from the node (=post) author's Flickr account. Of course a Flickr ID needs to be set first in the user profile of the node author's account on the Drupal site at user/[uid]/edit. You should find a field Flickr identifier on your profile edit page. If you don't, ask the webmaster to give you the permission.

The blocks you might find to have photos from your Flickr account automatically added to the posts you write are:

Node author photos corresponding with a node's taxonomy term, location or date field
Node author gallery photos (arbitrary selection by author of other's photos) with a gallery title as term from node
Node author favorites (what they like from others, but all together) tagged as term from node
Node author recent photosets

To see if these kind of blocks are available just visit a few pages and see if there is an album outside of the usual content area that contains Flickr photos related to the post. Of course the Flickr module needs to know more than just the node author. You probably find a field on the node edit page to submit some Flickr tags. For example if you made some photos on your trip to Venice and you tagged them on Flickr as such, once you write a blog post about it, you just enter the term 'venice' and, voilà, an album with all your pics appears with it (or selected photos from others that you've put in a gallery with the word 'Venice' in the gallery title). Do not put your own photos in a Flickr gallery. Use a photoset (Flickr album) for that.

You can even use a node's date or geofield to grab your photos near the location the post is about or taken within a certain time span, for example your ski holiday in the winter of 2012. This info is already available on Flickr (extracted from the photos' EXIF data) so you don't need to tag all you pictures.

If it appears you don't have the blocks as mentioned above, ask your webmaster to add them.

Flickr Field

You might also find a dedicated Flickr Field on the node edit page to enter a photo or a photoset ID. Probably it will show directly with the post itself, but the exact implementation depends on the sitebuilder.