FooGallery – The #1 Gallery for developers, freelancers & website owners
FooGallery PRO‘s advanced features include a thumbnail or background fill option. With this, your images are not cropped to fit your thumbs, and the remaining space is instead filled with a color of your choice.
Images courtesy of Pixabay
For the most part, FooGallery’s layouts make use of set thumbnail dimensions. The exceptions to this are the Masonry and Justified galleries. All of the other galleries have a set width and height for the thumbnail and use the image to fill this space. In other words, the image is cropped to fit into the thumbnail.
With FooGallery PRO, however, you can change this so that the entire image is shown in the thumb. The thumbnail’s dimensions won’t change, though, so there will be space on either side (or above and below) the actual photo. With our advanced Background Fill feature, you can select a color to fill this space.
This allows you to create a uniform gallery that still shows off your images beautifully. Plus the background color fill, which you can select to complement your images, adds a unique element to your galleries.
Thumbnail or Background Fill is an advanced feature, available in FooGallery PRO. Read more about this setting here.
NOTE: This setting only works if you are using GD for your Thumbnail Image Library. You can find out more about how to enable GD in this article.
Replicate This Gallery
If you want to achieve the same look as the above gallery, then here’s a quick guide to the settings we used. Unless otherwise specified, we went with the default settings and just made the below changes:
- Gallery Layout: Responsive Image Gallery
- General: Thumb dimensions are 225 x 200
- Appearance: Border Size is None; Drop Shadow is Small; and Loading Icon is None
- Hover Effects: Theme is set to Transparent; Scaling Effect is Zoomed; and Loading Icon is None
- Captions: The Description is set to None
- Advanced: Thumbnail Cropping is set to Background Fill (No crop) and the Fill Color is rgb(34, 0, 109)
Want to see more demos? Click here.