I am trying to:
1. Hide the dots appearing at the top left corner of each photo in the gallery. I don't see them when editing, but they appear in the front-end !
2. Get the layout just like instagram ( no matter what photo raito I use)
Link to a page where the issue can be seen:
hidden link
( for Q1 )
I expected to see:
1. Hide the dots.
2. Let every photos be square.
Instead, I got:
1. Gallery with a lot of black dots in the front-end.
2. some space between photos when I use vertical ( portrait) photos. Landscape (vertical) photos will be cropped to fit the square, but Portrait (horizontal) photos won't .
Hi,
Thank you for contacting us and I'd be happy to assist.
1. The dot style before the list items seem to be coming from the theme. To overcome, it for the Toolset gallery block, you can include the following custom CSS code, at WP Admin -> Appearance -> Customize -> Additional CSS:
.tb-gallery ul li {
list-style-type: none;
}
2. I've checked the available portfolio item pages, and noticed that the galleries are showing correctly in the masonry layout, without any unnecessary gaps. Can you please share a link where that gap between the images can be seen?
regards,
Waqar
Hello Wagar,
Thanks for your help. The fisrt issue is fixed surprisingly !
And I create a demo post to show the layout problem of gallery. I hope every picture is square.
Or, this kind of display is exactly the grid layout doing ?
The demo post link:
hidden link
Thank you !
Thanks for writing back.
It looks like, I'll need to be logged in to see the preview post that you've shared.
Can you please share temporary admin login details, so that I can see how this gallery is set up in the admin area?
Note: Your next reply will be private and it is recommended to make a complete backup copy, before sharing the access details.
Thank you for sharing the admin access.
If your goal is to show the gallery images in the exact same size and orientation (when originally they are not the same) you'll need to keep the cropping option turned on but select a smaller "Thumbnail" size, so that all images can meet the common width and height values to fill.
Screenshot back-end: hidden link
Screenshot front-end: hidden link
The downside of this approach is that you'll lose the portions of the images, due to the cropping.
If you'd like to avoid image cropping and want to show them as full, it would be best to use either the "Masonry" or "Collage" layout. This is the solution modern social media platforms like Instagram use when images with variable sizes and orientations are involved.
Screenshot back-end: hidden link
Screenshot front-end: hidden link
OK, I got it. I got low resolution of images when using Thumbnail size, which I can't really accept..... So, the grid layout don't crop images to square automatically... I think someone would hople to have this kind of layout just like me ( for any size of images). Just provide a suggestion.
In the other way, I got another problem. My wordpress admin becomes English version now. EVEN THOUGH I change the language setting to Chinese. How could it be like this ?
Thanks for the update.
When WordPress makes different image size copies, it doesn't increase the height or width of the images, so that they don't look distorted, stretched, or pixelated. This is why, if you'll use an image size bigger than "Thumbnail" and the image sizes differ a lot from each other, you'll see that they are not of the same size.
I apologize as I changed the language to "English" from the user profile settings and forgot to change it back.
( individual users can select a language from their user profile screen at {yourwebsite.com}/wp-admin/profile.php )
I've reverted it back to the site's default language now.
My issue is resolved now. Thank you!
