With the release of version 1.25 Slickr Flickr now supports Galleria 1.2 options. These allow you to configure around 20 or so galleria options that control slide transitions, thumbnail cropping, image cropping, scaling, margins, captions, image preloading, etc.
The parameter to use is called “options” and the list of parameters is expressed in the same way as CSS where the parameter name and value are separated by a colon and each parameter name/value pair is separated by a semi-colon.
For example
[code]
options="param1:value1; param2:value2; param3:value3"
[/code]
or to give a real example
[code]
options="imageCrop:height; carousel:false; transitionSpeed:1000"
[/code]
Two other features have been added in this release:
- The “Classic” Galleria skin has been tweaked to improve its appearance on a light colored background. The navigation areas have also been reduced in size to obscure less of the image and the carousel navigation has been removed completely when the “small” galleria is displayed as there is simply insufficient horizontal space
- Support has been added for the galleria 1.2 where the “size” is either “small” or “m640”
Below are example of “Medium” and “Medium 640” gallerias.
Example of a Medium Size Galleria 1.2
Here the carousel has been disabled and transition speed reduced, and the images have been cropped to be the height of the “stage”.
[code]
slickr-flickr tag="dogs" descriptions="on" type="galleria" options="autoplay:3000; imageCrop:true; carousel:false; transitionSpeed:1000; transition:pulse""
[/code]
Example of a Medium 640 Size Galleria 1.2
Here the carousel has been enabled, the slideshow starts automatically and slide transition is of type “fadeslide”.
[code]
slickr-flickr tag="dogs" type="galleria" size="m640" options="autoplay:5000; imageCrop:true; carousel:true; transitionSpeed:2000; transition:fadeslide"
[/code]
Commonly Used Galleria 1.2 Options
The options that I will use most often are:
- autoplay – set this to run a slideshow where the value is the time between slides in milliseconds
- showInfo – set to false to hide the caption
- showImagenav – set to false to hide the arrows to navigate to the previous or next photos
- transitionSpeed – the time over which the transition takes place in milliseconds
- transition – the type of transition from one photo to the next
Galleria 1.2 Transition Effects
- fade – fades one image into the next
- flash – fades into background color between images
- pulse – fades the image into background color quickly, then fades the next image
- slide – slides the images horizontally
- fadeslide – combination effect of sliding and fading between images at the same time
Hi Daniele
,
Galleria does not have a parameter for thumbnail sizes – the suggestion on the forum is to use CSS – see https://getsatisfaction.com/galleria/topics/resize_the_thumbnails
Hi Russell, thank you for this cool gallery…i need to resize my thumbnails in the gallery: by default they are 75X75 but i need them 65X65 to fit the sidebar correctly. I didn’t find any command about ’em here (http://galleria.io/docs/options/) please suggest me how to resize.
Thank you again,
Daniele
@anvogolf – user orientation=”portrait”
Hi Russell,
I’m trying to get my flickr photos appearing at their native resolution, ie 375 wide by 500 high.
However at anvogolf.com they appear to be cropped to 375 x 375 square.
In Slickrflickr I’ve set the photo size to Medium 500 x 375.
There doesn’t seem to be a setting for 375 x 500?
Hence all my photos are cropped.
Thanks for any help and the plugin!
Nice post. I like the way you did the gallery. You have a very cute puppies.
Katie, the options your are looking for are thumbCrop, thumbFit and thumbMargin.
You can set these either on Slickr Flickr Admin page as you mentioned above or on the slickr-flickr command line. The command line settings will override the defaults set on the admin page
Katie, You can pass options to the galleria using the galleria_options paramater.
For example: galleria_options=”imageCrop:false;”
See http://galleria.io/docs/options/ for the full set of galleria options.
BTW I will be releasing Slickr Flickr in a few days bundled with the latest Galleria 1.2.7, which came out earlier this month
Hi Russell
How do I scale images in the gallerias? I notice that one or two of mine are cropped (they are images of aeroplanes, and it is a bit noticeable with ends of noses missing etc). I have found the “galleria options” box in the admin panel – what code should I add in there? Thanks
Many Thanks Amy.
The new version of the Galleria is a learning experience for all of us: with dozens of new features and a handful of new themes it offers an awful lot of flexibility.
I will change the settings on this site to use Galleria 1.2.3 (instead of Galleria 1.2) once I have built a galleria theme that looks better on a light background- then I will be operating off the same CSS as you…
Thanks Russell! Yes, mine is different. Though somehow I did have to override it using .galleria-thumbnails-container.galleria-carousel. That is not in my original galleria.classic.css; I guess I somehow found the style through Chrome’s Inspect Element after I discovered that overriding .galleria-thumbnails-container didn’t work. (I generally do my format overrides inline in the page rather than in the stylesheets for reasons of workflow coordination with my collaborator.) Anyway, though the hierarchy of all this is pushing the limits of my fuzzy understanding of styles and stylesheets, my galleria.classic.css doesn’t show max-height: 120px; anywhere. So it’s helpful to have your info in case I need to make more changes down the line.
Thanks again for your help! I’ve given slickr-flickr 5-stars on the WordPress plugin review thingee…
The entry I have is
—-
.galleria-thumbnails-container {
min-height: 40px;
max-height: 120px;
bottom: 0;
position: absolute;
left: 10px;
right: 10px;
z-index: 2;
overflow: auto;
}
—–
For me it is only the carousel that is 50px high –
.galleria-thumbnails-container.galleria-carousel {
height: 50px;
}
I am running Galleria 1.2 here – your code is Galleria 1.2.3
Seems like the classic theme has changed a little….
Hi Russell,
Thanks again for the tips! Late last night I discovered the joy of the Chrome’s “Inspect Element” feature, and found that it was indeed .”galleria-thumbnails-container { height: 50px; ” that was pushing my images down. So by setting that higher it fixed the problem. But it’s interesting that you have max-height:120px because my galleria.classic.css doesn’t have that. Mine has:
———-
.galleria-thumbnails-container {
height: 50px;
bottom: 0;
position: absolute;
left: 10px;
right: 10px;
z-index: 2;
}
————-
This is from the original unedited file. Could there be an error between versions of the css file?
Hi Amy,
I am afraid I have not done much with all the Galleria parameters: see http://galleria.aino.se/docs/1.2/
Another Slickr Flickr users has problems with the folio premium galleria theme. (‘folio’ breaks if the galleria container has a specified width while ‘classic’ breaks if you don’t). I have found that my specifying min-width (rather than width) then both galleria themes ‘classic’ and ‘folio’ work.
In the next release of Slickr Flickr then the plugin CSS will be lighter weight and compatible with both ‘classic’ and ‘folio’ themes (as well as Galleria 1.0 , 1.2 and 1.2.3)
l
Hi Amy,
I checked out the Galleria 1.0 with autoplay of the slideshow on my MAC again and it is fine. No glitch, just a swift transition between photos.
The galleria.classic.css file sets the thumbnail container height : max-height: 120px; if you increase this and also set the galleria parameter imagePosition:top; and set height paremeter big enough to accomodate all the rows….
Also, just noticed… it’s actually truncating the default size images on the carousel as well. It hadn’t been apparent to me before, but now that I set everything back to the defaults and remove the border I added, if I look carefully, they’re truncated at that size too. So, something seems to be conflicting somewhere…
BTW, “img” in our WP theme’s stylesheet is defined as:
img {
background: #000000;
border: 1px solid #1B1B1B;
}
Thanks again for any leads!
Hi Russell,
Thanks for the tip on the Galleria styles. By modifying .galleria-thumbnails and .galleria-image I’m able to make the images larger and also add a small border that makes them easier to see. However, now that the images are taller, I’m running into that same problem again where they’re getting cut off at the bottom. I tried also adjusting the height of .galleria-thumbnails-container, but that didn’t help. There just seems to be something somewhere that’s truncating the height of the thumbnails container. I’m guessing it could be a conflit with my WP theme, as we had a similar problem earlier. (Our theme had a lot of padding around the images, and this caused the Galleria thumbnails to not “fit” in the carousel. We decided we didn’t want the padding in the WP theme anyway, and once we removed it the carousel was OK in that regard.) Any ideas what might conflict?
Re: the Galleria 1.0 / Chrome “glitch:” It works fine if you manually advance the images, but if you let it autoplay, each time it changes the image you see the page glitch for a split second. It appears that Chrome is redrawing the entire page, as you can briefly see text from another part of the page where the Galleria should be – and then the page redraws with everything in the right place. Interesting that it doesn’t happen on your Chrome… I viewed the page in Firefox and it was fine, so I assumed it was some sort of browser bug. Maybe another theme-specific conflict that only bothers Chrome?
Thanks again for any tips on the truncation problem. I think if we can get that solved I’ll be in good shape…
Hi Amy,
Thanks for your comments.
Please look at galleria documentation http://galleria.aino.se/docs/1.2/options/thumbFit/. I think if you set this value to false then you can have thumbnail sized according to the container which is set by the theme’s CSS.
For example the ‘classic’ theme’s stylesheet has the line
.galleria-thumbnails .galleria-image { height: 40px; width: 60px; background: #000; margin: 0 5px 0 0; border: 1px solid #000;; float: left; cursor: pointer; }
So the suggested solution here is to design your own theme with bigger thumbnails and also ideally something that dynamically alters the height according to the number of rows of thumbnails. This would involve:
1) Copy ‘classic’ folder to ‘amyclassic’
2) Rename js and css file to include ‘amyclassic’ rather than ‘classic’ in the file names
3) Change the amyclassic CSS to have bigger thumbnails
4) Change the Slickr Flickr Admin Galleria Theme setting from ‘classic’ to ‘amyclassic’
5) Call the galleria with parameter options=”thumbFit:false;”
Also please check out the premium themes at http://galleria.aino.se/themes/ to see if one already does what you want.
On Galleria 1.0 what is the glitch? My normal set up is Google Chrome on Max OSX and I not noticed any issues.
Small correction: I should have said, “Galleria 1.23” rather than “1.2”
Is it possible to set the thumbnail size in Galleria 1.2? I’d like to make them a bit larger if possible. Also, I haven’t had much luck with “carousel:false.” The carousel goes away, but the lower row of thumbnails gets cut off, showing only the very tops of the images in that row. I tried setting a large number (800) in the Galleria “height” option to see if that would make the thumbnails fit. This made the whole Galleria taller, but the thumbnails simply moved to the bottom of the frame. The lower row was still truncated, and it had simply added empty space between the main image and the thumbnails.
Any ideas? My images are dark and detailed, so I’m trying to do what I can to make the thumbnails a bit more visible! Thanks!
(BTW, did you know that Galleria 1.0 glitches when autoplaying in Google Chrome, at least under OSX? I guess that may be a Galleria bug, but if you happen to know a solution that’d be great. If it weren’t for that, I wouldn’t mind just using 1.0 as the thumbnails are easier to see anyway.)