How to Add Frames to Around Images in WordPress

WordPress image in posts with frame

Hello and welcome back to another tutorial specially for this Diwali festival happening in INDIA..!! Well, if you are currently writing some article for your fellow readers then why not try this tutorial to add a tinge of good looks to your article? Ahann…..so should we proceed? Great than..!! Here we go…!!

The newbies into the world of blogging and people, all the time discuss how sophisticated WordPress can be.  The WordPress dashboard can also be overwhelming, and other settings you may in finding eventually by mistake.

Say for example, after uploading a picture into your submit you could make some adjustments to settings you have already made, and even size the image.

Some images appear better with a “picture frame” But you may be wondering “how to Add Frames to Around An Images in WordPress”. Don’t Worry I will Show you.

First you wish to click on the picture, after click on the “Edit image” icon.

S1

When you will do that, you’ll get this editor window the place that you would be able to make some changes.

S2

The problem right here is that regularly that is so far as we will be able to go. There’s that “Advanced Settings” tab on the top left corner, however most users to find when clicking on anything else advance, it regularly manner code or other issues they don’t understand to use. however in the event you do, you are going to to find a very easy approach to add a Frame across the picture under the “Advanced Image Settings”.

S3

Now you may also in finding that your theme by means of default puts a border round any picture you insert. but others don’t.\ by simply adding in a number, you’re going to get a black, or depending in your theme, every other colored border. if you put in a “3″ it will be 3 pixel wide. So that you can make it as skinny or thick as you want.

Image Without a Frame :-

 

Red-browed_Amazon_parrot

Image With a 5px Grey Color Frame :-

 

Red-browed_Amazon_parrot

That is all there is to it! 🙂

So, this is all it is…!!! You must try this stuff for your article even..!! I assure you this will add up a great look and feel both.

Enjoy the festival of lights..!!




There are 23 comments

Add yours
  1. Dharita Chokshi

    Hey Mosam,
    Great write-up and really helpful article for new comers like me. Now I can make my blogs much better and attractive as images plays a very vital role in write-ups.

    Thanks for sharing.
    Keep Writing more and more such useful articles.
    Keep Smiling.

    Regards,
    Dharita.

    • Bhavesh Patel

      You are right Pramod, WordPress is really great and powerful platform which comes up with so many advantages. But still many people are not accept WordPress platform for their site. Any way nice share. 🙂

  2. marilyn

    thanks for sharing this mosam. i never realized that i can add borders to my images. borders should be used when highlighting an image. i rarely add borders to my image unless required.

  3. Taniya Madan

    Hello Mosam Gor,
    Thanks you so much for such great explanation to Add Frames in Images WordPress but I wasn’t ware about it & now it’ after reading this mail I understand it’s amazing & very easy to add frames.

  4. Jignesh Rathod

    Mosam, thanks for the tutorial.
    But this method applies hard coded style to each image separately. What if someone, some day, wants to change the border width or color in all images depending on theme?

    I think there’s a better way to do this: Create a class in style.css, and apply it to images. Something like below:
    (In Style.css file:)
    .myPictureBorder
    {
    border:5px solid black;
    }

    (In CSS Class text box: as per above example)
    “myPictureBorder alignnone size-full wp-image-170”

    So if I want to change anything, I will have to simply only change in style.css and it will apply across ALL images in the blog!
    Let me know what you think! 🙂

    • Mosam Gor

      Hello Jignesh Bro,

      Well, first of all Happy New Year

      Thanks first of all for putting bringing up this point before us.
      Actually in “ADVANCED IMAGE SETTINGS” you can give your required CSS in the style field itself directly for any of the images, you won’t require to do that manually by creating a style.css, as I have mentioned in the last 3rd snapshot. I found this option better as it is much more user-friendly to any of the newbies and also for us. Let me know if you have got anything else.
      And thank you very much for sharing this Great idea of creating a style.css seperately 🙂

      -Mosam

  5. Arbaz

    That’s great. I didn’t knew that we could add frames and borders right while editing the post. I always thought that it was some kind of CSS codes that make the frames around images.
    Thanks for sharing this simple yet useful tutorial with us.
    Cheers 🙂

  6. Colling

    Great Tutorial. Actually I did not know that how to add frames to around images in wordpress but you have welly discussed in such issue. I can hope now that I will able to add frames to around images in wordpress. Thanks dude

  7. davidson homes delaware

    Do you have a spam problem on this website;
    I also am a blogger, and I was wanting to know your situation;
    many of us have created some nice procedures and we are looking to trade techniques with other folks, please shoot me
    an e-mail if interested.


Post a new comment