Image stack round corners not round on published site

(David Schlotzhauer) #1

[I emailed this to Stacks support, but thought I should also bounce it off y’all too]:

I have an Image stack within two nested 2 columns stacks. I have set Border: Round Corners to 4px and Layout: Padding to 0. The corners of the image are indeed rounded in Preview, but not in the published site (Safari or Chrome). In Edit mode, it appears like there is still some padding so that rounding the border doesn’t affect the corners of the picture, but the result in Preview and in the published site shouldn’t differ. Is this a bug, or am I missing something?

(RW 8.03, Foundry, Stacks 3.6.5, on MacOS 10.14.2)

(Doug Bennett) #2

A URL to a page always helps you get help.

(David Schlotzhauer) #3

Screen shot from RW editor:

(David Schlotzhauer) #4

screen shot from RW preview:

(David Schlotzhauer) #5

screen shot from published site in Safari:

(Doug Bennett) #6

Screenshots really don’t help much. With the URL (published) folks can use web tools to see what is going on.

(David Schlotzhauer) #7

Ok… here’s the URL for the web page corresponding to the last screen shot I sent:

(Paul Russam) #8

Seems to be working on my iPad, though you do seem to have different values for the radius on at least 1 of the 4 images

(Will Woodgate) #9

Border radius is applied to the outer parent container, not the image itself.

Your images are not wide enough to fill the parent container. Therefore although the rounded corners are there, the image is not wide enough to be framed by them.

If you make the screen narrower, you will see the rounded corners appear.

Likewise if you were to provide bigger images, you would see the border radius applied on those images all of the time.

(David Schlotzhauer) #10

Ok, I see. Thanks. I understand that the rounding is intended to affect the border rather than the image, but I have to say that not having a way to consistently round image corners as well seems a bit of an omission. It doesn’t look too good to have a rounded border around an unrounded image.

Do you know of another stack or some way to directly round image corners? I really would not want to have to edit each picture to create images with round corners.

(Will Woodgate) #11

My ImageWizard stack applies rounded corners directly to the images, instead of the outside container.

The roundness can be specified in pixels within the stack settings, for each of the 4 corners. It will work for images you drag and drop into RapidWeaver or those stored elsewhere in a warehouse location.

There was an old stack called ImageRoundr (the misspelling is intentional) which was merged into ImageWizard a few years ago.

ImageWizard is a combination of several differnet stacks. So there’s load of other useful things it can do too. There is a free demo version to download and play with.

If you want a single stack that can handle all your rounded images and caption content, then ProGallery might be your best option. The lightbox effect is easily disabled if you don’t want it. Perfect for a grid of images and caption content.

(David Schlotzhauer) #12

Thanks Will. Nice to see that at least one developer actually provides test versions.

Does ProGallery also do the rounding, or just the gallery creation?

(Will Woodgate) #13

ProGallery will apply border radius directly on the grid thumbnail images (like ImageWizard does) if you use the Image Radius setting.

(David Schlotzhauer) #14

I’ve been trying it out and see that now - and it has the special effects like scaling. Very nice. A couple of things I would wish for are a masonry style grid and panorama support - at least like in your Viewty stack, but ideally would show panos at full height and allow horizontal scrolling. I can’t find the latter anywhere.

(Lisa Sandler) #15

ProGallery does have Masonry layouts…
I use it for my portfolios on this page:

(David Schlotzhauer) #16

Hey Lisa… looks good! I guess this is the default grid type and it does masonry in columns - maybe that’s the way masonry is always done.

(Lisa Sandler) #17

Yes, you will see any masonry stack/layout will be in columns, as far as I know. My photos are usually one of 4 ratios, and although I do try to make the layout look nicer by alternating sizes, I don’t spend too much time worrying about it :slight_smile:

(David Schlotzhauer) #18

Yes, I think you’re quite right about the masonry style. Anyway, could I trouble you to tell me how you got the top edges of the images in the first row of your portfolios to be even? It seems that ProGallery wants to stagger the top edges of successive columns up and then down which I don’t find very pleasing. I don’t see an obvious control for that.

(Lisa Sandler) #19

Do you have a link or screenshot? It’s probably related to padding or margin settings?

(David Schlotzhauer) #20

This is a page on my test site that shows the column shift. The top section is done by ProGallery (lower section by another stack I was testing). In this case, it seems to just be one column as I see it in Safari on 13" MacBook Pro that casts it as a 4 column grid. It appears it is caused by ProGallery aligning the centerline of images in that first row. I don’t see that happening in your portfolios. Maybe this is affected by additional images in lower rows somehow, but I still see it if I shrink the window to force the grid to be 3x3.