Flickr Editor Guide 7.x-1.6

This user manual is written from a content editor's perspective, but also sitebuilders 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 some basic Flickr insert instructions 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 Flickr Filter.

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, 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 other parameters to use, like mintitle and minmetadata. 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. Try to add some of them to find out how they work.

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 give 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:

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

For all other sizes the following parameters can be used:

• num : The number of photos to show.
• tags : Flickr tags to filter on.
• 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 https://drupal.org/project/autofloat (recommended)
OR
[flickr-photo:id=9247386562, class=floatright]
OR
[flickr-photo:id=9247388074, style=float:left;]

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=72157645025390895, 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-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: Responsive slideshow (for group, set and user IDs only)
• y: Basic responsive slideshow (for set and user IDs only)

n (320px) and c (800px) sizes are missing on Flickr images uploaded before March 1, 2012. Photos with non existing sizes will be skipped in albums.

Parameter examples (omit a parameter to use the default value):
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
Note that no quotes are used and a space to separate multiple classes.
style=float:left; border:solid 2px; : Note that no quotes are used, but with a semicolons between styles.

size=q
Big square (150px). The sizes x and y display a slideshow and ignore number, media, tags 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 even partial. 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.

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 albums only, also public.

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 tagged as term from node
• 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.

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.

Further reading

Now read How to manage photos on Flickr.com.