How to round corners of thumbnails

Sir_Eagle · August 15, 2013

Weirdest and what I really don't understand is that for me in Safari they are all square, all the time. (Like I understand any of it) Thanks for trying to figure it out.

garrettm30 · August 15, 2013

It's odd indeed. At least it is consistent for you. What I have on my end is so odd that I want to do some further tests. I have extensions on my Safari, so I should disable those. I also want to try it on my MacBook Pro at work and see how it does. I'll let you know later what I find. Part of the difference between us is that you have Safari 5.something on Windows and I have 6.0.5 on Mac. While I'm at it, I should also try the Safari 5 on my wife's old MacBook.

thenickdude · August 15, 2013

It sounds like the issue is that browsers aren't very good at clipping child elements which are position:relative or position:absolute, which is required for gallery thumb positioning:

http://stackoverflow.com/questions/3248734/css3-border-radius-clipping-issues

Someone has a hack here that might fix it:

http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera

EDIT: Yup! That fixes it for me, add this to the CSS after the border-radius line:

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

brandofamily · August 16, 2013

Lamah wrote: »
It sounds like the issue is that browsers aren't very good at clipping child elements which are position:relative or position:absolute, which is required for gallery thumb positioning:

http://stackoverflow.com/questions/3248734/css3-border-radius-clipping-issues

Someone has a hack here that might fix it:

http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera

EDIT: Yup! That fixes it for me, add this to the CSS after the border-radius line:
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

I'm sorry... I've gotten lost in this discussion. What does this line of code fix? Thank you.

thenickdude · August 16, 2013

There's some severe problems with the rounded corners of the thumbnails in the gallery content blocks in the Safari web browser: the corners come and go depending on scrolling the page and other factors. Adding that line after the "border-radius: xxxx;" lines (wherever you have them) seems to fix that problem, at least for me on my site.

Jingle Images · August 16, 2013

Lamah wrote: »

There's some severe problems with the rounded corners of the thumbnails in the gallery content blocks in the Safari web browser: the corners come and go depending on scrolling the page and other factors. Adding that line after the "border-radius: xxxx;" lines (wherever you have them) seems to fix that problem, at least for me on my site.

Look at my site. Everything works for me.

brandofamily · August 16, 2013

Lamah wrote: »

There's some severe problems with the rounded corners of the thumbnails in the gallery content blocks in the Safari web browser: the corners come and go depending on scrolling the page and other factors. Adding that line after the "border-radius: xxxx;" lines (wherever you have them) seems to fix that problem, at least for me on my site.

Thanks... I'm not code guru, but what the heck do all those letters do?

thenickdude · August 16, 2013

Basically it is a small image file which has been turned into text. Apparently applying an image as a mask causes the rounded corners to be drawn reliably in Safari.

brandofamily · August 16, 2013

rich56k wrote: »

http://www.onbroadwaydancers.com/Info-Pages/Broadway-Dance-Center-Info

http://www.onbroadwaydancers.com/Picture-Galleries
http://www.onbroadwaydancers.com/Picture-Galleries/On-Broadway-Dancers
http://www.onbroadwaydancers.com/Picture-Galleries/On-Broadway-Dancers/2005

Rich, would you mind checking these again with the newest fix added to the code?
Thanks.

Sir_Eagle · August 16, 2013

Lamah wrote: »
EDIT: Yup! That fixes it for me, add this to the CSS after the border-radius line:
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

Looks like that fixed it in Safari for me.

rich56k · August 17, 2013

brandofamily wrote: »

Rich, would you mind checking these again with the newest fix added to the code?
Thanks.

Anthony,

Sorry been off the forum for a few days ...That must have done the trick!

All the links look great - see attached...

Thanks Lamah for posting the fix!

brandofamily · August 17, 2013

rich56k wrote: »

Anthony,

Sorry been off the forum for a few days ...That must have done the trick!

All the links look great - see attached...

Thanks Lamah for posting the fix!

Thanks.

VNemeth · August 17, 2013

Allen wrote: »
Try this in "all galleries" CSS.
.sm-gallery-tiles .sm-tile img {
  border-radius: 8px;
}

I use this code and my thumbnails have 3 round edges and the 4th corner bottom right is still squared off.
What am I doing wrong? Smugmug style gallery

Vic

macromeister · August 17, 2013

