The Masonry Image Gallery Template is one of the most popular gallery templates and is used by many FooGallery users. This is because it has so many customization options and because its layout usually gives the thumbnails displayed on your gallery page such a natural, free-flowing look.
However, for some people using the Masonry template, you may notice that the thumbnails appear blurry or even stretched. However, when clicked and it opens up in a lightbox or in a tab, the full-size image has no such issue. The blurry thumbnails may make you or your visitors think that your images are of low quality when that may not be the case.
This guide aims to give you working solutions that you can implement to resolve this issue and prevent it from happening as you create or edit your Masonry gallery. We’ll be going through three solutions you can implement to resolve this issue, which are:
- Adjust the Thumb Quality settings
- Adjust the Retina settings
- Select a fixed width instead of a column layout on the “Masonry Layout” settings
1. Adjust the Thumb Quality settings
If, while using the Masonry gallery template, you notice that the thumbnails appear blurry, one of the first solutions to this issue can be adjusting the quality of the thumbnail.
This is done from the Settings section of FooGallery. To get there, once logged into your WordPress admin dashboard, navigate to FooGallery -> Settings and click on the “Images” tab.
To improve the thumbnail quality you can modify the value in the “Thumbnail JPEG Quality” field, as shown in the image below.
Increasing the “Thumbnail JPEG Quality” value increases the thumbnail quality, while decreasing its value decreases the thumbnail quality.
2. Adjust the Retina settings
The second possible solution that you can implement to fix the blurry thumbnail issue on Masonry galleries is by setting or adjusting the retina settings using the “Default Retina Support” option. This is shown in the image below, and you can find this setting in the “Images” tab of the Settings page, where you can enable retina-ready images:
Selecting Retina sizes as shown in the image above and clicking “Apply Defaults to all Galleries” will generate Retina-ready images for all existing Galleries.
The retina-ready images that will be generated should be clear, which may resolve the blurry thumbnails issue on your Masonry gallery.
On top of that, because most devices incorporate retina displays, retina images will improve viewing experience and increase user satisfaction. This is because of their high pixel density which make the image appear more crisp and clear to your visitors compared to normal images.
To learn more about the FooGallery Retina Support feature, kindly go through this guide.
3. Select a fixed width instead of a column layout on the “Masonry Layout” settings
This is the most effective way to resolve the blurry thumbnails issue.
It involves selecting the “Fixed Width” thumbnail layout option, as shown in the image below. This will adjust the thumbnail width and come up with a number of appropriately sized columns for your gallery, instead of you setting a Column layout yourself by selecting a set number of columns.
As you can see from the image above, the Masonry gallery template allows users to choose either a set number of columns or a fixed layout on the “Masonry Layout” option. If you select a set number of columns, then the thumbnails will be expanded to fill the container, and because of this, the thumbnail images may be stretched and appear blurry on larger screens, thus causing blurry thumbnails.
To prevent this, we advise you to select “Fixed Width” instead, when it comes to the Masonry layout.
However, if you would prefer having a set number of columns, then we do advise you to increase the “Thumb Width” value until the point at which the thumbnails stop being blurry.
Conclusion
The solutions mentioned above are the most effective ways to solve the blurry/stretched thumbnail issue on Masonry galleries.
However, if you do try out all of these solutions and the issue still persists, please contact our support team anytime of the day or week for further assistance and we’ll look for a working solution for you.