Social Media, SEO & Your Business

by Mitch Mitchell




Using Your Website
As A Marketing Tool

by Mitch Mitchell



Embrace The Lead
by T. T. Mitchell




Keys To Leadership
by T. T. Mitchell




Free Download; right-click on book

T. T. Mitchell Consulting, Inc

Promote Your Page Too




Follow Me On Twitter;
Click The Bird!



Listed on BlogShares



«
»


Formatting Your Images On Your WordPress Blog

Posted by Mitch Mitchell on Aug 7, 2010

I’ve seen this often enough, and I decided it was time to say something about it.

When you add images to your WordPress blog, do they show up like this:

Notice, it’s sitting out there in its own netherland, not quite falling into place with the rest of my text? That has to be somewhat irritating, because it takes up space and, well, it just doesn’t look all that good. No matter the size of the image, having it pop out like this makes it seem like it’s not a part of the post. WordPress seems to do this as a default for many blogs. There are certain themes that will render the images properly, but for the most part I don’t see that happening with a lot of people.

You’ll notice that when I post images, they’re part of my content. it wraps around the image, and is under some kind of control. It’s integrated into things, and I can move it left, right, or in the center if I so chose, although I’ve never wanted to have an image in the middle as far as I can remember.

How do I do it? I add a little bit of HTML code to my posts, and whether or not you like doing it or understand it, I think by showing you what I do that you might like how it looks in your blog posts. And then if you can’t remember it, or even if you do, all you have to do is remember to go back to posts where you’ve used the code, copy and paste it into your new post, and then just change the image link. Having said that, I decided it was easier to show it to you as an image, and this time it’s intentionally in the middle so you can see the code without it disappearing:

As you can see, at least I hope as you can see, it’s not difficult code, but it’ll wrap your text around your image and thus blend things in better; at least that’s how I see it. I hope it’s a helpful tip; any questions, just ask.

Seiko Wrist Watches-Seiko 5 SUAG28K Automatic Rolex Style Ladies Gold Tone Black Dial

Seiko Automatic Rolex Style Ladies Gold Tone Black Dial


Copyright secured by Digiprove © 2010 Mitch Mitchell

Tags: , , ,

30 Comments »

Val:

Yeah, good idea. But surely it depends on the size of the image relative to the width of the text posting area?(I mean on the reading page, not the posting page). And don’t you need a height size as well as width?

Curious, I was thinking about this just a few days ago, about formatting images to make text wrap round them. I can do it in Word quite easily and then when I think about doing it in a post, my mind has just sort of gone blank!

Mitch Reply:
August 7th, 2010 at 3:33 PM

Actually Val, that’s the reason the width number can be adjusted, so you can fit it within the space for your content however you want to see it. Most of the time I set the width between 200 and 250 for this blog. And no, you don’t have to adjust the height as well unless you don’t mind throwing off the set way your image already looks; it automatically adjusts everything else.

August 7th, 2010 | 1:18 PM
Brian P:

Hey this is def a great info for people that want to understand how the sizes work. It is important to have basic knowledge when working with your blog. Helpful stuff for beginners.

Mitch Reply:
August 7th, 2010 at 4:05 PM

Thanks Brian; always trying to find something new to give back to the community.

August 7th, 2010 | 3:45 PM
Kissie:

Okay, I’ll try this when “editing” won’t work for me.

Will let you know if I have any problems and thanks for making it simple enough that even I understand it! ;-)

Mitch Reply:
August 8th, 2010 at 12:22 AM

No problem Kissie. I do try to make things easier. lol

August 7th, 2010 | 10:48 PM
Sire:

Hey Mitch, did you know you could do it without all that hassle? All you have to do is click on the image while in ‘visual editor’, a little icon pops on the left that says edit. Once that opens it comes up with all these settings including alignment, shrinking the image and stuff.

Mitch Reply:
August 8th, 2010 at 1:16 AM

It doesn’t work in all themes, Sire. I won’t work in this one, which is why I have to write code for it. Seems to work on one of the blogs I write for, however.

Sire Reply:
August 8th, 2010 at 1:44 AM

That’s weird. I would have thought that the theme wouldn’t affect it seeing as how it’s in the admin section. Just goes to show one shouldn’t assume these things.

Mitch Reply:
August 8th, 2010 at 1:51 AM

I would never have known if I hadn’t started writing for other blogs. Themes seem to control a lot more than one might think in how they render stuff.

August 8th, 2010 | 1:04 AM
Moondancer:

Hello Mitch,

Thanks for sharing this helpful tip. I used to do that too. With my blogs, at times I do want an image to be set apart. Those pictures are dead center. :) For example, my posts about the foods I make, taking pictures of the garden. However most of the times I just align to the left or right.

For the past three years, I’ve been an offline blog editor, MarsEdit. It does all that stuff for myself, which is very cool!

Mitch Reply:
August 8th, 2010 at 8:32 AM

