Aligning image and video code in blog posts

Earlier in the month I did a series of posts about preparing and adding images to your blog posts. I think the only thing that I failed to discuss in much depth was the tags that you can put around your image or even embedded video code.

WordPress has to modes – Visual (Rich text) and Code (plain text). You can add images to your posts while in either mode. However, you should only add embedded video code or even javascript code (say for a blogroll) while in code or plain text mode as it messes up the code when in rich text mode.

For the purpose of this discussion I’m going to discuss the coding that you can added around embedded images, video and other code while in plain text mode. I will just say that it’s easy to center or move an image to the left or right while in visual or rich text mode simply by clicking on the alignment icons near the top of your wordpress post writing area.

To center an image in your post you can use this code (removes spaces):

< p align=”center” > image code < /p>

and to have a photo to the left or right of a paragraph have the paragraph tags around the particular paragraph that you’re sticking the image in:

ie < p >text of paragraph < /p>

with your image code beside the first paragraph tag

< p > < image code > text < /p>

Unfortunately you need to do a little bit more to the image code to make the text of the post wrap around the image. With the code that I’ve listed above the image will still be higher than the text. However, if you want to have the text wrap to the right or left of the image simple include:

align=”left” or “right” near the img tag like this:

< p > < img align=”left” rest of image code ….> < /p>

To illustrate the full code, in order to place this thumbnail image to right of this text, and have the text wrap evenly around it I had to use the following code. Remember, you must remove the spaces for this code to work on your site. I’ve only put spaces between the code here so that I could actually demonstrate the code:

< p > < img align=”right” src=’https://thewebfiles.com/wp-content/uploads/2007/04/radia_phone.thumbnail.jpg’ alt=’radia_phone.jpg’ / > < /p>