The supplied CSS settings for the Flickr Slideshow work fine on a normally sized site with a content areas of at least 550px and a sidebar of at least 240px.
However, you do have the ability to control fonts, sizes, styles, margin and paddings by overriding the settings in the Slickr Flickr CSS file. The CSS file is named slickr-flickr.css and is located in the Slickr Flickr plugin directory. Please note that if you change this you are doing so at your own risk. However that risk is quite small as if things get messed up you can always just reinstall the Slickr Flickr plugin to get back the original settings. Please note that if you change this file and then upgrade Slickr Flickr then the new file will overwrite the old and any changes will be lost so it is best not to put your customizations in this file.
Better than changing the file directly is to add the overrides in your theme’s CSS file. The name and location of this file will vary according to the theme but it will typically be style.css or custom.css
This is best explained by an example.
Let’s say you have a narrow sidebar (less than 240px). Therefore the ‘small’ Flickr Photos which are up to 240 pixels wide will not fit. Therefore what you need to is scale the slideshow to fit.
You can do this by loging in as admin, clicking on the Theme and then Editor and selecting the CSS file, probably called styles.css
Then add the following line to the CSS to scale (reduce) the image to 100% of the width of the sidebar (Thanks to Bap and Robin for their input on this. This solution will work for all main browsers except IE5 and IE6: that is about 95% of users)
[css]
.slickr-flickr-slideshow.landscape.small div img { max-width: 100% }
[/css]
Now for Thesis Theme Users Only . . .
If you are running the Thesis theme then put this change into custom.css and not style.css
[css]
.custom .slickr-flickr-slideshow.landscape.small div img { max-width: 100% }
[/css]
Remember to include the .custom at the beginning of the line.
Also Thesis allows you to get even more specific so if you want to customize a particular slideshow on a specific page then Thesis lets you do this. So, if the page is has a URL of my-example then the CSS change is
[css]
.my-example .slickr-flickr-slideshow.landscape.small div img { max-width: 100% }
[/css]
If you want to find out more about Thesis then check out Ten Reasons To Use the WordPress Thesis Theme
Hi David,
Have you tried adding class=”alignright” to the slickr-flickr command?
Here is an example – http://www.slickrflickr.com/2906/slickr-flickr-2-3-release/
Hi, loving the plugin, but having a hard time getting the slideshow to float right in the main body of text. I edited the css style sheet, but can’t get the text to wrap, and can’t seem to find anyone else asking this question. Any thoughts?
Dennis, Make sure you are using size=”small” and then use “bottom” to reduce the amount of white space. For example, bottom=”-20″ (minus 20) reduces the bottom margin by 20px
1 got one question, I placed the slideshow in my sidebar, everything works great, but I got a lot of space under the picture, how can I this fixed?
Hi Dave
No-one has asked for this feature before and it’s a great idea. We’ll add it to the list of suggestions for new features. Thanks very much.
Liz
Is there any plans to include the ability to search for the title or description? It’s “text” within the Flickr API.
Thanks,
Dave
Hi Walter,
Thanks for your feedback.
Please see the video tutorial http://www.slickrflickr.com/2126/improved-flickr-slideshow-sizing-and-scaling/ for a way to resize without changing CSS. The images should resize according to the size of the container.
Please go to http://www.slickrflickr.com/upgrade to upgrade to Slickr Flickr Pro. The Pro version allows you to set the “height” and “width” parameters explicitly which is useful if you have non-standard images (i.e 16×9 or square instead of the typical 4×3 and 3×4)
http://wordpress.org/extend/plugins/slickr-flickr/ is showing version 1.27 – next release will be 1.28 in a weeks time.
Regards
Russell
Hi Russell
Great plugin! It works (almost) perfectly for me 😉
I adapted the CSS slightly in order for the medium images to fit into my layout. It looks fine,
i.e. the width fits into my 440 pixel layout. But the landscape images are still larger, hence the horizontal scrollbar. How can I reduce the actual image size? Do I need the pro version for that?
How can I upgrade to the pro version, for that matter?
Gaging from your site the current version is 1.27, on WP.org we still run 1.24?
Thanks for any support!
Hi Robin,
Thanks for your comments – you are right I will update the tutorial as both you and Bap suggest.
My hesitation before was that the max-width, max-height was not supported in Internet Explorer 6 but now IE6 is down to 4.4% of the market I think I should go ahead.
Regards
Russell
I was getting frustrated because the photos in my slideshow widget were stretching and getting out of proportion. (I have a lot of non-standard size photos), but with Bap’s tip this plug-in now works beautifully. Thank you all!
Maybe you should add/replace the line in your tutorial, Russell?
.slickr-flickr-slideshow.landscape.small div img { max-width: 100% }
Hi Matt,
Unfortunately Slickr Flickr does not have a carousel display similar to slideoo – it just has a gallery, a galleria and a slideshow.
I can suggest the Featured Content Gallery WordPress plugin, where are each image acts as a link through to a featured post.
The ‘real estate’ that is in the header on your home page is ‘prime’ and therefore should be promoting your products and hence these should be clickable images and not just passive Flickr photos.
You can see an example of Featured Content Gallery at http://www.cabotshores.com
Hope that helps
Regards
Russell
I have used slideoo with my flickr account for a while now and I thought it worked relatively well. If you take a look at my site (in construction) you will see a blank space under my logo and company name. This was once about 4-5 pictures wide and the pics would change each time I hit refresh. I don’t know what happened to slideoo, but it is gone now. I’m hoping I can use your plug in to display several pics at once across the top of my wordpress page. Can you show me how to do this if it is possible and how I can get the code so I can place it in my site settings under custom header area? I would greatly appreciate any assistance you could give me.
thank you very much, Russell!!
It works!
Hi Leyla,
Thanks for your feedback on Slickr Flickr.
There is not a setting to center the slideshow however you can do it by adding a line of CSS to either the plugins’s slickr-flickr.css file or your theme’s CSS file
[css]
.slickr-flickr-slideshow div { text-align: center; }
[/css]
If you make the change to the slickr-flickr.css file then your update will get overwritten when you next upgrade the plugin. I therefore recommend you make the change to one of your theme’s CSS files instead (e.g http://www.thekedbl.com/wp-content/themes/coraline/style.css)
The slideshow will look like this:
Hi Russell,
plugin is great, thank you. I was searching for the good alternative to nextgen as it worked quite clumsy at my blog, and found slickr much better. But the problem with the center position of different types (vertical/horizontal) is still exists. Please, see what I am talking about here http://www.thekedbl.com/?page_id=846 Maybe you could help me to get rid of left-positioning of vertical photos in the slideshow. I kindly appreciate your help!
Hi Dave,
Thanks fpr the feedback.
Line 13 of the file slickr-flickr.js has the transition time of 500 milliseconds. Maybe try replacing this by 1000?
I can look at adding this as a parameter in a later release
Regards
Russell
Fantastic Plugin! Thanks for all of your work on it.
One question– is there anyway to control the speed of the transitions? I know how to change the duration of each picture, but I would really like to slow down the transitions on a project I am working on. Any thoughts would be appreciated!
Glad it is working for you. I would appreciate it if you would give the Slickr Flickr plugin a rating (a good one 😉 at http://wordpress.org/extend/plugins/slickr-flickr/ Thanks. Russell
you probably hear this a lot but you are awesome! Worked like a charm. Thanks for your help!
Hi HD,
The issue is down to a line in your theme’s stylesheet http://cornerofficemusic.com/wp-content/themes/K21.0.3/styles/Custom/custom1.css
.secondary div { margin: 20px 0px 0px; padding: 0px; position: relative; }This line is overriding the plugin stylesheet and causes the slides to appear one below another.
I think you can fix this by adding the following line to your theme stylesheet :
.secondary .slickr-flickr-slideshow div { position: absolute; }The plugin is amazing! I love it! But I am currently having problems with it. I have the plugin installed on my website and for some reason the second picture always shifts down and on the third picture there is a blank space which also shifts my entire sidebar down. I do not know why this happens. Any help would be much appreciated.
Thanks for your reply Russell. Naturally I tried the fix again this morning now it works… not sure why I could not get to to work yesterday. Sorry about that. However, I still get that “inactive” message on many of the slickr-flickr files if I access them though the edit plugin panel in WordPress (even though they are obviously not inactive since the fix works, so don’t waste any time on this). Just an FYI… this is what I see: http://www.electronicmoon.com/downloads/emscreen.jpg
Thanks a lot for a very nice plugin!
Hi Karma,
I am bit confused by what you mean by the css file being inactive – I am not seeing any message of this type on my WordPress installation for either active or inactive plugins. Wher edo you see this message.
As regards the CSS you can put it in either the slickr-flickr.css file or your theme’s CSS file. The latter is probably better since it will not be overwritten when the plugin is upgraded. For example, iIf you happen do be using the Thesis theme that you would put it in the custom.css file.
I installed the plugin today, the “slickr-flickr.css” file is listed as inactive when you select it in the admin menu… so where should the code go for narrow sidebars? Thansk!!
Bap,
Thanks for your comment which is technically correct as a general rule.
However, I used width rather than max-width in this example because a) the example specifically deals with scenarios where 100% scaling reduces the sizes of the image to the full width of the sidebar; and b) because max-width does work reliably in Internet Explorer see http://reference.sitepoint.com/css/max-width
Dan : to avoid stretching images you should use “max-width”/”max-height” instead of just “width”/”height”
By doing this only images larger than the specified dimension are reduced
The example given would then become :
.slickr-flickr-slideshow.landscape.small div img { max-width: 100% }
Hi Garrett
In a recent release I consolidated the bulk of the CSS into a single file slickr-flickr.css.
Apologies for not updating this post with the correct CSS file details – will do so now
Russell
Hi, I am trying to do the css tweak on version 1.13, the newest version, but there is no slickr-flickr slideshow.
Here is what is available:
Plugin Files
* slickr-flickr/slickr-flickr.php
* slickr-flickr/galleria/galleria.css
* slickr-flickr/galleria/galleria.noconflict.js
* slickr-flickr/galleria/jquery.galleria.js
* slickr-flickr/flickr.php
* slickr-flickr/readme.txt
* slickr-flickr/shadowbox/shadowbox.js
* slickr-flickr/shadowbox/shadowbox.css
* slickr-flickr/slickr-flickr-admin.php
* slickr-flickr/slickr-flickr-admin.css
* slickr-flickr/lightbox-slideshow/index.html
* slickr-flickr/lightbox-slideshow/lightbox-slideshow.js
* slickr-flickr/lightbox-slideshow/lightbox.css
* slickr-flickr/lightbox/index.htm
* slickr-flickr/slickr-flickr-admin.js
* slickr-flickr/slickr-flickr.css
* slickr-flickr/slickr-flickr.js
* slickr-flickr/slickr-flickr-public.php
Is it the lightbox slideshow?
Hi Dan,
Please let me know the URL of the page that contains the slideshow, your Flickr ID and the tag you are using and I will take a look at this.
Regards
Russell
Hi All,
I have added the custom CSS tweak shown above to my Thesis custom files and it works a treat – except that the images are stretch to 100% but the height isn’t adjusting to match!
Does anybody know how I can do this? I have tried adding height: 100%; but this doesn’t do it.
Help!??
Hi There Whitney.
We’ve taken a look at your blog and see you have a nice 2×2 gallery of Slickr Flickr thumbnails in the sidebar. As for your specific question, Slickr Flickr cannot at this time, make thumbnails at a different size to the ones it currently produces. However, we would consider adding this functionality in a later release if you can define it more for us. For example, what size would the thumbnails need to be 200px x 200px?
On another note your blog looks like it has a small bug in it. When we looked, the sidebar was way down on the bottom right, and we had to scroll for a long time to see the Slickr Flickr Gallery. That is not right. When we looked at the code on your page, it seems that the other flickr plugin you are using – something called flickr thumbnails photostream – is producing invalid HTML.
Now this may not be the cause of the problem you are having with the right hand sidebar, but I would start by temporarily disabling that plugin to see if the sidebar issue goes away. If it does, contact the developer of that plugin and ask for a fix. If removing the plugin does not remove the sidebar issue, then you will have to investigate further.
Liz
Hi, hoping you can help us as we are complete newbs to this stuff. We have a widget installed for the sidebar with a gallery of thumbnails (the small square size) and we would much prefer for the sidebar gallery to be one strip of larger square thumbnails instead of the two side-by-side. What code would we add to the slickr flickr code to make this happen? If you can look at our site, the part we are talking about is on the home page on the right in the “student theater festival” gallery. Thank you so much for your help. This tutorial has been awesome!
.-= Whitney Details´s last blog ..live from the studio =-.