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.

Anything else you would like to know about WordPress or formatting texts?

Give me a shout!
And join my newsletter today – your privacy will always be respected!

and like me on facebook

Single Post Navigation

← Older Entry

Newer Entry →