VNemeth wrote: »

I use this code and my thumbnails have 3 round edges and the 4th corner bottom right is still squared off.
What am I doing wrong? Smugmug style gallery

Vic

Try changing border-radius:8px;

to ...
border-top-left-radius:8px;
border-top-right-radius:8px;
border-bottom-right-radius:8px;
border-bottom-left-radius:8px;

It should do the same thing. Do you have a border-bottom-right-radius anywhere else in your code?

Jingle Images · August 17, 2013

VNemeth wrote: »

I use this code and my thumbnails have 3 round edges and the 4th corner bottom right is still squared off.
What am I doing wrong? Smugmug style gallery

Vic

Check out my page. Everything works for me. But I have used different code then that.

Sir_Eagle · August 17, 2013

Just to throw it all in one place, here is all the code I have for rounded corners on my site. Works in all browsers too.

/*ADD RADIUS CORNERS TO SLIDESHOW AND LARGE PIC IN GALLERIES*/
  .sm-tile-single.sm-tiles-uncropped .sm-image {
    border-radius: 25px;
    box-shadow: 0 0 0 #000; /*LEFT THIS INCASE I WANT TO GO BACK TO A SHADOW*/
    max-width: 95%}

/* MAKE CORNERS ROUND ON GALLERY & FOLDER LINK IMAGES */
  .sm-page-widget-folders .sm-tile a, 
  .sm-page-widget-galleries .sm-tile a,
  .sm-page-widget-nodes .sm-tile a,
  .sm-page-widget-pages .sm-tile a {
    border-radius: 8px;
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);/*THIS FIXES A SAFARI BUG*/
  }

/* ROUND THE EDGES ON GALLERY THUMBNAILS in Collage Galleries */
  .sm-gallery-roworganic img, .sm-gallery-columnorganic img {
    border-radius: 10px;
   }

/* ROUND IMAGES DISPLAYED IN THE LIGHTBOX */
  .sm-lightbox-image {
      border-radius:25px;
  }

And then used this to elemenate the clipping of the right side of the page in the Collaga Style gallery.

  /* Show full THUMBNAILS in Collage Galleries(right side not cut off) */
  
  .sm-tiles-row-organic .sm-tiles-list {
    overflow: visible;
    margin: 0 0 0 -18px;
  }

Butlerkid · August 17, 2013

I like having the code all in one place!

I assume this is for collage landscape and collage vertical styles? Also, does all of this go on the SITE LEVEL CSS? Otherwise, please specific what level (folder or gallery or site) the code should be entered.

Sir_Eagle · August 17, 2013

Butlerkid wrote: »

I like having the code all in one place!

I assume this is for collage landscape and collage vertical styles? Also, does all of this go on the SITE LEVEL CSS? Otherwise, please specific what level (folder or gallery or site) the code should be entered.

I have it all in the entire site. Each section relates to a differant area that is why I have them separate and listed as what they are for. I use the collage landscape.

Butlerkid · August 17, 2013

I must be doing something really wrong.

(

My slide show has rounded corners and a drop shadow. It is OK......other than I cannot edit the contents since it says it is an SM restricted container. (All my slideshow images are in one gallery....)

In galleries, I have rounded corners on the images. That's good!

But I cannot seem to get my folder to show rounded corners.

This is the code I used and I put it in all Folders CSS: )

/* MAKE CORNERS ROUND ON GALLERY & FOLDER LINK IMAGES */
.sm-page-widget-folders .sm-tile a,
.sm-page-widget-galleries .sm-tile a,
.sm-page-widget-nodes .sm-tile a,
.sm-page-widget-pages .sm-tile a {
border-radius: 8px;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);/*THIS FIXES A SAFARI BUG*/
}

Jingle Images · August 17, 2013

Butlerkid wrote: »

I must be doing something really wrong. (

My slide show has rounded corners and a drop shadow. It is OK......other than I cannot edit the contents since it says it is an SM restricted container. (All my slideshow images are in one gallery....)

In galleries, I have rounded corners on the images. That's good!

But I cannot seem to get my folder to show rounded corners.

This is the code I used and I put it in all Folders CSS: )

