Rounded Corners In Images Not Working

• 

  squelfland · Member · Mar 5, 2022 at 1:49 am

  • Copy link
  • Add topic to favorites

  Hello, rounded corners stopped working as of this post: https://marinaneira.com/2022/03/02/visiting-mom-again-%f0%9f%92%95/

  Same for this one which followed: https://marinaneira.com/2022/03/03/at-markham-park-%f0%9f%90%87%f0%9f%8c%b3%f0%9f%90%b8%f0%9f%8c%b2/

  If I go to edit, the images that have rounded corners (the GIFs at the top of the posts) have them. But if I look at a preview and/or publish the post, the corners remain square.

  If I turn the images into a gallery, the rounded effect shows properly. Any other prior posts with rounded effect on the images has not been affected. How can I get it to display properly in the newer affected posts?

  Thanks in advance!

  The blog I need help with is: (visible only to logged in users)

• 

  ericfri · Staff · Mar 5, 2022 at 4:44 am

  • Copy link

  Hi there,

  On this page, which image(s) are you expecting to have rounded corners?

  Can you provide an example link of where it’s still working correctly?

  Cheers,
  Eric

• 

  staff-sheva · Staff · Mar 5, 2022 at 10:25 pm

  • Copy link

  Hi @marinaneira,

  It looks like you’re using the Twenty Fourteen theme. As this theme is much older, it may not be fully compatible or have all the features available from the block editor. You may want to consider a newer theme.

  In the meantime, since you’re on a Premium plan, you can custom CSS to add the rounded corners. Please go to Appearance → Additional CSS and save the following:

  .is-style-rounded {
      border-radius: 100px;
  }

  Just ensure in the editor that you also have the images set to rounded. Hope that helps.

• 

  squelfland · Member · Mar 6, 2022 at 1:50 am

  • Copy link

  Hey staff-sheva, I have confirmed this issue is only happening when attempting to center the images. Images without alignment (or any alignment other than centered) show the rounded edges fine. The moment that the image is centered, the rounded effect is lost, upon publishing.

  Hi @ericfri, On the page you mentioned, this is the only image that should have rounded edges: https://marinaneirahome.files.wordpress.com/2022/03/mandalorian-baby-yoda.gif

  But as mentioned above the effect is lost when centering the image. Older posts have not been affected, curiously.

• 

  supernovia · Staff · Mar 6, 2022 at 3:10 am

  • Copy link

  Hmm. Are you seeing rounded corners on any of these images?
  https://marinaneira.com/2022/

  I’m not seeing them on any, but it could be some gremlins in my internet connection right now.

  Also, if you set the images to full width rather than centered, does that do the trick?

• 

  ericfri · Staff · Mar 6, 2022 at 4:56 am

  • Copy link

  I also don’t see any rounded images.

  Are you using a CSS minifier plugin? On the Baby Yoda image, the parent figure element has the class is-style-rounded but I can’t find it in any of the linked CSS files.

  I’m wondering if they expected CSS is being removed. Plugins like Debloat remove “unused” CSS which can sometimes remove things that it shouldn’t, especially if the classes are modified by the JavaScript on the page.

• 

  ericfri · Staff · Mar 6, 2022 at 4:57 am

  • Copy link

  Can you put up a test page with two images where they should both be rounded where one works and the other doesn’t?

• 

  squelfland · Member · Mar 6, 2022 at 2:59 pm

  • Copy link

  @supernovia The issue is recent. Rounded corners are in fact visible on images in older posts, you just have to scroll a lot (I post multiple times a day). Currently these are the posts effected (as well as any new ones I create):

  Post: https://marinaneira.com/2022/03/04/markham-park-again-and-a-new-friend-%f0%9f%8c%b2%f0%9f%90%bb/

  Image affected: https://marinaneirahome.files.wordpress.com/2022/03/mofurun-anime.gif

  Post: https://marinaneira.com/2022/03/03/at-markham-park-%f0%9f%90%87%f0%9f%8c%b3%f0%9f%90%b8%f0%9f%8c%b2/

  Image affected: https://marinaneirahome.files.wordpress.com/2022/03/ren-and-stimpy-adult-party-cartoon.gif

  Post: https://marinaneira.com/2022/03/02/visiting-mom-again-%f0%9f%92%95/

  Image affected: https://marinaneirahome.files.wordpress.com/2022/03/mandalorian-baby-yoda.gif

  If you scroll down my blog beyond that last post, you will see that the GIFs I often use at the start of a post are all rounded as should be.

  Also, if you set the images to full width rather than centered, does that do the trick?

  Yes, but I do not want to do this. I generally try to have the image look a little smaller, like an “accent” above the first paragraph. Full width is far too big. And these are small GIFs, so this could not be a permanent solution anyway.

  
  @ericfri: I do not use any plugins. This issue is also very recent, just a couple of days ago. I’ve made no changes to my blog other than posting, and the issue just suddenly started, only on new posts.

  Here is the test post you requested: https://marinaneira.com/2022/03/06/test-post/

• 

  supernovia · Staff · Mar 6, 2022 at 9:26 pm

  • Copy link

  I scrolled for quite a while looking for examples of centered, rounded images. Just now I looked through all of December 2021 without finding any examples.

  Could you maybe send a link to one older post that worked as expected? I’m sure when we take a look at the code we’ll see what’s up, but we need a proper example first.

• 

  squelfland · Member · Mar 6, 2022 at 9:30 pm

  • Copy link

  @Supernovia That is bizarre. Other than the recent problematic posts, my blog looks as it should on multiple computers in our household, and on my phone as well. Here is the most recent post where the two GIFs are properly rounded and centered: https://marinaneira.com/2022/03/01/another-t-y-park-outing-%f0%9f%90%bf%ef%b8%8f%f0%9f%a5%9c/

  And an image showing this: https://www.dropbox.com/s/15iba8j2mr82vk3/Screenshot%202022-03-06%20162911.png?dl=0

• 

  supernovia · Staff · Mar 6, 2022 at 9:45 pm

  • Copy link

  I think the test post helped, too. Here’s what I see in the code.

  When you add an image without alignment, you just get an image inside a figure. The figure has classes .wp-block-image and .is-style-rounded applied.

  On the centered, there’s a div around the figure and the image. The .wp-block-image class is applied to the div, and .is-style-rounded is applied to the figure.

  But this CSS wants both classes together, otherwise it reverts back to a normal border radius:

  .wp-block-image:not(.is-style-rounded)>a,.wp-block-image:not(.is-style-rounded) img{border-radius:inherit}

  If you’ll let us know when the problem started by sharing the most recent post that is unaffected, that will help, too. We can maybe track down what changed around that time.

  We’ll also test this on another theme to see if that’s a factor.

• 

  squelfland · Member · Mar 6, 2022 at 9:51 pm

  • Copy link

  @supernovia the most recent unaffected post is the one I just shared with you. I did not make any changes to my blog recently, or changed how I do anything, just posting as normal.

  I really appreciate all the help I am receiving on this issue, small though it is, it does affect the way I like to post, so I appreciate it greatly.

• 

  supernovia · Staff · Mar 6, 2022 at 10:57 pm

  • Copy link

  I was able to confirm when and where the bug is happening. Seems to be a recent update to the Gutenberg plugin, so I’ve filed a bug report there.

  Because the problem is with the way the code is generating with alignment, you may need to rework a few posts when it’s resolved. I’d recommend for now just using unaligned images if you’re able, then you can swing back later and make them smaller.

  Cheers!