Thumbnail Quality in Photo Gallery

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.



PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
User avatar
dnlyko
 
 
Posts: 134
Joined: Tue Mar 05, 2019 12:55 pm
Location: Toronto - Canada

Thumbnail Quality in Photo Gallery

Post by dnlyko »

Is there is a way to improve the display quality of the thumbnails.
https://mysnapsonline.com/misc.html
User avatar
Pablo
 
Posts: 21572
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Thumbnail Quality in Photo Gallery

Post by Pablo »

The quality of the jpg thumbnails can be set in Tools->Options->Publish
But you can also specify custom thumbnail images in the properties of the gallery.
User avatar
dnlyko
 
 
Posts: 134
Joined: Tue Mar 05, 2019 12:55 pm
Location: Toronto - Canada

Re: Thumbnail Quality in Photo Gallery

Post by dnlyko »

I believe the issue I have is that WWB creates a 90x90 thumbnail.
When it is displayed it just zooms out to the dimensions set in the Photo Gallery/Properties/General/Options/Thumbnail Size.
Is there a way to change the setting for the actual dimensions of the thumbnail that is generated/uploaded to the images folder?
User avatar
Pablo
 
Posts: 21572
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Thumbnail Quality in Photo Gallery

Post by Pablo »

The thumbnail is generated based on the size in the workspace.
If you want more control then you will have to specify a custom thumbnail image in the properties.
User avatar
dnlyko
 
 
Posts: 134
Joined: Tue Mar 05, 2019 12:55 pm
Location: Toronto - Canada

Re: Thumbnail Quality in Photo Gallery

Post by dnlyko »

If you want more control then you will have to specify a custom thumbnail image in the properties.
I am selecting my own custom thumbnail size.

The problem appears when one adds another gallery. If the two galleries use different size thumbnails this is when the issue appears.

In my case, I am using 6 different (breakpoints) layouts and a different gallery on each of the breakpoint.

I spent much time endeavoring to use Responsive, Variable & Compatible. I had no success in getting the look that I am able to achieve using a different gallery per breakpoint.

Please take a look at https://mysnapsonline.com/misc.html and resize the browser to many sizes to see what I mean.

The only time the thumbnail is correct is in the 360 breakpoint which uses a 90x90
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Thumbnail Quality in Photo Gallery

Post by crispy68 »

The reason why your images look fuzzy is because the thumbnail image is only 90x90 but the square in the photo gallery is 200x200. It is scaling it up thus making it blurry. The thumbnail image should be as large or slightly larger than the 'square' it is going into.
User avatar
dnlyko
 
 
Posts: 134
Joined: Tue Mar 05, 2019 12:55 pm
Location: Toronto - Canada

Re: Thumbnail Quality in Photo Gallery

Post by dnlyko »

I know it is 90x90 that is generated/uploaded.

Try and add a gallery and set the thumbnail size to 200x200 then preview.
It will display the thumbnails correctly without scaling.
Add a second gallery and set the size of the second gallery thumbnail to 150x150.
Preview and you will see what I am talking about.
The 1st gallery thumbnails will now scale and be blurry.
User avatar
Pablo
 
Posts: 21572
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Thumbnail Quality in Photo Gallery

Post by Pablo »

If you use custom thumbnail images, then the images will not be modified.
The images will be published "AS IS".

So, the quality of the images will not be affected by adding a second gallery.
User avatar
dnlyko
 
 
Posts: 134
Joined: Tue Mar 05, 2019 12:55 pm
Location: Toronto - Canada

Re: Thumbnail Quality in Photo Gallery

Post by dnlyko »

That is an awful lot of work.
User avatar
Pablo
 
Posts: 21572
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Thumbnail Quality in Photo Gallery

Post by Pablo »

What do you mean?
User avatar
dnlyko
 
 
Posts: 134
Joined: Tue Mar 05, 2019 12:55 pm
Location: Toronto - Canada

Re: Thumbnail Quality in Photo Gallery

Post by dnlyko »

use custom thumbnail images
If I understand you correctly
(PhotoGalleryProperties/General/Image/EditItem/General/Thumbnail/Folder/SelectFile) Repeat for every single image?

I would have to create a jpeg with the thumbnail dimensions for each photo.
Would need to repeat that for each breakpoint so possibly 6 thumbnails per photo.
Then would have to select a single photo at a time and select the proper thumbnail .

FYI: This site is eventually going to have thousands of photos
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Thumbnail Quality in Photo Gallery

Post by crispy68 »