At least you had something to help you, Moondancer. If I didn’t know coding I probably would have gone looking for something myself.

August 8th, 2010 | 7:38 AM
Todd Morris:

lol Mitch, you are “old school” (although I admit that sometimes that still works best).

You could pretty much the same thing with CSS. Either inline with something like:

Or even better, add a couple of lines to style.css, and just use something like id=”left” in your tags.

Is there a reason that you prefer tables over the css option?

Todd Morris Reply:
August 8th, 2010 at 12:20 PM

woops … code didn’t show up :-)

Mitch Reply:
August 8th, 2010 at 12:46 PM

Yeah, that’s why the code I’m showing is in an image, because it kept erasing itself. I move images around and change sizes here and there, like if you remember my post on Cuban cars, so I’d have to change things up anyway. And I like tables more than CSS in these instances because the formatting will stay right where it is across the board, no matter what browser someone’s using. I only use CSS for global things such as making sure all my webpages are the same color and the like.

August 8th, 2010 | 12:18 PM
Creativity @ Arabian Princesses:

Hey Mitch, I’m so glad to have found your post. It will come into good use especially since I use WordPress. Thanks again for your tips on how to change the blog width, etc. Always learning something new…I’ll look out for some of your other posts. Thanks again!

Mitch Reply:
August 8th, 2010 at 10:10 PM

I’m glad you got something useful out of the post.

Creativity Reply:
August 21st, 2010 at 1:39 AM

Thanks for contacting me Mitch, and I’ll check out the site you suggested. Thanks for your help!

August 8th, 2010 | 6:20 PM
Rose:

Good idea. I use to format my images, but I can’t be bother anymore. I know it looks better. Now you’ve got me considering it. lol

Mitch Reply:
August 8th, 2010 at 10:11 PM

Hey, that’s the idea Rose, making people think. I just don’t like images taking up so much real estate if they don’t have to.

August 8th, 2010 | 8:56 PM
Carl:

Cell spacing – vertical and horizontal is very useful. Usually I try to fit the image to be exact size and I do this in Photoshop.I am not using any fancy image galleries as my blogs are strictly business blogs and number of photographs is low.

Mitch Reply:
August 9th, 2010 at 8:46 AM

I don’t have Photoshop, so I have to go another route. There will be a post coming up about it this week.

August 9th, 2010 | 7:15 AM
John Dilbeck:

Good morning, Mitch,

You don’t have to have Photoshop to do most of the image editing that you’d want. You can do it for free at sites like picnik.com.

Very handy site.

I have a half-dozen image editing programs and they all have positives and negatives. I finally found one that works the way I like to work, so I don’t think I’ll be updating the others.

With picnik.com, you don’t have to worry about updates, either.

You may already know about it, but, if not, you may want to check it out one day.

All the best,

JD

Mitch Reply:
August 14th, 2010 at 10:10 AM

John, I went to that site and that’s not quite what I was looking for. I mean creating images, kind of like those you see with the “fake” round people that are usually white and mixed with other colors of fake round people. Weird description, but I see those shots on so many pages that I’ve assumed people are creating them in some fashion.

John Dilbeck Reply:
August 14th, 2010 at 6:11 PM

Yes, you can do all of that stuff, but it also offers a full set of tools for resizing images and correcting color balance and the like.

Most of what people use Photoshop or Paint Shop Pro can be done there.

Just start with any photo or graphic and edit it as you like.

It may not be what you’re looking for, but it is great for resizing images and doing minor rotations to get the horizon horizontal.

JD

Mitch Reply:
August 14th, 2010 at 6:23 PM

John, I just want to make sure we’re on the same page; this is an example of what I’m talking about:
http://www.openmoves.com/blog/wp-content/uploads/2009/10/blogging-man.jpg

John Dilbeck Reply:
August 17th, 2010 at 8:40 PM

Good evening, Mitch.

Not on the same page; maybe not the same book! (grin)

The site I’m talking about is:

http://www.picnik.com/

It’s just a really good photo editing site.

Also has a great collection of fonts for notating or adding to photos.

Doesn’t have to be a photo, as long as it’s a jpg, gif, png, and probably some others.

Are we back on track?

All the best,

JD

Mitch Reply:
August 17th, 2010 at 11:21 PM

Hi John,

I knew the site you were talking about; I’d already visited it. What I’m looking for it a way to possibly create images like the one I sent you.

John Dilbeck Reply:
August 19th, 2010 at 3:47 PM

Sorry, Mitch.

I misread what you were saying. I thought you were not interested in figures like that and wanted to resize and crop photos.

I used to know a source for those and I’m trying to remember where it was.

I thought it was poser, but nope.

I found this gallery of CG People:

http://www.ayzek.org/category/portfolio/cgpeople/

Maybe one of the artists there could steer you towards what you want.

Sorry I couldn’t be any more help.

JD

Mitch Reply:
August 19th, 2010 at 9:38 PM

No problem John; at least you tried. :-)

August 14th, 2010 | 3:15 AM