Real Estate Blog - WordPress: Image Alignment In Code View

Home : Blogs : Cheryl Johnson : CJ's Blog

WordPress: Image Alignment In Code View

This series could be titled A Regular TypePad User Dabbles In WordPress. As you read, please keep in mind that there are many, many people here who know much, much more about WordPress than I do.

However, curious about all the recent commotion over problems with inserting images in a WordPress post, I set up a test WordPress.com blog http://cheryljns.wordpress.com/ and started playing around.

First off, I found that simply using the Firefox browser instead of Internet Explorer resolved many of the image positioning issues.

But for those who, in Tina Turner's immortal words, "never, ever seem to do anything completely nice and easy", here is my "nice and rough" beginner's version of positioning images with the WordPress code view.

1. Write something.

2. Upload first image. Show: Full size Link to: None Click: Send to editor

3. Don't touch the image icon. Click on the Code tab.

4. In the HTML code, note the tag that starts with <img src ... that is the HTML code for inserting an image.

5. Edit just this one tag, by adding align="left" between the <img and the src. Hit Save and continue. After saving, WordPress will return to the Visual view. Click on the Code tab to return to the HTML code.

6. It looks to me that when using Internet Explorer as your browser, regardless of when your cursor is positioned, WordPress will add the image code at the top of the Code view window. But, go ahead and place the cursor at the very beginning of the top line of code.

7. While still in Code view, upload the next image. See how the code for that image is now the first thing at the top in the Code view window? It's easy to recognize anyway, it's the one without the align="left" that we just added between <img and src.

8. Drag the mouse over the code for that new, second image. Start at the first < and end at the >. Images won't work without their angle brackets. (But if you accidentally miss or delete an angle bracket, you can always type it back in.) Hit Edit -> Cut

9. Find the paragraph where you want to include the second image. Position your cursor at the left side of one of the lines of text in the paragraph. Hit Edit -> Paste. For this image, try adding align="right" between <img and src. Hit Save and continue.

(Analytical people will notice the screen shots were taken at different times with slightly different text, You're right, they were. <s>)

Question for WordPress people: Did the WordPress - Internet Explorer image positioning issues just start with the latest version of WordPress?

P S -- For anyone who does not know me. I'm actually not a rank beginner. I am a long time TypePad user. See: http://www.nelalive.net/ || http://www.taylorhotsheet.com/ || http://www.dablogmother.com/

I really don't have any business writing about WordPress. But after reading Mike Jones comments about WordPress multiple photo issues, I thought I'd experiment with Wordpress (just for the h#ll of it).

THIS ARTICLE IS ALSO AVAILABLE AT DABLOGMOTHER

Posted by Cheryl Johnson on 10/13/2007 06:25 AM

Comments (16)

cj, wordpress

Originally posted at: Random thoughts on art, technology, stuff, and occasionally Real Estate: WordPress: Image Alignment In Code View

Post is included in group: My other blog is
Post is included in group: WordPress Blog
Post is included in group: Typepad Users

16 Comments on WordPress: Image Alignment In Code View

OCT

2007

Cheryl - post like yours is what I found to be priceless about AR- where else people would take the time to provide this great information. Now, I was considering starting a second blog using Wordpress.org and suspected that it will be more then I want to deal with for the set up. I thought that posting would be as easy as on AR. From your post I am not sure any more. If to load a picture, I would have to change HTML code, that I don't know to begin with, should I not even think about using Wordpress.org? Thanks.

Thank you for the explanation. Unfortunately, I had a little flashback to Charlie Brown's teacher's voice during parts of it!

Faina -- What I have found so far in my few days of experimenting is that WordPress behaves just fine when you use Firefox as your browser. You won't need to tinker with the code. On the other hand, WordPress and Internet Explorer do not seem to play well together, and you probably will need to tweak the code when writing posts in IE.

If you are not too familiar with coding, you probably want to consider using WordPress.com instead of the .org version. The .org version is for when you want to install the program on your own server and run it yourself. Total control, total power ... but maybe not what you want if it's your first outside blog.

Also, do take a look at TypePad. It's not quite as popular as WordPress, but it's very customizable, and it's a little more forgiving of IE's eccentricities.

Here's a link to the TypePad group here on AR -- scroll towards the bottom of the list, I have some beginner posts http://activerain.com/groups/typepad

Here's a link to TypePad's home page http://www.typepad.com/

Jayne - :-)

Good job Cheryl, I don't really think it is an upgrade issue but more of image size issues using different themes. There are a lot of different themes out there for WP.org consisting of 2-3-4 column themes and when bloggers try and upload photos they are too big and don't fit into the holders in the software that make the pictures look nice.

One must look at the different sizes of the themes, like the sidebars, main content and if you use a 3 column theme then the third sidebar. Most WP themes are built to be viewed with 800 pixels wide by 600 pixels.

That would mean that your main content area plus your sidebar(s) plus any margins or padding will add up to a maximum of 800 pixels in width.

That's how it was explained to me by Mark Flanders of the Soundbite blog.

I hope this wasn't too wordy.

Jay -- That's fine! Not too wordy at all.

My own personal rule-of-thumb:

Nothing over 500 pixels wide for Active Rain

Nothing over 400 pixels wide for TypePad or WordPress (I tend to use 3 column layouts for all my outside blogs)

Cheryl, good explanation of the code.

As a note to Faina, knowing html code is important for WP.com as well. You'll need it for the widgets and other items on the sidebar. Plus, it's very useful for the actual post.

I don't know how one would do ANY blog without knowing html. It's even beneficial here on AR if you want to do anything special with our profiles or blog sidebars.

OCT

2007

Cheryl bad habits like using IE die hard. Jay M. and I have discussed a couple of problems on my blog and I know if I got into the habit of working in Firefox it would be easier.

OCT

2007

Using Firefox when working in WordPress makes all the difference in the world! Thanks Cheryl.

OCT

2007

Maureen M: Amazing difference, huh??!!!

Cheryl, Maureen. How do you do the firefox thing? Do you have to permanently switch your browser? Or can you alternate? I am so patheticaly geekless.

Ginger

Ginger -- You can switch back and forth. Firefox becomes just another program in your Start Menu list (Assuming you're on Windows)

I'm guessing you have a word processor program or a spreadsheet on your computer, and when you want to run that program you just click on its name in your Start Menu or its icon on your desktop?

Well, a second browser (or third or fourth) works the same way. It's just another program. You click on its name (or icon) when you want to run it. If you want to run IE instead, you click on its name or icon.

You can download Firefox here: http://www.mozilla.com/en-US/firefox/

Do you know how to install a program after you download it? Or do you need a hand there?

OCT

2007

Cheryl . Thanks so much for the info. I have installed a lot of software programs and never had a problem,,, I just follow the prompts. Is there something else I should know?? Hope I am doing it right!

Ginger: Then you should be fine! When Firefox asks it you want it to be your default browser, you might want to say "no", at least until you decide which one you prefer.

DEC

2007

tsysy

JAN

2008

Cheryl, your step by step instructions are wonderful. I have been playing with wordpress for the last few weeks and have to admit it's overwhelming. I've been trying to follow some of your advice, but think that I'm not quite techy to manage this on my own.

Just wanted to say thank you for sharing and all of your pointers!

FEB

2008

Very informative post. Thanks for that. How would you like to discuss business related topics on the all new <a href="http://www.businesss-forum.com">business</a> forum. So many members could gain knowledge from your business experiences and advice.

Please think it over.

Thanks,

Col :)

This blog does not allow anonymous comments