Knowledgebase

How to change the position of images and other elements within articles in Drupal

In Drupal when you publish an article you can also include a picture in that article. By default, the image is displayed after the title of the article and before its body/text. We'll use as an example the article content type that comes prepackaged with Drupal, but this is valid for any content type that you create.

Log in to the admin panel of your Drupal application, click on the Structure tab in the top navigation bar, and on the page that opens click on Content types. On the following page click on the manage display button for the article content type (or for any other content type that you want to edit). This will display a table. In this table under the column Field there should be three default fields: Image, Body, Tags.

Exactly above the top right corner of the table there should be a button Show row weights; click on it and next to each field in the table you will see the value of its weight: -1, 0, 10 for image, body, and tags respectively. The weight determines the order in which the fields are displayed within the article. Smaller weights are displayed above larger ones, which means that in our example the image is displayed first (-1), the body after it (0), and finally the tags (10). So, for example, if you want the image to be shown after the text and not before it, you can switch their weight values, so that the one for the image is set to 0, and that for the body to -1. Don't forget to click on the Save button at the bottom of the page to save the changes.

Keep in mind that this will change the position of the elements within the article only in the default view. By default, articles are displayed on the frontend first only with a summary (or the beginning of the text) and the picture (if you have included one). This is also referred to as a teaser. The user has to click on the name of the article, the Read more link, or the picture in order to see the full article; this is the default view. If you want to change the position of the picture or any other element in the teaser view, on the same page where you changed the order in the default view you'll notice that there are two small buttons in the top right corner: Default and Teaser. Click on the Teaser button and change the weight values.

Was this answer helpful?

 Print this Article

Also Read