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..!!

Mosam Gor

A tech-blogger. WordPress caprice. Simplistic. A geek. SocialMediaMarketer. Music and Movie freak. Affiliate marketer. Short tempered. Crazy about Gadgets. An Strong experienced in web designing through HTML and CSS.For me free time means playing with WordPress and maintaining my other blogs and websites. I am interested in playing “tabla, djembe & piano”. Add me on Google+

You may also like...

23 Responses

  1. Dharita Chokshi says:

    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.

  2. Hi Mosam,

    Happy Diwali! I am in Bangalore today. Fun festival.

    Thanks for sharing the tutorial!

    Ryan

  3. i often do this especially when the image have same background color as my page. It adds some level of professionalism to the image.

  4. Emmanuel says:

    Happy Diwali to you as well bro.

    Thanks for the share but can’t any plugin do?

  5. Pramod says:

    Nice share !
    From this small tutorial we can figure out how powerful wordpress platform is .

    -Pramod

    • 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. 🙂

  6. marilyn says:

    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.

  7. Awesome stuff man! Thanks for the great tutorial, from now I will be using this!

  8. 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.

  9. 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 says:

      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

  10. Arbaz says:

    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 🙂

  11. Singh says:

    Hello,

    Seems really detailed tutorial, adding frames around images in wordpress is really nice idea so that i would looks unique.

    thanks

  12. Sohail says:

    Informative post mate, Adding frames to images make the image looks more attractive but using a border is enough.

    I’m gonna try out the css code soo.

    thanks

  13. Colling says:

    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

  14. Ashish says:

    Hey,

    Cool stuff, i think i’ve seen it and tried it but some of the images looks ugly so we need to try on white color background images.

    Thanks for tips

  15. Wonderful and detailed article! Never heard or tried anything for adding frames to images in wordpress and I think it’s a wonderful idea to make images look better.

    Thanks

  16. Hello Mosam,

    Nice tutorial you did here and i hope to become here for more.

    And a little out of the box: I like your theme and the color.

    Thanks for sharing, Philip

  17. 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.

  18. Hey Mosam, nice tips. Surely going to use them on my blogs. But, can you tell me if it will effect the SEO and traffic of my blog or not? Really curious.

Leave a Reply

Your email address will not be published. Required fields are marked *