/* MAKE CORNERS ROUND ON GALLERY & FOLDER LINK IMAGES */
.sm-page-widget-folders .sm-tile a,
.sm-page-widget-galleries .sm-tile a,
.sm-page-widget-nodes .sm-tile a,
.sm-page-widget-pages .sm-tile a {
border-radius: 8px;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);/*THIS FIXES A SAFARI BUG*/
}

Here is everything I have Code for my site

/* For home page slideshow*/

.sm-tile-content {
  overflow: visible;
  background-color: transparent!important;
}

.sm-tile-single.sm-tiles-uncropped .sm-image {
  border-radius: 55px;
  box-shadow: -6px 5px 10px #000;
max-width: 93%}

/* For my Folder Views*/
.sm-tiles-spacing-6 .sm-tile {
  margin-left: auto;
  width: 90%;
  margin-right: auto;
}

.sm-tiles-grid.sm-tiles-spacing-6 .sm-tiles-list {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.sm-tiles-grid.sm-tiles-spacing-24 .sm-tiles-list {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.sm-tiles-spacing-24 .sm-tile {
  margin-left: auto;
  width: 90%;
  margin-right: auto;
}

.sm-tiles-center-image .sm-tile-limit-width {
  border-radius: 25px;
  box-shadow: -6px 6px 10px #000;
}

.sm-tiles-center-image .sm-tile-limit-height {
  border-radius: 25px;
  box-shadow: -6px 6px 10px #000;
}

.sm-tile-content {
  overflow: visible;
  background-color: transparent!important;
}

.sm-page-widget .sm-page-widget-header>h2 {
  display: none!important;
}

/* For my Gallery Views*/

.sm-tile-content {
  overflow: visible;
  background-color: transparent!important;
}

.sm-tiles-center-image .sm-tile-limit-width {
  border-radius: 25px;
  box-shadow: -6px 5px 5px #000;
width: 60%}

.sm-tiles-center-image .sm-tile-limit-height {
  border-radius: 25px;
  box-shadow: -6px 5px 5px #000;
width: 100%}

.sm-tiles-S.sm-tiles-1x1 .sm-tile-wrapper {
  width: 20%!important;
}

.sm-gallery {
  margin: 0 auto;
  text-align: center;
}

.sm-gallery-header .sm-gallery-description {
  display: none!important;
}

.sm-tiles-spacing-12 .sm-tile {
  margin: 0 0 0 15px;
}

.sm-tile-limit-both {
  border-radius: 10px;
  box-shadow: -3px 3px 5px #000;
  margin-bottom: 10px!important;
}

.sm-tiles-grid.sm-tiles-col-3 .sm-tile-wrapper, .sm-tiles-column-organic.sm-tiles-col-3 .sm-tiles-column {
  padding: 5px;
width: 30%}

.sm-tiles-grid.sm-tiles-col-4 .sm-tile-wrapper, .sm-tiles-column-organic.sm-tiles-col-4 .sm-tiles-column {
  margin-top: 15px!important;
}

.sm-tiles-grid.sm-tiles-col-5 .sm-tile-wrapper, .sm-tiles-column-organic.sm-tiles-col-5 .sm-tiles-column {
  margin-top: 20px!important;
}

/* For Entire Site*/

.sm-page-powered-by a:first-child {
  display: none;
}

.sm-tooltip-floating:after {
content: 'All photos are property of Jingle Images You can purchase a print by clicking **Add to Cart** WaterMark will be removed with Print. All rights reserved. Unauthorized use is prohibited.'}

.sm-tooltip-content {
  display: none;
}

.sm-user-loggedin .sm-tooltip-content {
  display: inline;
  color: #000;
}

.sm-user-loggedin .sm-tooltip-floating:after {
  display: none;
}

.sm-user-ui .sm-tooltip {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: -4px 5px 10px #000;
}

.sm-page-powered-by {
  line-height: 22px;
}

.sm-page-powered-by.sm-page-powered-by-center {
  text-align: right;
}

@media only screen and (max-width: 640px) {
  .sm-page-powered-by, .sm-page-powered-by.sm-page-powered-by-left, .sm-page-powered-by.sm-page-powered-by-center {
    text-align: center!important;
  }

}

@media only screen and (max-width: 640px) {
  .sm-page-widget .sm-page-widget-content {
    margin: 5px!important;
    padding: 5px!important;
    text-align: center!important;
  }

}

VNemeth · August 17, 2013

macromeister wrote: »

Try changing border-radius:8px;

to ...
border-top-left-radius:8px;
border-top-right-radius:8px;
border-bottom-right-radius:8px;
border-bottom-left-radius:8px;

It should do the same thing. Do you have a border-bottom-right-radius anywhere else in your code?

This didn't work.
Vic

garrettm30 · August 17, 2013

Sir_Eagle wrote: »

Looks like that fixed it in Safari for me.

For what it's worth, I have checked that same spot on your site that I was talking about earlier, and it is now working flawlessly on my Safari.

That's some interesting code Lamah found! I've never seen such.

Sir_Eagle · August 17, 2013

garrettm30 wrote: »

For what it's worth, I have checked that same spot on your site that I was talking about earlier, and it is now working flawlessly on my Safari.

That's some interesting code Lamah found! I've never seen such.

Thanks for checking it out garrett.

cookiejay · August 20, 2013

I cannot get this to work anywhere for me!

I've tried several different CSS codes listed in this thread in just about every place I can put CSS code, but can't get it to work for the life of me!
Where am I going wrong guys?

Page I'm trying to apply this it to is -http://www.cherishingmoments.co.uk/Portraits

Jay

phaserbeam · August 20, 2013

Sir_Eagle wrote: »

Just to throw it all in one place, here is all the code I have for rounded corners on my site. Works in all browsers too.

Many thanks for the code

I was able to round the corners on my slideshow, works perfect for me. I just had to adjust the margins on Opera. Without that the drop shadow on the bottom gets cut off...

/*ADD RADIUS CORNERS TO SLIDESHOW AND LARGE PIC IN GALLERIES*/
  .sm-tile-single.sm-tiles-uncropped .sm-image {
    border-radius: 25px;
    box-shadow: 10px 10px 5px #888; /*LEFT THIS INCASE I WANT TO GO BACK TO A SHADOW*/
    max-width: 95%;
    margin: 0 0 18px 18px;
}

RKnecht · August 21, 2013

Ok, I think I tried everything. I can't seem to round the corners and add a radius to the large gallery image without cutting off the right side.

like on these pages:

http://www.richknechtphotography.com/Gallery-Index/DogAgility2013/JAG-AKC-Agility-Trial-June-14/Friday-Excellent-Standard-12

Figured it out. I had a "s" on ".sm-tile" . Took out the "s" and its fine.

McQ · August 21, 2013

Butlerkid wrote: »

I must be doing something really wrong. (

My slide show has rounded corners and a drop shadow. It is OK......other than I cannot edit the contents since it says it is an SM restricted container. (All my slideshow images are in one gallery....)

In galleries, I have rounded corners on the images. That's good!

But I cannot seem to get my folder to show rounded corners.

This is the code I used and I put it in all Folders CSS: )

/* MAKE CORNERS ROUND ON GALLERY & FOLDER LINK IMAGES */
.sm-page-widget-folders .sm-tile a,
.sm-page-widget-galleries .sm-tile a,
.sm-page-widget-nodes .sm-tile a,
.sm-page-widget-pages .sm-tile a {
border-radius: 8px;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);/*THIS FIXES A SAFARI BUG*/
}

I must have really done it wrong because after inserting this code site-wide, I can no longer see Folder or Gallery thumbnails on any pages!

And I had it working so well, except for those odd few thumbnails that stayed with squared edges! Dangit!

Any Help?

RKnecht · August 21, 2013

Glenn, I see your galleries fine. Did you remove the code?

RKnecht · August 21, 2013

Ugh, why is the edge cut off of the large gallery picture? See this gallery for an example:

http://www.richknechtphotography.com/Gallery-Index/DogAgility2013/Berks-County-Dog-Training-Club/Friday-Time-2-Beat-16-8/i-Pn37Sfz

redcrown@mchsi.com · August 21, 2013

Not ready to unveil yet, but thanks to all the unofficial helpers here I'm close. Two small problems with rounded corners.

1. Got collage landscape and collage portrait working OK. But on Grid format, the top corners are rounded while the bottom corners are not. Looks like the cut off right edge on the rightmost column that was reported and solved elsewhere in this thread. Is there a special CSS code for Grid?

2. The tips of my corners (the part rounded off) show a color other than my background. I've determined that the color showing thought is the "Primary Color" of the Theme. How to fix that?

How to round corners of thumbnails

Comments