How to make your picture feel comfortable

We all love to have pictures on the blog. It looks so much better and more interesting.
But it is not only about adding pictures to the blog, we want it to look cool too.

Uploading pictures

First you have to upload you picture.

Hit the camera-button:

click “Select file” …

… and upload your picture.

Now you have to select one out of four way to align your picture.

None: picture stands lonely and alone in its own line

Left: picture stands on the left side.

Center: picture not only in the center of attention but also in the center of your text.

Right: picture stands on the right side.

I decided to align my picture left. So it follows the direction of my writing.

But just pure left alignment looks a bit nasty.

See? No space between text and picture. This is a NO GO. Never do that!!

Have a look at the reader’s side of the medal.

To make it clearer … since I used yesterday’s post for my explanations and yesterday I had a transparent .png file, I added a little pink border to make it more clear. Border is just around the picture.

See how the text clutches directly at the picture?

Nasty, very nasty.

Add more Space

Quite easy, make it comfortable for your picture. Don’t allow text to grab your picture.

We have to add a bit more space. Space is measured in pixel = px. A pixel is a very tiny part – just one point.

So don’t be too churlish with the pixels.

Click on your picture while being on visual editing mode.

You see a little blue image in the left corner … this is where we have to click to edit our image. The symbol right next to it is for deleting the image.

In the basic editing section you can change the alignment again, add alternate text or a caption to your picture. You can also edit the size.

Please click on “Advanced Settings”.

Don’t be afraid of the appearance.

You can edit the size here as well.

Source: the folder on the server where your picture is stored

Size: the actual size of the picture … I have set up my picture in 320 x 209 … so this is the original size. I highly recommend that, to upload a picture in the actual size you want to need it. A nice way to safe server space. But you can always change the size as well. Either do it via the percentages on the left hand. Or by adding different values. But make sure that you stick to the proportions.

Example: your image size is 640 x 480 … reducing it to 50% makes it: 320 x 240 … you can edit the picture also by adding the values to width and height.

CSS Class:  CSS (Cascading Style Sheets) – in this case it means nothing else that we have a full size image which is aligned left. (Remember the buttons from the basic settings?) But you can define much more via CSS.

Styles: If there is no border or space this part is blank.

Image Properties: We can add a border – be careful with the pixels in this case, a small border (like my pink one) is about 1 pixel (1 px) – you just can’t use fractions.

Vertical Space: space above and underneath the picture

Horizontal Space: space left and right of the picture.

marigin-bottom: underneath

margin-top: above

margin-left: left

margin-right: right

If you like, you don’t have to need the fields right of vertical-space or horizontal-space to add the margin, you can just type it in the field behind Styles.

My picture is left but right on top of my article.

So no need to add space for top and no need to add space for left.

Just 15px for some space on the right side and 15px for some space at the bottom.

Play with it. Sometimes 10px will be ok, if the picture is bigger than mine. Or add 20px for bottom space … you can influence the makeup of the article as well.

Don’t forget to click: Update!

See how beautiful the picture is integrated into our text? Lovely space around it.

I guess it feels comfortable.

 

16 Replies to “How to make your picture feel comfortable”

  1. Great post Helen. I need to do this I’m just to lazy! If you are looking for subject matter I would love to hear more about GASP. Michelle S commented about using it instead of Askimet but I’d love more info.

    1. thanks shawn

      have to figure out about gasp.
      on this blog – wordpress hosted – i have to use askimet since they don.t offer anything else.
      for my selfhosted sites i use “antispambee” … it is a german product and talks german to me … but very nice 🙂

      maybe we can make you to tweak pix and posts a bit 🙂

  2. Hi Helen

    A great way to show how to add your pictures on your blog, sometimes I have struggled with getting the right position it can be frustrating lol
    Thanks for sharing
    Pauline

  3. Hi Helen
    Great post on how to add your pictures to your blog, I know in the past I have had problems in this area, it can be so frustrating when you can’t get it in the correct position!
    Thanks for sharing
    Pauline

  4. Love this post, Helen. I’m glad you included the spacing bit, great tips for newbies!

      1. I love learning new tips/tricks for WordPress and PhotoShop, keep ’em coming I’m sure there helpful to loads of people. 🙂

        1. i.ll do my best! 😉
          have a whole tutorial on “How to write and formate text with wordpress” on my desktop – nice ebook 20 pages – but in german

  5. Excellent overview! One thing to add, if your picture falls in line with a Header or Bullet list, it’s usually easier to align it to the right rather than mess with getting the alignment just right.

    1. you should always think what kind of alignment it the best choice and also what margin you should use.
      i sometimes add more margin for bottom to force a nicer makeup!

  6. Hi Helen,
    Great mix of text and images to make your explanation clearer. I would second the GASP post as spam is forever getting through Akismet- fortunately I moderate my comments or spam would be all through the geniune comments on my posts.
    Cheers,
    Caylie

    1. thanks caylie

      i will do some research on gasp
      have to install it at one of my sites.

      i moderate my comments too.
      but i also check spam regularly and now and then i rescue a lost comment ;D

      hugs xxx

Comments are closed.