WordPress Tutorial – Where is the “Insert Image Into Post” Button – and How to Insert a Photo Gallery

This WordPress tutorial show two things:

  1. Where the “Insert Into Post” button is so that you can insert an image into a WordPress post or page.
  2. How to insert a gallery of images into a WordPress post or page.
Advertisements

How to Put Text On Top of An Image in WordPress

A reader asked if it’s possible to put text on top of an image in WordPress. Actually, the reader asked if it is possible to set an image behind text in WordPress, which is another way to put it.

Either way, the answer is yes! You can do it if you use the WordPress HTML editing window and a little bit of HTML and Cascading Style Sheets (CSS) code. You can watch the video tutorial for this below.

Here’s the code for this example. Paste this into your HTML editing window. Replace the image URL in the example with a URL for an image you want to use, and BOOM!

Text on top of image code. Right click to open or save the file.

This HTML and CSS code is basic stuff that works on any web page, not just a WordPress page or post.

You can increase or decrease the height, width and padding values to work with your image. You may need to change the color of the text so it’s readable over the image. This sample text is colored black using the CSS “color:black;” as shown above.

For more about background images and Cascading Style Sheets, see w3schools.com.

This is a Sample Headline

This is sample paragraph text on top of an image. You may need to change the color of the text so it’s readable over the image.

How to Put Text on Top of an Image – or Set an Image Behind Text

WordPress 2.5+ Tutorial – How to Position an Image and Wrap Text Around an Image

How to Wrap Text Around an Image

Want to Wrap Text Around an Image Using WordPress? Take the Plunge

This tutorial shows how to wrap text around an image using WordPress version 2.5 or later. It also shows how to insert an image and align it (position it to the left, right or center). In earlier versions of WordPress, you had to use the Code (HTML) editing window to insert a bit of HTML (using cascading style sheets) to get the text to wrap properly.

Wrapping text around an image has been improved in WordPress 2.5 or later. You no longer need to use HTML code. Instead, you can use the Add an Image dialog box to specify image alignment, and this does a good job of wrapping text.

If you have already inserted an image, and you decide you want to wrap text around it, you can use the Image Editing dialog box to set image alignment, which has the same nice effect on text wrap.


How to Position an Image and Wrap Text Around an Image Using WordPress 2.5+

WordPress 2.5+ Tutorial – How to Upload and Insert an Image Using WordPress

My Sample Caption for This Image

My Sample Caption for This Image

Related post: WordPress 2.5+ Tutorial – How to Position an Image and Wrap Text Around an Image

Inserting an image using WordPress version 2.5 or later is slightly different than inserting an image using WordPress version 2.3 or earlier. Versions 2.5 and 2.6 are essentially the same. Version 2.6 is the latest version as of July 2008.

Inserting an image that you have already uploaded to WordPress but haven’t used in a particular post or page is actually a bit confusing in version 2.5 or later. You need to be able to find the elusive “Insert into Post” button. It’s not obvious.

There are many other settings and features in the “Add media” tools in the WordPress editing interface. This tutorial covers only the most basic aspects of uploading and inserting an image.

So check it out.


How to Upload and Insert an Image Using WordPress 2.5+

WordPress Tutorial – How to Add Flickr Photo Widget to WordPress Theme Sidebar

This Intermediate-level WordPress Tutorial shows how to add Flickr Photo Widget to your WordPress blog’s sidebar so that you can display thumbnails of your Flickr photos. The Flickr Widget comes with WordPress 2.5+ on the WordPress.com hosting site. Your WordPress theme also must support Widgets. If you have questions about Widgets, send me a comment by clicking on the Comments link (or using the form) at the bottom of this post.

If you google something like “wordpress photo sidebar widget”, you will find many ways to display photos in your WordPress sidebar. If there’s one you already use that you like, let us know! The nice thing about using WordPress.com for your blog/website is that things like the Flickr Photo Widget are installed automatically – or Automattically, if you prefer (a little WordPress pun, there). Check out the Automattic website if you have a minute to learn more about what the creators of WordPress are up to.

Before you can add the Flickr Photo Widget, you need to first create a Flickr account at Flickr.com and upload photos to the account. If you need a tutorial on how to do that, send me a comment.

After you create your Flickr account, this tutorial shows you how to add the Flickr Widget to your WordPress sidebar and insert the RSS address to display Flickr thumbnail images in your sidebar. The thumbnail images link to the full-size image in your Flickr account. Pretty cool!

Does WordPress Version 2.5 Use Different Code to Wrap Text Around an Image?

A reader of the popular WordPress tutorial post “How to Position an Image and Wrap Text Around an Image Using WordPress” suggests that the code to wrap text around an image is different in WordPress version 2.5.

HERE’S AN UPDATE: Wrapping text around an image in WordPress version 2.5 or later is much easier than in earlier versions. You may not need to use any HTML code to make adjustments to alignment. Padding around the image is added automatically. See the tutorial “How to Position an Image and Wrap Text Around an Image Using WordPress 2.5 or Later” for more.

Still, the idea that WordPress uses different code to wrap text around an image doesn’t make sense to me. It’s possible that the improvements to text wrap are in version 2.6, not version 2.5.

I do notice that WordPress inserts some new CSS class information with the image, like “alignnone size-full”, but this does not effect the inline CSS I am using to position the image and wrap text around it. The text above wraps as it should around the right side of the image. I don’t see any difference. So hopefully our reader will tell me more about what he means by the “‘edit image’ extra space issue” in WordPress 2.5.


Just for the heck of it, here’s the text wrapping around the left side of the image.

What does everyone think of the new WordPress 2.5 admin panel organization and look-and-feel?

%d bloggers like this: