hide me

Formatting Images with WordPress

Formatting Images with WordPress

Most likely, the first thing you’ll need to do with your WordPress powered site, once it’s been set up, is to add content and images. We’ll get into content later, but first I’ll show you how to add images, since the process is less familiar. Mainly because we are not going to use the image button.

WordPress powered site


Upload an ImageTo put a picture on a page, we first have to upload the picture to the website. So below your editor, look for the Upload section. It’s Important to fill out the Title field, this information will be used by search engines to “understand” your image, and it will show up as a ‘tooltip’ for visitors, when they hover over your image. The description Field will not show up unless the visitors click on your image (more on that in a bit), so it’s not necessary for every image.

Inserting the Image

Send to OptionsOnce you click Upload, the image is on your server and ready to use. The Upload section will now show you the image you’ve uploaded, along with some options. The most common use will be a thumbnail, linked to a page. Those are the options I used to insert the image at the left. Click on the image for an explanation of the other options. Once you’ve chosen your option, you can click Send to Editor, and the image will be inserted into your page, wherever your cursor was last.

Wrapping Text around the Image

If you’ve inserted a small picture, or a thumbnail, you’ll probably want your content to flow around the image. You’ll need to select the image in the editor (by clicking on it, white ‘handles’ will show up to let you know it’s selected). With the image selected, click the Align Left (or right, see below) button. If you have the TinyMCE Advanced plugin installed, you can use the Style dropdown to give the image some additional padding by choosing the left or right class, accordingly. The special classes available in sites designed by Blueprint Studio are derived from Scott’s list of special classes (the center class will place an image centered on its own line). I will explain the rest of the special classes when we discuss content formatting.

Image Alignment Buttons

  • Theloop
  • The BPDS newsletter