Borders and paddings for images

[robfaas]

It seems to be impossible to add borders (and paddings) to the thumbnails. Or is there a way?

[jefftucker1952]

You can get away with a 1px border on the thumbnails, which is handy if you want to separate the images from the background, but borders larger than that, or borders plus padding between border and thumbnail, is a recipe for trouble. I tinkered with it a lot, and never found a way to do it. As you've discovered, you end up with problems with the right side, with borders sometimes becoming too thin or vanishing entirely.

[robfaas]

Thanks, indeed, borders more than 1px give problems with the right side. I suppose it would require an adjustment of the script, but I am not capable to find that out myself. Something like enlarging the detected image width and height with the padding and border widths. It would be a great feature though!

[robfaas]

These folks have found a solution: https://fooplugins.com/foogallery/wordpress-justified-gallery/

[jefftucker1952]

Well, I have no doubt that with a different script, things like borders can be accommodated. FooGallery doesn't appear to be a modification of Justified-Gallery - it's a completely different bundle of software. And, alas, it's server-side - PHP rather than Javascript - and available only as a Wordpress plugin.

The other big difference, of course, is that FooGallery isn't abandonware. Development of Justified-Gallery came to a complete halt quite a while ago. There are even bugs that were introduced in the latest version that haven't been fixed. Pity. It needs to be adopted by someone with the Javascript skills to tackle the problems and do some enhancements. But there's no money in it, so....

ETA: BTW, it's always interesting to see what happens when someone focuses on one thing to the exclusion of everything else. FooGallery looks like a very well-constructed thumbnail gallery display script. But click on one of those thumbnails, and look at the godawful lightbox that's being used! It's a design disaster. ;)

[robfaas]

On this page: https://miromannino.github.io/Justified-Gallery/ (almost at the bottom) there is a (old) claim that Justified-Gallery script is used for FooGallery. And yes, the lightbox of FooGallery is a horror!
Real pity that this is abandoned! I would easy pay for a script like this, when it was up-to-date.

[jefftucker1952]

Interesting. At this point, I'd say that while Justified-Gallery may have provided the initial code for FooGallery, it doesn't look like there's much of it left.

Happily, JG is sufficient for my needs. I'm OK sticking to borderless or a 1px border. I'm either not using any of the features that are currently buggy, or I work around them. But it could be so much better.

Glad to see I'm not the only one repelled by FooBox. They seem to have forgotten that the purpose of a lightbox gallery is to showcase the images - they seem to be very enamored of large, intrusive navigation, borders, and captions, instead.

[robfaas]

Strange, on the photo site of @miromannino it seems to work (almost) when adding a 4px solid border (with FF developer tools) https://miromannino.com/photography/portfolio/landscape/

[jefftucker1952]

If you start tinkering with the viewport size, however, you quickly get into trouble again. In depends on which element you place the border on. There's more going on there, to boot.

First, it's a Wordpress plugin, not pure client-side scripting, so tough to sort out.

Second, there's some jQuery tweaking happening, so it's not clear who is doing what, and to whom.

Third, I'm guessing that he's using a small value for refreshSensitivity, which reduces the border problem. That's fine as long as the page always has a scrollbar. But with less content, and, therefore, a scrollbar that is sometimes there, sometimes not, using a small refreshSensitivity value puts you into the dreaded "flicker mode," in which you get a page that rapidly cycles between two slightly different layouts.

[robfaas]

