Gallery thumbnails spacing

[colin-smith]

My first post. 
I need a gallery where the images are uncropped and spaced close together for displaying book covers, as shown on the screenshot below. Each image will link to a page within the site (not to a larger image) and the gallery will resize depending on whether it's viewed on a laptop or tablet but will NOT rearrange the images. So far the various gallery options on Weebly are not giving me what I need. I can get the close spacing when using square or rectangular thumbnails but as these crop the images they're useless to me. If I select no cropping fro the thumbnails I get a very wide spacing and much smaller images. 

Anyone able to advise?
Colin.

[Adam7]

Our own gallery element has an option to turn off cropping, @colin-smith. There are also a few different gallery option sin our App Center which might also work:

https://www.weebly.com/app-center/search/gallery

[colin-smith]

Hi Adam. 

Thanks for your reply. I have tried turning off cropping but then the spacing between the thumbnails is much too wide, as per the image below. I had to compromise and have the uncropped thumbnails plus a slideshow (minus thumbs) to get a decent appearance. There seems to be no way of making a tight grid of thumbnail images.

I will try the app centre, although the first one I tried (Mosaic) demanded I upgrade before I could upload my own images. 

[Adam7]

Ok, let me know how it goes!

[colin-smith]

Well, I made this using a powr app. The spacing is okay and each image can have its own link, but frankly $3.99 a month for something so basic as a gallery is crazy. For the moment I'm still building the site on behalf of a group but once we're all ready we'll upgrade and buy our domain. However, a decent gallery is something that should be built into Weebly without needing expensive add ons. It's not as though a grid of closely spaced images is "out there" in design terms.

My guess is the spacing of thumbnail images is controlled somewhere in the CSS and if I could figure out where I could set the thumbnail images much closer together.

[Adam7]

Theme custdomizations could definitely be done to change the padding of images.  Is the site live yet? While we don't provide custom HTML and CSS assistance ourselves, some of our Community members could help.

[colin-smith]

Thanks Adam

The site is published @ http://hareanddrum.weebly.com/ albeit it's still in the free version so not (so far as I believe) indexed by search engines. I have found some people offering customised CSS for weebly, but not as yet found quite what I'm looking for.  I have already done quite a bit of modifying to the code, though it's something I am fairly clueless about.

Colin.

[BJ5]

I think the padding for the element is determined by the total width of the gallery, so if you have a full page width gallery it will space images out across the page.  If you add a spacer to the left and right, it will shrink the space.

You could add something like this to force a specific padding, though:

.fullwidth-mobile {
width:auto !important;
padding-left:5px;
padding-right:5px;
}

[colin-smith]

Hi BJ, thanks for replying.

Ideally I want the gallery full width and the images as large as possible with a thin border between them. I accept a spacer will reduce the border between the images, but it would still leave the images on the small side.

The coding you've presented is interesting. Where should I insert it in the CSS?  

Colin.

[tygolf2]

Hi Adam,

I am having the same problem. It is strange because my friend that uses Weebly does not have the same issue in her gallery. I am using the exact same size picture as my friend, so it should not be displaying differently. Please let me know if you have come up with a solution to this problem for some, but not others? Here is the link to my friend's page with an appropriate spaced gallery and a link to my page...look for "recent posts" and you will see a very wide border for each image.

[tygolf2]

Nevermind. I decided to change them to individual images and now the spacing is exactly what I wanted. This will work, but having more adjustments within Gallery would be much better.

[Adam7]

---

@tygolf2 wrote:

Nevermind. I decided to change them to individual images and now the spacing is exactly what I wanted. This will work, but having more adjustments within Gallery would be much better.

---

Oops, didn't see this before I replied.

[Adam7]

Do you have the same settings for your elements? I'd doublecheck that you're using the same element options settings as your friend.

[colin-smith]

Hi Adam

I don't follow you. From what I recall I load the images into the gallery but then there's no means of adjusting the space between the images. 

What I want is a grid of closely spaced images each with its own hyperlink, like this page http://www.triskelebooks.co.uk/

[Adam7]

What I mean is when you first click on the Gallery element, a popup box shows with some options for controlling the element itself.

[colin-smith]

Yes, I see that, but what I don't see is any way to adjust the horizontal spacing. I want large images and narrow spacing.  The only way I can see to get narrow spacing is to make the images either squares of landscape rectangles. As these are book covers that isn't practical. 

[Adam7]

We have some third party galler options in our App Center which might work better for what you want visually:

https://www.weebly.com/app-center/search/gallery