How to create image border since “Blocks” update

  • Since the latest update (to the “blocks” format), I cannot find where the image border function is. I used to be able to to add a border to an image, designating the color and width in pixels. That seems to be gone now.

    How can I add borders to my images now?

    Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Two ways:

    1. Add a class to your image on the “advanced” tab on the right sidebar, say “img-border”. Then add custom CSS from the customizer:

    .img-border {
   border-style:solid;
   border-width: 1px;
   border-color: #000;
}

    2. Use a plugin like https://www.ads-software.com/plugins/advanced-gutenberg/ to get an image block that directly supports borders.

    Thread Starter thedentalwarrior

    (@thedentalwarrior)

    Thanks for the reply.

    First way – no clue about that html-level stuff.

    2nd way… will try that. But, it’s odd that an “update” actually decreased / removed functionality from WordPress. It used to be a very simple task to add a border to an image.

    Thanks again.

    Thread Starter thedentalwarrior

    (@thedentalwarrior)

    Installed “Advanced Gutenberg.” Literally no change in function. Yes, I’ve activated it. But, I do not see any image border function. I even did a search for “borders”
    in the Advanced Gutenberg plugin settings. Nothing there.

    It shouldn’t be this hard to do freakin’ image borders. It used to be EASY.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    OK, I thought that plugin added borders. If not, remove it.

    Use the class and CSS method instead.

    Thread Starter thedentalwarrior

    (@thedentalwarrior)

    Thanks, but I know nothing of “class and CSS.” I’ve been using WordPress for my blog for many years. I’m using a “Twenty-Ten” theme. I’ve never had any issues at all… until this last update that uses “blocks.” What a PITA. Aligning images precisely with text is now nearly impossible. With “blocks,” you have to align it with the top / first point in the subsequent (or previous) block. You can’t align an image part-way in a paragraph anymore. It has to be at the beginning of the paragraph.

    And now I’ve lost the ability to place a simple border around an image. Who are the geniuses that came up with this ****???

    UGH! I have no desire to learn how to code in HTML. I just want to put a border around images in my blog. Simple stuff.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Maybe you should install the plugin “Classic Editor” and go back to the old editing experience.

    Thread Starter thedentalwarrior

    (@thedentalwarrior)

    I tried the CSS class thing. Figured out how to add it. Didn’t work, unfortunately. All it did was put a solid horizontal line ABOVE the image (and wrapped text). Did nothing to the borders of the image.

    I’ve used my 9th-degree Google-fu black-belt to search up how to do this. I am STUNNED that there really is no available solution. Apparently, I had an old image border plugin that was not maintained by the developer and no longer compatible with the current version of WP.

    But, again… stunned that there is no easy solution to a very simple (and commonly needed) task. A simple image border!! Holy crap… nothing out there.

    lisa

    (@contentiskey)

    please share a link that will let volunteers inspect the image on your website that you would like to add a border around. (it will require some CSS to add the image border.)

    • This reply was modified 5 years, 4 months ago by lisa.
    Thread Starter thedentalwarrior

    (@thedentalwarrior)

    Thanks, Lisa. But, I give up. Seriously. I’ve been blogging for over 10 years. It shouldn’t be this hard. I can’t be the only person who wants to put borders on his images. I used to be able to do it. Now I can’t.

    I’ve searched high and low for solutions to no avail. It’s truly unbelievable. I tried the CSS. It didn’t work. I tried other examples of CSS code. They all have the same result… a single horizontal line above the image and text… even though the CSS class was applied ONLY to the image.

    I’m done trying (been at it ALL day). A huge waste of time.

    Unfortunately, the new “block” format also screws up the text-wrapping around images in the mobile version, too. What a mess. Never had that problem before. The mobile version used to just stack the images and text (no wrapping). Now, there’s wrapping with funky one to three letters along the side, breaking up the words into a vertical format. Ay, ay, ay!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How to create image border since “Blocks” update’ is closed to new replies.