Styling Images in WordPress

26 07 2009

After setting up my own WordPress theme it appeared that images included in posts could not be configured to have the text wrapped around. codex.wordpress.com suggested that one has to add some .css to the theme:

Current versions of WordPress now have image alignment built-in. WordPress adds CSS classes to align the image to the right, left, and center of a paragraph, so the text will wrap around the image.

In order to take advantage of these new CSS classes for image alignment and the text wrapping around the image, the WordPress Theme must include the following in the style.css found in the WordPress Theme directory.

It is not mentioned that the following lines have to be included in the rtl.css too.

img.alignright {
float:right; margin:0 0 1em 1em
}

img.alignleft {
float:left; margin:0 1em 1em 0}

img.aligncenter {
display: block; margin-left: auto; margin-right: auto}

a img.alignright {
float:right; margin:0 0 1em 1em}

a img.alignleft {
float:left; margin:0 1em 1em 0}

a img.aligncenter {
display: block; margin-left: auto; margin-right: auto}

When adding the image in your WordPress blog, select the image alignment as right, left, or center in the Image/Media Panel.

The image will be embedded into your blog post with the selected style for alignment such as:

<img src="http://example.com/images/leaf.jpg"
alt="leaf graphic"
title="leaf graphic"
class="alignright size-medium wp-image-3109"
height="25" width="30"/>

For more information on styling images in WordPress, see Wrapping Text Around Images.

Advertisement

Actions

Information

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s




Follow

Get every new post delivered to your Inbox.