How To Use Slickr Flickr To Create a Slideshow Or Gallery

  • Log in to your Flickr account and tag all the photos you want to display on a particular page of your wordpress site. If your tag is more than one word make sure you place double quotes around the tag e.g "South Africa"
  • Back on your wordpress site put into your post, page or sidebar, the following shortcode but between square brackets: [ and ]
    slickr-flickr tag="South Africa"

Demonstration Slideshow

Demo of a slideshow with my photos from Flickr tagged with “Portes de Soleil”

Misty Mountain

One Horse Open Sleigh

On foot or on ski Through Avoriaz

Les Cornettes

Sun and Ski at La Chapel d'Abondance

Mini Ski

Watch Out for Hurtling Horse

Not Thinking Of England in March

Neighbouring Chalet

Slickr Flickr Screenshots

Gallery with my photos from Flickr tagged with Slickr Flickr with Lightbox display at the medium size

How to Use The Plugin

The Flickr show is included within a post or a widget using the slickr-flickr short code

For example to show my pictures from Flickr that have been tagged with “bahamas” I would use :

slickr-flickr tag=”bahamas”

The Slickr Flickr Attributes (Parameters) are as follows:

  • id – the Flickr ID of the user – you can get this from http://idgettr.com/
  • group – set to ‘y’ if the Flickr Id belongs to a group rather than a user (default is n)
  • use_key- set to ‘y’ to force the use of the API key (default is n)
  • api key – your Flickr API key – this allows you to fetch up to 50 rather than just 20 photos – but only when searching tagged photos, groups or favorites not for sets or friends
  • search – photos (default), groups, favorites, friends or sets
  • tag – identifies what photos to display – (but is ignored where the search is for friends, groups or favorites)
  • tagmode – set to ‘any’ for fetching photos with different tags – default is ‘all’
  • set – number of the photoset – used when search=sets
  • items – maximum number photos to display in the gallery or slideshow (default is 20)
  • type – gallery, galleria or slideshow (default is gallery)
  • captions – whether captions are on or off (default is on)
  • delay – delay in seconds between each image in the slide show (default is 5)
  • transition – slide transition time in seconds (only available in Slickr Flickr Pro edition)
  • start – number of the starting slide in the slideshow or ‘random’ for a random start (default is 1) – only applies to the slideshow
  • autoplay – on or off (default is on) – only applies to the galleria right now
  • pause – on or off – default is off
  • orientation – landscape or portrait (default is landscape)
  • size – small, medium, m640, large or original (default is “medium” but only use “original” or “medium” for galleries and only use “large” if you actually have large photos on Flickr – over 1024 width typically) -(For the Galleria only you need to set the size of the galleria explicitly when using “original” size photos – e.g galleria_options=”height:600;width:800″
  • width – width of slideshow (only available in Slickr Flickr Pro edition)
  • height – height of slideshow (only available in Slickr Flickr Pro edition)
  • thumbnail_size – square (75x75px), thumbnail (100x75px), small (240x180px) – default is square (only applies to gallery)
  • thumbnail_scale – percentage scaling factor – default is 100 – recommend the range is between 50 and 100 to maintain image quality and performance (only applies to gallery)
  • thumbnail captions – on or off – default is off – adds the photo title as a caption beneath each thumbnail – typically use this when you use larger thumbnails (only applies to gallery)
  • photos_per_row – narrow the gallery to limit the number of photos per row – values would typically be in the range from 2 to 6
  • align – align the slideshow or gallery in the center, to the left or to the right (default is left) – For the Galleria this parameter is ignored as the galleria_options are used to control formatting
  • border – show a border around the slideshow images – on or off (default off)
  • descriptions – on or off (default off) – show the photo description underneath the caption
  • flickr_link – on or off (default off) – make the caption a link back to the photo on Flickr
  • flickr_link_title – text of link to photo on Flickr
  • flickr_link_target – set to “_blank” to show photo on Flickr in a new tab/window
  • link – send the user to another URL when they click on the slideshow
  • attribution – line that can be used to credit the photographer above the slideshow or gallery
  • sort – date, title, or description
  • direction – ascending or descending – used when sorting photos

You can set the parameters on each individual slideshow or set default values using the Admin Settings.

Examples

The following are example uses of the different parameters.

Please note that I have added removed the “[" and the "]” around the “slickr-flickr command” otherwise the plugin runs and shows the slideshow and not the code. When you put the code in the your blog posts make sure you include the square brackets.

Gallery of up to 5 of my France photos with popup display at medium size (either width or height around 500px)

slickr-flickr tag="france" items="5" type="gallery"

Gallery of my France photos with popup display at original size.

slickr-flickr tag="france" type="gallery" size="original"

Slideshow of up to 12 my France photos with a delay of 3 seconds between slides displayed at medium size (width around 500px) and without captions

slickr-flickr tag="france" items="12" type="slideshow" captions="off" delay="3"

Slideshow of up to 6 my doggy photos starting randomly which are in portrait format (their width is less than their height) where their size is around 180px by 240px. I would typically use this format for displaying photos in a text widget in a sidebar.

slickr-flickr tag="dogs" items="6" type="slideshow" orientation="portrait" size="small" start="random"

Slideshow of up to 12 photos tagged with Barcelona by Klaus Dolle.

slickr-flickr tag="barcelona" items="12" type="slideshow" id="67057161@N00"

Plugin Restrictions

Slickr Flickr has the following restrictions:

  • Flickr serves photos at standard sizes: square, thumbnail, small, medium, medium 640, large and original. Typically you will use “small” for slideshows in sidebar widgets, “medium” or “m640″ for slideshows in the main content area and either “medium”, “m640″ or “original” for galleries. Slickr Flickr has the limitation of only handling photos at these sizes. However, you can use CSS to resize the photos. The Small Slideshow Tutorial shows how to handle a narrow sidebar.
  • There is a limit of 20 photos per gallery or slideshow if you just specify your Flickr ID, and a limit of 50 per page when you specify your Flickr API key, and the number is unlimited with Slickr Flickr Pro as it makes multiple requests to Flickr in the background to fetch as many photos as you want to display in your slideshow or gallery.

More Slickr Flickr Links

Updated by on .

{ 249 comments… read them below or add one }

Russell July 2, 2014 at 9:02 am

Hi Justin,

If you would like to upgrade to the latest Slickr Flickr version (released in late May) as it has the necessary changes.

For more please see http://www.slickrflickr.com/2848/flickr-api-now-uses-https-for-searching-photos/

Justin July 1, 2014 at 11:08 am

Getting the error “The Flickr API returned the following error: #95 – SSL is required” on all my pages.

Apparently it is related to a change made by Flickr? https://www.flickr.com/help/forum/en-us/72157645440333073/

I changed the php file from http to https for the lines below but it still didn’t work. Any thoughts?

var $rest_endpoint = ‘http://api.flickr.com/services/rest?’;
var $upload_endpoint = ‘http://api.flickr.com/services/upload?’;
var $replace_endpoint = ‘http://api.flickr.com/services/replace?’;
Justin recently posted…Happy Anniversary, TaxpayersMy Profile

Russell May 28, 2014 at 8:44 am

Hi Daryl,

For performance reasons, WordPress caches the feed of photos from Flickr for 12 hours. This is held in a “transient” in the database. This is another layer of caching that sits below your browser cache and any caching plugins cache or a CDN cache.

However, there are a couple of ways to break the Flickr feed cache and make Slickr Flickr and WordPress make the trip to Flickr to fetch the latest photos:

  1. Go to Slickr Flickr admin settings and click the “Clear Cache” button.
  2. Add a cache_expiry to the slickr-flickr command. e.g. cache_expiry=3600 will set the WordPress feed cache down to 1 hour

Typically you only want to reduce the cache expiry when you are adding new content to particular shows.

Russell May 28, 2014 at 8:29 am

Hi Daryl,

Sorry for the delay in answering your question. I have been busy with the Slickr Flickr 2.0 release.

I have answered your question here

Russell May 20, 2014 at 5:56 am
Monika Petroczy May 20, 2014 at 3:43 am

http://www.antiochsb.edu/campus-tour/

I love this plug in with so many options!
Monika Petroczy recently posted…“Jeans for Giraffes” Fundraiser – now until June 21!My Profile

Xin Xiao May 19, 2014 at 8:04 pm

Is there a syntax to have multiple tags (with a logical “and” or “or”)
eg
[slickr-flickr tag="lily", "London", "another"][/slickr-flickr]
[slickr-flickr tag="lily", "London", "another"][/slickr-flickr]

Perhaps use something like – tagmode=or tagmode=and
Thanks for a powerful solution!

Andrew Wilcox May 12, 2014 at 8:25 am

Trying to get Flickr slideshow working.
Installed and activated plugin.
Filled in fields in settings inc API.

Shortcode slickr-flickr search=”sets” set=”72157644198088098″ items=”50″
Error message on post “The Flickr API returned the following error: #95 – SSL”

What should I do?
Andrew Wilcox recently posted…A lot of lots for today’s auction at Badger Farm WinchesterMy Profile

Daryl Luk March 27, 2014 at 10:54 am

Hi Russell,

I have some photos in Flickr tagged with a keyword ”Picks-3-2014″, some photos are in portrait and some in landscape. In my Wordpress page with “galleria” setting, the portrait pictures’ top and bottom are cut off in the slider show; the landscape photos also have some area on both left and right get cut off. Is there a way to fix it? Is that my parameters setting not correct?

You can see a testing web page here: http://thebcpa.org/test-2/

And the original group of pictures is here tagged with “Picks-3-2014″: http://www.flickr.com/photos/119734467@N08/sets/72157642983476083/

Please help.

Thanks,

Daryl

Daryl Luk March 26, 2014 at 11:40 pm

Hi Russell,

I have some photos tagged, then I added a gallery with the tag in a page. The photos displayed correctly. If I then add a few more new photos in Flickr with the same tag. The gallery in my web page will be get updated to displayed the additional photos that I just newly added, not even after a web page refresh. Will the plug-in automatically detected there are new photos added and included them in the web page or I have to do something also (other than refreshing the web page which doesn’t seem to do the trick)?

Thanks,

Daryl

Russell February 20, 2014 at 7:37 am

Hi Chris,

All the thumbnails need to be present for the lightbox to operate,however you could use CSS to hide all but the first 4 thumbnails.

Please see this example: http://www.slickrflickr.com/support/how-to-show-a-few-thumbnails-in-a-large-gallery/

Chris January 29, 2014 at 5:06 pm

great plugin!! needing some help with the short code… I want to be able to display 4 images in the gallery as thumbnails then click an image get the lightbox but of all 340 photos in my flickr tag? Is that possible?

Russell December 18, 2013 at 10:56 am

Try slickr-flickr tag="london" type="slideshow" size="medium" align="center"

Russell December 12, 2013 at 11:05 am

Hi Ivan, Please use slickr-flickr and not slickr-Flickr as the short code

Ivan October 11, 2013 at 8:59 pm

Russell, thanks for supporting the community. I do have a question though. I have installed your plugin, configured the settings with the appropriate info. (tagged by Flickr photos). When I enter the following into my WordPress post:
[slickr-Flickr tag="Castle" type="slideshow" size="small" API key="cec31537a6b6f5c5ac7613c098f4e86f"]

The same shows up as the actual post. No gallery, no pictures…just the code. What am I doing wrong. I have watched almost all of the videos, been to the Help section and no luck.

Any info you can provide would be greatly appreciated.

Respectfully,
–Ivan

to see the post…. it is at: https://kinkiepink.com/blog/

Chris July 5, 2013 at 7:37 am

hi Russell

I am following you and have the ability to post on either the sidebar and the page but what if wanted to use
slickr-flickr tag=”london” type=”slideshow” size=”medium”

as the code and centre it into the middle of the page or post?

I bet its so easy but im not getting it right

Russell April 22, 2013 at 2:01 pm

Andy, please give the URL. Generally this means there is a javascript error somewhere on the page that kills the slideshow.

Andy April 22, 2013 at 1:25 pm

Looks great, gallery loaded fine, but when I change settings to slideshow, it doesnt erm slide.. Just shows one image all the time

Russell March 29, 2013 at 6:41 am

Hi Sarah,

Looking at your page it seems to be working now. I presume it was the capital in Flickr that was the issue.

Just a suggestion for you, you are using “medium” size photos so it is not very efficient.

Try

[slickr-flickr tag="photos" type="slideshow" size="small"]

Sarah March 28, 2013 at 5:22 pm

Hi!

I am trying to create a slideshow in the sidebar of my blog. I entered this short code in a text widget, but the short code appeared on my blog instead of the slideshow, so I am assuming I did something wrong. Any advice?

[slickr-Flickr tag="photos" type="slideshow" size="small" API key="d85c4191c7b73ad1547a251907c456fa"]

Thanks!
Sarah

Russell March 20, 2013 at 4:57 pm

Hi Kathryn,

Thanks for your comments. Use search="sets" set="your set id". For more see http://www.slickrflickr.com/1376/how-to-display-photos-from-a-flickr-photo-set/

Kathryn March 20, 2013 at 3:42 pm

Hello, excited to have found Slickr Flickr! Wondering if there is a way to add a gallery/ slideshow using a Flickr photoset rather than tags?

Thanks,
Kathryn

Russell February 22, 2013 at 6:38 pm

Hi,
You could do this with CSS so the first 3 photos are visible but the rest are hidden.

I ran a successful test of this on a post with ID 1013 to show the first 3 thumbnails in a gallery


.postid-1013 .slickr-flickr-gallery li { display:none; }
.postid-1013 .slickr-flickr-gallery li:first-child { display:inline-block; }
.postid-1013 .slickr-flickr-gallery li:nth-child(2) { display:inline-block; }
.postid-1013 .slickr-flickr-gallery li:nth-child(3) { display:inline-block; }

Marco Vazquez February 22, 2013 at 12:14 pm

Hello, Newbie here.

Is there a way to display 3 thumbnails but when the user clicks the slideshow display more photos?
This is a request of a specific layout and I can’t go over X number of thumbnails but we want to display the rest of the set.

Thanks

Russell February 11, 2013 at 6:43 am

Hi Danilo,

A bit more on photos per row.

Slickr Flickr will naturally use all the available horizontal space so typically you will not need to specify photos_per_row in a widget. It is is really designed for use in a main content section where say you have a gallery of 15 photos and the page is wide enough to have 7 per row which yields 2 rows of 7 photos and 1 row with a single photo. This does not look great. In that case you might want to set photos_per_row=5 to produce 3 rows of 5 photos.

When used in a sidebar, and if no other CSS gets in the way, Slickr Flickr will shows 2 or 3 thumbnail photos per row according to the width of your sidebar without you having to specify how many you want.

If your theme gets in the way then just override the CSS that is adding the excessive padding or margins

Russell February 11, 2013 at 6:28 am

Hi Danilo,

This typically happens if the style of your WordPress theme is overriding Slickr Flickr settings and forcing there to be only one photo by row – either by adding padding, margin or display elements that force the browser to place each list item (thumbnail) on a new line. You are using a slideshow rather than a gallery right now so I cannot be precise about the CSS.

Beth had a similar problem and a single line of CSS resolved the issue: http://www.slickrflickr.com/support/gallery-shows-one-image-per-row/#comment-891

Danilo Fênix February 10, 2013 at 12:54 pm

The photos_per_row option is not working in my widget. Even if I set photos_per_row=”3″, will always result in the display with only one photo per row (ie, everything is in a single column of pictures).

Russell January 30, 2013 at 10:02 am

Mehmet, There is a feature in Slickr Flickr Pro that allows you to publish photos based on the publication date of a post – see http://www.slickrflickr.com/upgrade/publication-date-photos

The idea is that while travelling say, you publish a blog post and then put the following slickr-flickr command in each post to display that days photos form your photostream.

[slickr-flickr date=publish]

A future release of Slickr Flickr will have a photoset browsing feature where each photoset will be represented by a thumbnail with a clickthrough to that photoset. But this is a few months away.

Mehmet December 21, 2012 at 6:21 am

Great plugin but struggling to get it to work.

If I just want all of my galleries/sets to appear on my site using this plugin, how do I do this without having to define a tag each time? While travelling, i want to be able to add photos to my flickr account and then these to automatically appear on my site without having to add code individually for each set. Is this possible?

Russell December 2, 2012 at 9:30 am

Hi Joe,

The settings is exactly the same as before – see under Settings / Slickr Flickr.

Your page has a couple of issues – firstly, you are loading an oldversion of jQuery 1.4.1 – you should use 1.7

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js?ver=3.4.2'></script>

Secondly, the Galleria ‘classic’ theme is not being loaded which is why the photos are not being displayed – check your Slickr Flickr Admin Galleria settings and maybe try loading the Galleria in the header rather than the footer – or vice versa

Joe December 1, 2012 at 10:00 pm

i just updated your plugin for my wordpress based site and the version i just downloaded, 1.43, does not seem to have a “settings” editor like the old one. i was going to make sure all of my flickr information carried over from the previous plugin version because the pages that were using slickr flickr now have no galleries to show, even with the same code that allowed the gallery to be viewed with the previous version. thank you. this is an example of a page that has the gallery code, but no visible gallery: http://www.xcgeek.com/product-review/first-impressions-giro-code-mtn-shoes/

Russell November 11, 2012 at 1:49 pm

kqt – unlikely that ‘nothing’ is showing up – I would expect a “No photos available” or the slickr flickr command to appear in square brackets. What is the URL of the page?

kqt November 8, 2012 at 3:51 pm

Hi, I put the shortcode in my post with the [] brackets, but nothings showing up…
kqt recently posted…Ya Heard?! Chefs Feed – App of the MonthMy Profile

Russell November 8, 2012 at 10:02 am

GL, Most likely you have a typo. WordPress will not call Slickr Flickr if the short code is not correctly specified. Typically this is due to use smart quotes or mismatched quotes rather than normal quotes. Please give the URL of a page showing the untranslated code.

gl November 8, 2012 at 1:51 am

Hi, I have tried to get this working as a sidebar widget in a text box and followed the instructions but as others have also posted with no resolution, I only get the code showing and now photos. Do we need to have another plugin installed so the code works?
gl recently posted…Image Editing & Graphics • Re: Photo Editing TipsMy Profile

Russell October 2, 2012 at 1:58 pm

Random photo selection is a Slickr FLickr Pro feature : see http://www.slickrflickr.com/upgrade/random-flickr-photos

nfrost21 October 2, 2012 at 1:52 pm

Congratulations on a great plugin.

Is there any option to randomize the returned selection of flickr images?
nfrost21 recently posted…Hello world!My Profile

Russell October 1, 2012 at 10:15 am

Nicki, For cropping settings see http://galleria.io/docs/options/imageCrop/.

On your page you might want to use a larger photo and if you have landscape format photos your code could be similar to the following:

[slickr-flickr tag="whatever" size="m640" galleria_options="height:480;width:640;imageCrop:landscape"]

Just play around with the setting until you get the desired effect

Nicki September 30, 2012 at 10:43 am

Hi
Just starting to build my website using your Flickr plugin (I’m new to all this so apologies if this seems really dumb!!).
The photos on my Flickr stream are appearing as normal but when I imported onto my website (using Slickr Flickr) some of the photos are being cropped (http://www.appletree-photography.com/?page_id=12) ….. how can I stop this please?
Thanks
Nicki
Nicki recently posted…Welcome to Appletree Photography!My Profile

Cin September 22, 2012 at 7:49 pm

Thanks so much Russell!! :)

Russell September 22, 2012 at 6:31 am

If you want to do display a random selection of photos from a larger group then this is available in Slickr Flickr Pro – see http://www.slickrflickr.com/upgrade/random-flickr-photos.

Russell September 22, 2012 at 5:59 am

@Cin,

If you fetch 20 or less photos Flickr RSS is used and this always fetches the latest photos. If you ask for up to 50 photos then it uses the Flickr API then it will always selected the same photos according to the parameters you pass. You can use “before” “after” and “date_type” to select photos either based on the date published or the date the photo was taken. See http://www.slickrflickr.com/2089/how-to-search-flickr-photos-by-date/

Cin September 22, 2012 at 12:23 am

Follow-up to my last question – here’s the problem:
With the api key, it displays the same (up to 50) photos, even if I clear the cache.
If I just use my Flickr ID, it displays my more recent photos, but only 20.
How can I display 50 photos – either most recent or random, but not the same 50 photos cycling every time?
Thanks so much for your help with this!

Cin September 21, 2012 at 10:22 pm

Hi Russell,
I’ve cleared the cache, and also tried cache=”off”, but it still keeps showing the same photos on my site – is there a parameter for showing the latest/newest photos?

Russell August 23, 2012 at 10:34 am

Hi Oscar,

Have you cleared the WordPress RSS cache? (use button in sidebar on Slickr Flickr Admin page)

If the plugin shows 25 when you ask for 28 photos then you only have 25 photos publicly available on Flickr. Log out of Flickr and then view the collection of tagged/photosets photos.

The options page just defines default settings – the settings of the individual slickr-flickr command override the defaults.

Use type=”galleria” for a carousel of small thumbnails below the main photo.

Regards

Russell

Oscar August 22, 2012 at 11:55 pm

First of all, this plugin its great!!!

Ok, i uploaded 28 photos to flickr and got the Flickr API Key. Then in the code i put items=”28″ but only shows 25. It shows 5 photos per row, so do in need to fill the last row with 2 more photos? i mean, to complete the 30?

Another question, any changes to i make on Options, doenst apply and allways shows the photos as thumbnail and when click in any photo opens the same window with the original size photo. I want to show a slideshow with thumbnail below.

Thank you

Russell August 14, 2012 at 9:37 am

@James, please supply the URL of the page – if WordPress is not translating the slickr-flickr short code this is almost always due to a typo in the short code or incorrect quoting.

James August 14, 2012 at 9:20 am

Hi,

Mine is not working, it shows the code rather than any images, I have the API and Flickr keys required.
And I did the following on my Sidebar:

[slickr-flickr tag="football" type="gallery" size="small"]

And then that is all it shows in the website as well ?

Russell July 17, 2012 at 6:08 pm

Daniel, why would you set photos_per_row=”0″ ?

Leave a Comment

CommentLuv badge

{ 2 trackbacks }

Previous post:

Next post: