Images in an article's full text

How can I add more than the teaser image to an article and how can I place photos, charts or pictures within the text? It's easy. See how it's done.

Photos

Sometimes, you may want to enhance your article and place more than the teaser image, which will automatically be the lead image. This might be the case when the text is long and additional images could make reading less monotonous, or when charts, tables and additional photos would deepen our understanding of the text message.

How to create picture galleries describes how to include picture galleries. To add single images is even easier :

Step 1: Choosing pictures

Before you start, choose good pictures. Consider only high quality pictures which underline the meaning and message of the text. Don't use pictures for illustration purposes only. Moreover, make sure to obtain the the permission to use the image/s. Have you bought it/them? Have you commissioned it/them? If so, have you used the correct contract template? Has the contract with the copyright holder been filed in your documentation? Have you taken the photo/s yourself? If you are unsure whether you are allowed to distribute the picture on the internet for now and forever, read our Introduction into Creative Commons. Besides, our How-To find Creative Commons licensed images will help you to find suitable images.

Additional images don't have to meet the requirements for lead images which include an aspect ratio of 3:2 (width:height) for landscape photography or 2:3 for portrait format and a minimum pixel dimension of 630x420 pixels. However, be careful not to mix too many different sizes and formats and make sure your layout doesn't get too busy or disrupted.

Step 2: Uploading pictures

Open the article form and make sure that the Text format of your body editor is set to Filtered HTML. If so, click on Assets and Media under the body editor window below. You can upload your images one by one using the Add a new file field:

Step 3: Annotating images

Now provide the necessary information and fill in the following fields:

  • license: Under which license is the image distributed? If you don't know what this means please have a look at this article about Creative Commons licenses.
  • creator: Enter the creator's name here.
  • url: If you use a photo which has been distributed via an image hosting service such as Flickr you can link to the source URL here.
  • caption: Important! This text is shown below the image. Describe what and in particular who can be seen in the photo/image.
  • Alt-text for image and Image title are optional though it is recommended to fill them. The alternate text will be read out by screen readers for visually impaired users and should provide a short description of the image. The image title will be shown as a tooltip when hovering the picture with your mouse and will also be indexed by search engines.
Step 4: Embedding the image

Scroll up to the body editor window and click where you want to embed the image. Then scroll back down again and click on Insert into editor. The image will now appear at the desired position.

Take note: For placing images next to each other, you will  have to create a table. The images then have to be placed in the table columns. Tables can be either created as tables in the editor, or uploaded as images. To do so, make a screenshot of the table, save it and upload it as an image.

Step 5: Setting image properties

Right-click on the image in the body editor and choose image properties from the little context menu.

Width/Height: Please be careful when resizing your image as proportions easily get changed and the image will appear distorted.

Border: Adds a border around the image (not recommended as borders rarely look nice).

HSpace and VSpace specify the distance (in pixels) between the image and surrounding text.

Alignment: Specifies where the image is aligned.

 

Step 6: Preventing file names from being listed under the article text

In some cases, for instance when you want to provide an easy download for the press, you should leave the file names of your images listed under your article.

However, in most cases you might not want to do that. To prevent file names from being listed, untick the Display fields right to the file names in the Assets and Media section.

 

Step 7: Revision

Save your article. You can now see what it will look like. Please scroll through the text again and check whether your images have been correctly annotated and labelled, whether they look good and support the message of the text. If so, click on Edit and Publish the article.