Infinite scrolling has become a design trend for many websites and social networks. But can it be used effectively for your image galleries? Absolutely. Here’s a rundown of what Infinite Scrolling is, and how you can use it.
Infinite Scrolling Basics
This is a commonly used feature, and one you’re probably quite familiar with. If you’ve ever been on Facebook or Twitter, or if you’ve ever done a Google Image search, you’ve seen Infinite Scrolling in action.
With Infinite Scrolling, also referred to as endless scrolling, items are only loaded once the user scrolls down to them. Content is loaded continuously as you get to it. This removes the need for pagination or for the user to click to the next page.
There are plenty of advantages to Infinite Scrolling. For one thing, it’s an efficient way to browse data or images. This is especially true for image-heavy sites, as users won’t need to wait for the whole page or gallery to be preloaded. It also works well on mobile, where scrolling is the norm. This design technique has the added benefit of engaging users for longer, as they continue to scroll down through the data or images.
But Infinite Scrolling has some potential disadvantages as well. It can be a little overwhelming if you’re searching for something specific. The seemingly never-ending stream of data can be intimidating and users may leave before they’ve even started. Plus, if you have a lot of large images, your final page size (once all the images have been loaded) may be quite cumbersome and slow. Another pitfall is that when you click on an item you navigate away from the page. But when you go back, you are returned to the beginning of the page rather than where you left off (this is known as Pogosticking).
But there are easy solutions to these potential problems.
Effective Use of Infinite Scrolling
Using Infinite Scroll for an entire blog or website may not always work, but there’s no reason you can’t use this design feature for elements on your site. Extensive photo galleries are the ideal place to use it. But remember to keep your thumbnails a reasonable size and optimize your images for the web for better page load speeds.
Make your Infinite Scrolling galleries as user-friendly as possible. Consider adding Filtering with Media tags and categories, to help narrow down a search. Don’t save the best for last – after all, users may never get there. Rather include your better images upfront, which can help to create a better user experience.
Avoid Pogosticking by using a gallery that doesn’t navigate away from the original page. FooGallery opens images in a lightbox, so users don’t lose their position and can continue from where they left off.
If you decide Infinite Scrolling won’t work for your gallery, then there are alternatives. You can use Pagination for your gallery, where users have to click through to the next page to see more images. Or you can use a ‘Load More’ button – if users want to see more images, they click on this.
FooGallery PRO offers Pagination, Load More and Infinite Scrolling. Take a look at the pagination demo to see which one works best for you. If you want to enable Infinite Scroll (or one of the other Paging options on FooGallery PRO, simply go to the Paging settings.
Once you’ve selected Infinite Scroll you be able to adjust the page size. This is the number of images that will load on your page at a time.
Try FooGallery for yourself now. With features like Infinite Scroll and the Pagination options, you’ll be able to tailor your image galleries to suit your individual needs.
We all know that webpages need images. But what you may not know is that you need to optimize images for your site. If you don’t, you’re putting yourself at a disadvantage. Here’s why you need to optimize images, and how to go about doing this.
Why You Should Optimize Images
Pictures, images, videos and interesting designs can all help improve your site. They break the tedium of simply reading through pages of text and can help users better understand what you’re saying. According to research, social media posts also get more shares when they use images.
But too many images, or images that are too big, can have a negative impact on your site’s performance. Anyone who visits your site needs to download the images from the server to their computer. The size and number of your images can impact on your page load time, and if someone has to wait more than a few seconds, there’s a good chance they’ll leave. This could increase your bounce rate, which results in less traffic and fewer conversions.
Images also take up space. Websites with extensive galleries or high-quality images may find they’re paying their hosting company more for additional storage.
But optimizing your images can help. You can edit your images for the web, even if (or especially if) you have a very visual site, like a photography blog. This way your photos will still be a decent quality, without being too large.
How to Optimize Images
The most practical way to get your images the right size is to edit them before you upload them. While you’re cropping, fixing the colors or editing them in any other way, resize your images as well. Photoshop, for example, offers you the option of saving your photo for web and other devices. This will automatically save it as a smaller file.
You can also resize the image dimensions. So if your featured image space is 900px wide, scale your image proportionately down to 900px. After all, there’s no value in loading a bigger image that will waste not only your storage space but also your users’ bandwidth. If you don’t know the exact size, go with 1000px as your standard.
Another option is to scale the image within the media manager in WordPress. Once you’ve uploaded your image, you’ll see it’s size in a sidebar on the right. Simply select Edit Image. You’ll be redirected to a page where you can scale your image according to the size you need. Fill in the required width and the height will adjust automatically.
Alternatively, you can find a plugin or online app to do all this for you. The plus side of this is that you’ll save yourself time. You can find a plugin that removes metadata, or converts the file type. A plugin may also be able to optimize the media files already on your site – very handy if you don’t want to go back and do this all manually.
More Tips for Optimizing Images
There are several other ways you can improve your site’s performance when it comes to using images.
Use thumbnails on your pages, and redirect these to open the full size image in a lightbox, like FooBox. This will decrease the load time for your webpage, and users will only be downloading the image if they click on the thumbnail. You’ll still need to be careful about loading huge images on your site, though, as storage is still a factor. Plus you don’t want the full size image to take too long to load.
You can also use Lazy Loading. This is particularly useful for longer galleries in that it only loads the images on your user’s page that they can see, rather than downloading all the images at once. Have a look at Google’s image search function to get an idea of how it works. Images are loaded as the user scrolls down, saving on load time and bandwidth. FooGallery comes standard with lazy loading, so you don’t need to adjust settings or install anything else.
Optimizing your images can help improve your site’s performance and improve your site’s user experience. While it’s best to optimize images before loading them, there are ways to do this on your site as well. Plus you can use image tools, like FooBox and FooGallery, to help create a better user experience.
FooGallery PRO comes with two unique Gallery Templates: Grid PRO and Polaroid PRO. Using these templates can help you create a unique image gallery. Here are some ways to make the most of these gallery templates.
FooGallery’s Grid PRO Gallery Template
Grid PRO gives you a professional look with a clean design, similar to the way Google image results are shown. The thumbnails are uniform, creating a sleek image gallery. It’s also easily customizable.
This gallery template can be limited in width, or stretch across the whole of the page. To adjust the width, you can simply alter the thumbnail dimensions and number of columns in the general settings. The column number will automatically reduce for smaller screens, meaning the gallery is suitable for mobile as well. Here’s a demo of the Grid PRO gallery, full width.
You can also adjust the theme of the template to be dark or light. As you can see below, the change in theme creates a very different look for your gallery. While the Light theme is cleaner, the dark theme adds depth and more character to the gallery.
These settings can be used to create a distinctive gallery with Grid PRO, but there are plenty of other settings that you can adjust to create the ideal look for you. With FooGallery Pro, you can also make use of the Hover Presets. Or for longer galleries, you can add Pagination, or make use of Filtering to help your users find the images they’re looking for.
FooGallery PRO Polaroid Template
The Polaroid gallery template is a fun, quirky gallery that makes your images look like they’re polaroid photos. You can use it to create a unique gallery that sets your images apart. It’s ideal for a photobook style gallery, with those ‘Wish you were here’ pictures everyone loves.
The thumbnails have a ‘scattered’ appearance, but straighten when you hover over them. The title appears below the image on the Polaroid frame. And while this gallery doesn’t include descriptions with the thumbnails (unless your title is set to description on the Caption settings) you will see the description once you open the thumbnail.
You can move the images closer together, or further apart, by adjusting the Gutter under General settings. The smaller the gutter, the closer the images will be to one another. You can even have them overlap slightly.
The Polaroid Gallery below shows smaller thumbnails, closer together. Or have a look at the Polaroid demo for an example of bigger thumbnails, with a larger Gutter.
FooPlugins is always working on new and interesting ways to help you create your prefect gallery. So keep a look out for our new FooGallery PRO template: Slider!
FooBox is a responsive image lightbox. It allows you to open images, forms or other custom html code in a lightbox that automatically adjusts to the size of your screen. The FooBox PRO settings and themes allow you to customize your images to create a unique and look and feel. Here’s a guide to using these settings.
To access the settings for FooBox PRO, find FooBox in your WordPress menu, hover on this and then select Settings. Alternatively, click on FooBox and select the Look & Feel tab.
The settings that you select will apply to any of the images that open in FooBox, so you’ll only need to select your settings once. If you use FooBox as your default lightbox in your galleries, then these settings will also apply to your galleries.
Choose a Theme
You can start customising your images by choosing a theme. There are three options to choose from.
The first is Rounded; this look adds a border around your images with slightly rounded corners. The arrows, which allow you to navigate to other images on that page, appear on the sides of the lightbox with this theme.
The Metro Theme also has a border, but without the rounded corners. This theme is more contained within the box and the the arrows appear at the top.
The last of the FooBox PRO themes is the Flat theme. This doesn’t include borders, but does have the directional arrows. These appear on the side of the lightbox.
Here’s a look at how the same image appears in FooBox PRO in each of the different themes. You can see the social share buttons displayed above the image, and the title and captions displayed below.
Customize Your Theme
Once you’ve chosen your theme, you can adjust the settings to suit the look and feel of your site. Here’s a quick look at the settings.
The color scheme determines the color of the lightbox and border. This is less noticeable in the Flat theme, whereas the border will change to this color in the Rounded and Metro themes.
You have two icons to choose. The first is the arrow icon, for your navigation arrows. The second is your loading icon, displayed when your image is still loading.
You can also select how and/or where the navigation arrows are displayed. The default setting places the arrows on the sides of the modal. The other settings allow you to change this, so for example, the arrows are displayed on the sides of the screen or just on hover.
The final setting determines your opening or closing animation. In other words, when someone clicks on your image, it can flip, spin, slide or fold out into the lightbox.
Load Your Images
All that’s left to do is add your media to your pages or blog posts. On WordPress, you’ll do this by hitting the Add Media button when you’re creating your page or post. You can upload your selected image and fill in your Title, Alt Text and Description as usual.
You’ll then need to scroll down a little further, to where it says Attachment Display Settings. Make sure you link to the Media File and that the image URL displays beneath this.
Then you’re done! Publish your page and your readers will be able to open the images in FooBox PRO.
Try it for yourself! Find the right FooBox PRO plan here.
GDPR, or the General Data Protection Regulation, comes into effect on 25 May 2018. But what does this mean? And how will it impact on users of FooPlugins? Here’s a quick look at what you need to know about being GDPR compliant and FooPlugins.
The GDPR (a quick summary)
The General Data Protection Regulation affects EU websites or (and this is important) any website that collects data from an EU citizen. So if you collect any identifiable information from anyone in the EU, then this will affect you.
Identifiable info will include names, addresses and similar details. But the GDPR also considers IP addresses as part of this. If your website, a plugin on your website, or a service that you’re using, collects any of this data, then the GDPR will apply to you.
That seems pretty broad, but to give you a better idea here are some examples. Your website may store personal data when someone writes a comment. eLearning and eCommerce sites will collect this info from customers. If you’re using Google Analytics, then you’re collecting IP addresses from anyone who visits your site. Online chat services, contact forms and email services may also gather this data.
If you’re using third party plugins and services, it’s good practice to check that they are GDPR compliant. You should also link to their policies in your Terms of Service.
The good news is that there are already plenty of plugins that can help you become GDPR compliant. Plus most websites, services and plugins are taking this seriously and are making the move towards being GDPR compliant. This includes FooPlugins.
GDPR and FooPlugins
Over the next few weeks, we’ll be working towards making FooPlugins GDPR compliant. But the really great news for users of FooGallery and FooBox, is that our plugins do not collect data from your users. In other words, if you have either (or both) FooGallery or FooBox installed, you don’t need to worry about changing them to be GDPR compliant.
We’ll keep you updated about any changes we’ll be making that will affect you or our plugins. Or follow us on Facebook or Twitter for more updates.
*Please note that this is not intended as legal advice. For a more comprehensive understanding of GDPR or legal advice you would need to consult a lawyer.
Are you a happy user of FooGallery or FooBox? Is there something more you want from your favourite Foo Plugin? Then we need your help!
We’re trying to grow our Foo Community. That means YOU! And your friends and anyone else who can benefit from using FooGallery or FooBox.
To do this, we need you to rate us on WordPress.org! Your WordPress.org reviews can help us improve, as we find out what works for you, and what you’re looking for next.
What’s In It For You?
A better product! Constructive feedback is invaluable to us. It helps us to develop a better product and ensures you’re getting what you need, and what you want.
When you’re reviewing us on WordPress.org, give us some details. If you love FooGallery and FooBox, tell us why. If you would love to see a new feature included, share this with us. If you have an issue, tell us what it is so we can fix it. And if you need support, you can find documentation or log a ticket here.
We want to help! So please help us to grow and build a bigger community, so we can create a better product for you.
Rate Us On WordPress.org
You can review FooGallery and FooBox on WordPress.org. Head on over to give us your happy faces and let us know your favorite features. If you like using our plugins, please give us a 5-star rating. This helps others find our plugins when they do a search, building our community even more.
You can also find us on Facebook and Twitter! Join our community today, and help us grow!
FooGallery PRO’s latest feature, Gallery Filtering, comes with a number of Simple and Advanced Filtering settings. The Advanced Filtering gives you a bit more versatility when it comes to customising your gallery. Below are the settings, with a guide on how to set each up.
You can change the Selection Mode from Single (the default) to Multiple. In the Multiple Selection Mode, you can show all images from two or more tags – this is under the Multiple (OR) setting. Or you can set it to show images that only feature in all of the selected tags – select Multiple (AND).
The Minimum and Limit buttons let you adjust which tags appear. Only tags with the number of images that fall within the specified range will appear. If you don’t want to add these limits, then simply leave it set to the default.
The Show Count displays how many images fall under each tag – a number will appear next to each of the tags indicating how many images apply to each tag. For this feature to work, simply select Yes next to Show Count.
The Adjust Size setting changes the size of the Media tags or Categories, depending on the number of images under each. Tags with more images under them will appear bigger than those with less images. Select Yes under Adjust Size and then set your size range from smallest to largest.
The final setting is Adjust Opacity. This adjusts the density of each tag is, depending on the number of images under each. To apply this setting, select Yes under Adjust Opacity and then set your density from lightest to darkest.
Here’s an example of how your tags will appear, if you apply all of the settings.
Gallery Filtering, the latest feature on FooGallery PRO, allows you to filter your gallery using Media Tags and Categories. Here is a step-by-step walkthrough of how to create a filtered gallery, including assigning tags to individual images.
Step 1: Add Images
As with any image gallery, you first need to add your media. Once you have uploaded your images though, you can add your Media Tags and Categories. You will still see the sections for adding the Title, Caption, Alt Text and Description – add these in.
If you scroll down a little further, you’ll now see additional fields for Media Tags and Media Categories. Gallery Filtering allows you to filter by tag or category, so add both. You can also make changes to both fields later on.
Step 2: Enable Gallery Filtering
Once you have selected your Gallery Template and customised the settings, you can adjust your Gallery Filtering. Select the Filtering tab in the left-hand menu. The default is set to None, so to activate Filtering just select Simple or Advanced.
The Simple settings allow you to choose whether your images will filter according to the Media Tags or Media Categories. You can also adjust the theme (light, dark or custom) for the Tags / Categories. Finally you can choose to show the Tags above or below the images, or do both for your bigger galleries.
Select the Gallery Preview tab to see how the tags will appear in the gallery.
To change your tags after you have created your gallery and set up filtering, simply select the Manage Items tab and hit the Edit Info button on the image. You’ll be redirected to the same screen you saw when you uploaded your image. Here you can add, remove or edit the tags for your images.
Adding Media Tags to Individual Images
You can also add Media Tags and Categories to individual images as you load them. Once an image is uploaded, you’ll have the option to add these fields. These tags won’t appear with the image on the frontend, but will help for sorting and categorising images in your media library.
FooGallery Pro‘s latest update includes Gallery Filtering. You can now add media tags or categories to images in your WordPress Gallery, allowing you to filter the images by those tags or categories.
This has been one of the most requested features since we released FooGallery PRO and it is immediately available for all existing license holders of FooGallery PRO at no additional cost.
This is what the standard filtering looks like out of the box:
As you add your images, you’ll be able to add multiple tags and categories to each image. These will appear above (or below) your gallery, giving your visitors the ability to refine or filter what they see in the gallery. This demo shows you the simple filtering with no advanced features, where you can select a single tag to filter the gallery.
Additional Gallery Filtering Features
FooGallery’s Filtering comes with more advanced settings as well. The Show Count setting lets you see at a glance how many images in the gallery fall under each tag.
Alternatively, you can adjust the size of the tags depending on the number of images in each. Tags with more images will appear larger than those with less. Likewise, the Adjust Opacity setting indicates which tags have more or less images under them, depending on how opaque they are – those with more images appear as more solid.
FooGallery’s advanced filtering settings also allow you to select multiple tags. Multiple Filtering (OR) filters the gallery by more than one tag. Union filtering is applied, meaning images in any of the selected tags will be shown.
Multiple Filtering (AND) also allows you to select multiple tags. With this setting however, intersect filtering is applied, so only images that appear under both tags will be shown.
The new filtering feature takes FooGallery to a new level, and sets it apart as one of the best WordPress Gallery Plugins. Find out more about FooGallery Pro and get this gallery plugin for yourself now.
If you’re looking to sell products online, then you need to use good images and a good image gallery. FooGallery offers you all the features you need to create spectacular product galleries for your eCommerce site.
Using an Image Gallery to Sell Products Online
It is estimated that over 1.6 billion people worldwide purchased something online in 2017! This number is expected to grow to 2.14 billion in 2021. While this means that there is a huge opportunity to sell products online, it also means that there is plenty of competition.
A good image gallery can help your products stand out, giving you a competitive edge. Your images can improve customer experience and they can make it easier for customers to get a feel of the product.
But there are some things you need to remember. Your images need to be good quality – a high resolution image can make all the difference when trying to create a good impression of a product. A grainy depiction of your hand stitched clothing is unlikely to inspire anybody to hit ‘buy’.
Your image gallery should also give multiple views of your product. This will give your customers a better, more accurate idea of what they’re ordering. Apart from creating an overall better experience, this can also help decrease the number of returned products. The more accurately a product is portrayed, the less likely it is that a customer will send it back.
Provide as much detail as possible. Use your image gallery to show different angles, or zoom in to show details. Demonstrate scale – place your handmade jewellery on a model or give accurate measurements with your images. Use a video to demonstrate the features or uses of your product. And make use of captions and descriptions.
Using FooGallery to Sell Your Products
FooGallery is a good choice for an eCommerce image gallery. It comes with the features you need to make the most of your images and is simple to customise. You can easily adjust the settings for your thumbnails and choose the best gallery template for your needs.
Customers can click on the thumbnails to see the larger images, which will open in a lightbox. FooBox Media Lightbox automatically recognises WooCommerce product images.
FooGallery comes standard with Drag n Drop Reordering, making it easy to place your product images in the best possible sequence. Plus there are a range of gallery templates for you to choose from; the Responsive, Masonry and Simple Portfolio gallery templates would all work well for eCommerce.
Other useful features include the caption and description customisation options. Lazy loading ensures that your bigger galleries don’t take too long to load, and don’t use up your customers’ data unnecessarily. And there are various retina image support settings for your thumbnails.