Would need to repeat that for each breakpoint so possibly 6 thumbnails per photo.
Why are you creating a thumbnail for each breakpoint? The same thumbnail will be used in each breakpoint.
User avatar
dnlyko
 
 
Posts: 134
Joined: Tue Mar 05, 2019 12:55 pm
Location: Toronto - Canada

Re: Thumbnail Quality in Photo Gallery

Post by dnlyko »

1 - On a phone display 3 thumbnails 90x90 would be fine
2 - On iPad portrait 7 thumbnails 90x90 would be fine
3 - On iPad landscape 9 thumbnails 90x90 would be fine
4 - On a 1366 wide laptop 10 thumbnails 90x90 are a bit small. Unfortunately the number of rows WWB tops out at is 10, so one would need a bigger thumbnail or more than 10 rows.
5 - On a 1920 wide monitor same as above
6 - On a 2540 wide monitor same as above and 90x90 is way too small
7 - On a 4K monitor same as above and 90x90 is insanely small

https://mysnapsonline.com/test.html

I had it all worked out using 6 different galleries...
1 - 3 @ 90x90 phone
2 - 4 @ 150x150 - tablet portrait
3 - 6 @ 150x150 - tablet landscape
4 - 7 @ 180x180 - 1366 res
5 - 8 @ 200x200 - 1920 res
6,7 - 10 @ 240x240 - 2560/4K res
It looked close to perfect on every device. Except for the thumbnails being actually 90x90, causing all the blurry thumbnails on every device except cell phones
Last edited by dnlyko on Tue Dec 29, 2020 2:25 am, edited 1 time in total.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Thumbnail Quality in Photo Gallery

Post by crispy68 »

I'm not sure how you are building your page without seeing your actual project file but the easiest way to make the photo gallery responsive is to place it into a layout grid. Then set the thumbnail size to 'responsive'. You can then adjust the columns of the photo gallery in each breakpoint. The images will scale nicely. The only issue is if your images are different sizes to begin with and you are trying to keep a perfect looking grid with the same amount of spacing between them all (as in your example) it wont work unfortunately.

If you set the thumbnail size to a set size, then you cant have different # of columns in breakpoints. But making 6 different photo galleries is not the way to do it as this will bloat your code and slow down the page loading.

Right now the only way to achieve a perfect looking grid and be responsive is to make sure your original images are all the same size to begin with OR create your own thumbnails. It's a bit more time consuming to have to add your own thumbnail to each pic but it will give you the desired look you want. To help expedite the making of the thumbnails, you can use the link below to batch resize photos to the size you want.

https://bulkresizephotos.com/en

I've used the site many times.

You could take a look at the Unite Gallery using the tilesgrid theme and see if that might work for you as well.
User avatar
dnlyko
 
 
Posts: 134
Joined: Tue Mar 05, 2019 12:55 pm
Location: Toronto - Canada

Re: Thumbnail Quality in Photo Gallery

Post by dnlyko »

Has something changed in PhotoGallery in the last 3 weeks?
3 weeks ago I was able to create a PhotoGallery that (I think) allowed for a different thumbnail size in each breakpoint.
Doing so, I was able to have a sharp thumbnail appear on each breakpoint. https://mysnapsonline.com/street.html
Now, working on another website project, I try to do the same thing and it no longer allows a different thumbnail size per breakpoint.
So I open the MySnapsOnline project and copy the PhotoGallery into my current project hoping it will work. NOT.
So then I take a closer look and yes, one is allowed to enter a thumbnail size for each breakpoint. Unfortunately, it applies the last thumbnail size entered in all breakpoints.
User avatar
Pablo
 
Posts: 21572
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Thumbnail Quality in Photo Gallery

Post by Pablo »

No, the gallery has not changed.
The thumbnail size cannot be different in breakpoints, because there is only one thumbnail per image.

For responsive layouts I recommend to use a custom thumbnail image.
User avatar
dnlyko
 
 
Posts: 134
Joined: Tue Mar 05, 2019 12:55 pm
Location: Toronto - Canada

Re: Thumbnail Quality in Photo Gallery

Post by dnlyko »

Thanks,
I wonder how I was able to create this in one gallery with 5 breakpoints https://mysnapsonline.com/street.html
If all the breakpoints use the same thumbnail, how is it that they appear 100% sharp on all breakpoints being that they display at all different sizes?

(I did add a second gallery for the phone view with 3 columns. With 6 columns the thumbnails would be just too small)
User avatar
Pablo
 
Posts: 21572
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Thumbnail Quality in Photo Gallery

Post by Pablo »

If you use a large enough image then it will look sharp in all breakpoints.
Post Reply