Well, @jefftucker1952, thanks for all replies! I think you are right and I have to give up hope :(

[miromannino]

Hello everyone. Have you tried to see this: http://miromannino.github.io/Justified-Gallery/options-and-events/

There is an option called border for the whole gallery border, and an option margin for margins between the images (aka thumbnails borders)

Does it not work for you?

[robfaas]

Yes ofcourse. Searching and trying again. Adding border to thumbnail img seems to work on the demo, but only there. Then I found out that it does not work without Bootstrap. Because when you don't use Bootstrap this css rule, that seems to be essential, is missing:
img { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

[miromannino]

It is not true that it works only there. If you download the JG repository it works too in /test/main/margins.html that is a webpage with just the essentials (no Bootstrap is loaded).

I suspect that you have something in your own webpage with some too generic css rule that is causing the issue.

[jefftucker1952]

The margin setting controls the spacing between the thumbnails. The border setting changes the width of the border around the entire gallery - it's actually padding, not a border.

It can't seem to do this, which is a 4px red border on each image, with 2px of padding on each:

The margins.html page doesn't work at all, in any browser. Regardless of margin and border settings, each example looks exactly like every other example.

[jefftucker1952]

Just as a sanity check, I downloaded a fresh copy of the master zip file, and uploaded its contents to a server. Here's the page in question:

https://misterneutron.com/jgmaster/test/main/margins.html

It coughs up a bunch of 404's, Javascript errors, and undefined DOCTYPE's.

[miromannino]

The reason why margins.html does that is because you need first to do yarn install on the main folder otherwise it's not working because jQuery is not found. Third-party libraries are not saved in the repository, just the package.json and yarn.lock files that makes sure same library versions are installed.

But you are right the naming is not clear. Border is the padding of the whole gallery, while margin is the margins between thumbnails.

What you are attempting seems different. It looks like you want a different color border on each thumbnail on top of the margin? This feature is not supported right now, but might work with a combination of setting JG margin + css for thumbnail borders.

[jefftucker1952]

I've tried every CSS trick I know, and putting borders on individual thumbnails always leads to other problems, like cropping on the right and bottom edges of the gallery, or uneven thumbnail borders (e.g., 4px on three sides, but only 2px on the fourth side).

It helps to keep refreshSensitivity to its default of zero, but that, in turn, leads to the well-known "flicker" problem.

[acwolff]

It is not true that it works only there. If you download the JG repository it works too in /test/main/margins.html that is a webpage with just the essentials (no Bootstrap is loaded).
Please prove this by publishing that page on your website and give the link here! And may be you should publish more pages with different settings and all without Bootstrap!

[robfaas]

Please consider to take a look at two bare examples, where the ONLY difference is the css rule img { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
example where borders are dissapearing at right side and bottom and example working as wanted

[jefftucker1952]

That's a very promising approach. There's still a wrinkle: if the gallery is within a responsive wrapper (like a div with width: 90%), the JG border needs to be large enough to contain the image borders on the right side, unless refreshSensitivity is zero (the default). But if refreshSensitivity is zero, you run into the dreaded "flickering page" problem. But it looks like that can be handled.

BTW, no need for the browser prefixes - box-sizing is supported in all current browsers.

ETA: The tougher question is whether, if this works reliably, I want to let my users start putting big padded borders on their thumbnails - just when I've gotten them used to sticking to cleaner, more modern design approaches!

[robfaas]

Yep, I can confirm that page sometimes will flicker like... :(
I think it's best to force vertical scrollbar to prevent this. example

[jefftucker1952]

I've always hated the forced vertical scrollbar "solution" to the flicker problem. It certainly works, but it offends my sense of aesthetics. Not too bad with a white body, but with black, it's really annoying. In short, there shouldn't be a scrollbar on a page if there's nothing to scroll to.

Setting refreshSensitivity to 18 takes care of the width of the scrollbar, but you need to set the JG border to something like 20.

Of course, if your gallery is large enough that it can't be contained within the viewport of a typical 1920x1080 monitor, or if there's a lot of other material on the page, you're safe. But then there are people with even bigger monitors...

[robfaas]

I understand that. But it will be used mainly on pages larger than 100% viewport height. For now I am a happy man with this acceptable solution.

[miromannino]

@robfaas @jefftucker1952 my bad I thought you just wanted margins between images not also borders. Honestly I thought borders on images were trending decades ago, I never considered this possibility.

Good finding @robfaas! Definitely using border-box seems like a good approach for it that would work even without borders. Do you still have issues despite border-box?

@robfaas @jefftucker1952 @acwolff For the flicker problem better to talk in another GitHub Issue if you don't mind. But long story short, I can't do anything about it, I just render photos in the rectangle that has been given. I can't force people to have vertical scrollbar always on, to tweak refreshSensitivity to what is usually a scrollbar width, or to display the gallery 90% smaller than the given space.

As @acwolff suggested, is a good idea to have more of these tests as documentation, and more examples on possible ways to solve issues like borders or flicker issue. I just hoped the community was going to help a bit more on this.

A final note: this project is open source, you are always welcome to help with bugfixes with pull requests. I absolutely have zero income for this project and I have so many other projects to work on (even on my spare time).

[robfaas]

@miromannino Yes, there are other issues. In my examples maxRowHeight is set to null. If you set maxRowHeight to a value not much higher than the rowHeight, then the borders (right/top/bottom) will dissapear at certain viewport sizes.

[jefftucker1952]

It's a tricky beast to tame. I usually set the maxRowHeight to about 120% of the rowHeight, but then feed it oversized thumbnails to avoid the loss of clarity that would otherwise result when, say, a 300x200 thumbnail gets shown in a 240px tall row. Tossing borders into the mix complicates matters, as you've discovered.

That settles it - I'm sticking to either no borders, or 1px borders with no padding, just so that images don't "bleed" into the background. No beveled borders that shift orientation upon mouseover, for my users!

[acwolff]

If I use a border of 1 pixel with this css code:

.thumbs-jg img {
	cursor: zoom-in;
	box-sizing: border-box;
	border:1px solid !important;
	border-color: rgba(0,204,0,1.0)  !important; 
	padding: 3px!important;
	border-radius:  4px;
}

the border disappears sometimes at the bottom in some rows as you can see in this album.

[jefftucker1952]

This is all familiar territory - I haven't wrestled with it in about three years, but it's all coming back to me now.

I finally gave up, and stuck to a maximum 1px border, applied to the .jg-entry class, rather than to the thumbnail img itself, and no padding. Any other combination, and you will stumble on combinations that just don't work, even with the partial solution posted above.

The underlying problem is simply that the script, when doing its computations for setting the layout, doesn't always properly account for the size of the image plus its border and padding. There doesn't seem to be a reliable way to get around that without making some changes in the script. I'm not sufficiently interested in being able to do this, to be willing to spend the time on it that it would require.

[0xxb]

At first, I tried to use absolute positioning to increase the border of the picture, and found that The overflow: hidden attribute was used on the .jq-entry, so I gave it up. Later, I remembered the outline attribute. border will increase the width, but the outline will not. I wrote a demo, hoping to help you. https://jsbin.com/vuxowec/edit?html,css,js,output

[jefftucker1952]

Oh, I like it! Using an outline rather than a border does appear to avoid most of the problems. If you also try to apply padding, you're back in no-man's-land, of course, but that's a minor consideration.

Edit: I spoke too soon. I'm still running into situations in which the outline width on the right side of the thumbnail table shrinks below its set value, just as the border width does. The fundamental problem is that the outline/border is beyond the edges of the thumbnail image, but the JG script doesn't know it's there.