WordPress, however user-friendly it often appears to be, is a minefield of technical tricks, which, once you know, are easy and manageable, however without them, can make uploading blog articles a rather daunting and long-winded task.

WordPress offers different ways to illustrate posts and pages. All options are detailed in WordPress documentation. Here are some tips and advices for beginners.

Featured Image is the representative image for your post or page. The display of this image on the homepage and in the post/page is up to the theme. With some WordPress themes,  the featured image of a post is only visible on the homepage of the blog; with other themes, this image is also the main picture of the post. To add the Featured image, click on the “Set featured image” link in the text editor.

ImagesInWordPress-P3-01-Featured-imageInserting other images in a blog post is really simple. First, insert the cursor in the place in the text where you want the image to appear. Even if you want the picture to appear on the right, always place the cursor at the beginning of the paragraph, on the left margin (you will use the WordPress alignments settings to align the image, see below). Then click the Add Media button. Here, you can upload pictures in the Media Library or select a file already stored in the Media Library.

If you use a version 3.9 of WordPress or higher, you can also directly drag and drop a file from a desktop folder of your computer to the WordPress visual editor (without clicking the Add Media button).

ImagesInWordPress-P3-02-Insert-media

Amongst interesting options, the Alt Text is displayed when the image can’t be displayed or viewed for some reason  (a slow connection for example). It is also important because it helps search engines (Google, Bing…) understand what an image is about. The Alt attribute should briefly describe the image; it must be empty for purely decorative images (more information can be found here and here).

The Caption will be displayed below the image. The WordPress theme of your blog/website defines the appearance of the caption:

ImagesInWordPress-P3-03-Caption

Note that you can add a hyperlink in the caption. Here is an example of a caption with hyperlink:

The <a title=”More about Netherlands on Wikipedia” href=”https://en.wikipedia.org/wiki/Netherlands” target=”_blank”>Netherlands</a> are the world’s main producer of commercial tulip plants.

ImagesInWordPress-P3-04-Link-in-captionIf necessary, you can write a Title for an image file. The title will be displayed by your web browser as a tooltip when you hover the mouse mouse over the image…

ImagesInWordPress-P3-05-Tooltip…and in a WordPress blog as the title in the “Attachment Page” of this media (if you select “Link To”, “Attachment Page” in the settings of the picture, and if the user clicks on this image):

ImagesInWordPress-P3-06-Attachment

Another important thing when inserting an image in a blog post: select a Size in the Attachment Display Settings (you can modify image sizes for Thumbnail, Medium and Large Size in the back office of WordPress: Settings, Media).

ImagesInWordPress-P3-07-Attachment Display Settings

To resize the picture in the visual editor, with older versions of WordPress, press the Shift key of the keyboard while dragging the handles of the picture to keep aspect ratio (it is no longer necessary with recent versions).

Use the Alignment options to select how the picture will appear.

ImagesInWordPress-P3-08-Alignment

You can select the alignment when inserting the picture, or later in the visual editor, for instance by clicking on the picture in recent versions of WordPress.

ImagesInWordPress-P3-09-Alignment

Another important setting: the Link To option lets you specify what to do when the user clicks on the image. If you select Custom URL, you can copy and paste any URL on the internet. This URL must begin by http://, for example http://www.fotolia.com. If you want the user to open the link in a new tab/window of his/her web browser, in the visual editor, click on the image to select it then click on the Edit icon, click on Advanced Options, then check the box “Open link in a new window/tab”.

ImagesInWordPress-P3-10-LinkTo

  • If you don’t see the “Set featured image” link in text editor, click on “Screen Options” at the top of the screen and check the box “Featured image”.
  • You can manage your media files (images, videos, audio files…) in the WordPress back office. Select Media, Library, on the left pane.
  • After editing a photograph in Photoshop or GIMP or any another editor, “Save as” the file in Jpeg format before uploading it in WordPress.

We hope this helps! Stay tuned for our next post further exploring displaying images in Word Press!