Not sure if I am following your question, so let me ask you one. What image resolution do you think looks best on your phone?
Note that there is no one-size-fits-all answer – each person’s photos are different, and the requirements even vary between two websites run by the same person. Also note that in Photonic there are really 2 different resolutions that you can use – one that shows up in the gallery, and one that shows up in the lightbox. From a website responsiveness point of view, it is advisable to have smaller sizes for your main gallery and fuller sizes for the lightbox. But for this, you have to make it obvious that you are displaying a gallery – a single column of photos doesn’t necessarily convey that impression.
The lightbox quality is much better than the thumbnail quality.
Where can I see the resolution options?
Where can I see the resolution options?
Do you mean the list of permissible values? Google’s list is free-form, and it doesn’t do pre-defined sizes. You can put in any numeric value up to 9999, I think, but generally a resolution of 1600 for the lightbox is fine.
I believe the main problem in your case is that it is not obvious your photos are in a gallery. You can try using the Masonry layout with 2 columns to make it more obvious. That way your users will have to click on a photo to show the lightbox.
Ok I see now,
So if I want the highest quality thumbnail I need to use 1600 which makes it look much sharper on mobile but enlarges it on desktop. I will need to play with it.
Thanks for the help
Well, as I mentioned in my previous post, you might want to try the Masonry layout with 2 columns. That will automatically scale the photos fit your width. On a smaller device it will likely get you down to a single column.
Yes but on desktop, it shows 2 columns and I don’t see an option to make it 1.
I
Yes – that is the point of doing a masonry layout. You get the right image sizes as per the width of your display, maximizing the available screen real estate. Maybe I misunderstood your requirement.
No problem,
What I am trying to do is have a single column on the page with all the images. I don’t necessarily want users to use lightbox unless they want to. All images should be clear enough to read without hitting the lightbox (GOAL).
The majority of users on mobile and want mobile to be as clear, readable, crisp as possible. After talking with you I found that changing the thumbnail from 600 to 1600 did increase the image quality on mobile making it easier to read but also increased thumbnail size on desktop extremely. This might be a trade-off I have to make as the majority are mobile.
Thanks again for all the help and support
You could control this with some custom CSS (in your WP dashboard, Appearance → Customize → Additional CSS):
.photonic-thumb a img { max-width: 800px; }
This way, your image will never be wider than 800px even on a desktop.
Cool,
Any solution I found is having two photonic galleries on a page and using elementor responsive feature have been being only on mobile and one being only on desktop.
Will give the code a try
The code doesn’t seem to make a difference
Your photos are 600px, so it wouldn’t make a difference. If you had wider photos (say 1600px), they would be capped at 800px.
I have the code in the add CC and doesn’t seem to make a difference on this test page which should have the thumbnails 1600px https://flcannabisdeals.org/test1000/
There is a problem in your CSS:
.post-navigation .nav-links {
visibility: hidden;
.photonic-thumb a img { max-width: 800px; }
.photonic-thumb a img { max-height: 800px; }
You did not close the braces for the .post-navigation declaration – that results in incorrect syntax, and your subsequent items will not be processed. Also, note that I specified just max-width; you should not add max-height.
