Images

General information

For legal reasons, image credits should always be provided when uploading pictures. They are saved directly with the image.

Please note that pages with multiple images will take a little longer to display shortly after creation (possibly several seconds), because the images are automatically converted into different sizes for a responsive design. This only happens when the page is loaded for the first time (and if image sizes change).

Please always make sure that the resolution of the images is high enough (approx. 1000 pixels wide). If the images are too small, they are usually not scaled up and therefore may appear smaller than intended in the layout.

A 'collection' must be specified for each image. For many pages a collection is already predefined. These collections serve to sort or group images. Each editor may select images from each collection. However, you may only upload images to collections or edit their images if you have the permission for the corresponding collection.

Insert images

There are two ways to include images on a page:

1. Insert image block
2. Insert image directly in the RichtText editor

1. Insert image using an image block

This option offers the most possibilities, is flexible and allows the image and caption to be adjusted afterwards. It is therefore the preferable option.

• Go to the Wagtail Admin Interface to edit a page.
• Scroll to the area where text and image blocks and other content can be added. The structure of the page in the Admin Interface depends on the page type. However, most pages have at least one 'Streamfield' area with blocks.
• Click on 'Image' to add an image block.
• Click 'Select Image' and select an existing image or upload a new one. If you are uploading a new image, please include an image credit and, if possible, a caption.
• Size:
  • For images, predefined image sizes and aspect ratios are provided to ensure that the pages look as uniform as possible. The image widths are chosen to be a fraction of the page width, so that several images can be arranged next to each other. The following information refers to the width available for the content in a large browser window (from 1200 pixels width). In smaller views, the images shrink, but can also take up more space so that they remain visible.
    • Extra small: 1/4 of the (page) width
    • Small: 1/3
    • Medium: 1/2
    • Large: 2/3
    • full width: 100%
  • The images are scaled down by Wagtail to the required sizes and cropped according to the aspect ratio, which may take a while when the page is loaded for the first time.
• Position:
  • Choose left, right or centred. Images that are arranged left or right are float elements, i.e. if there is enough space, subsequent blocks can flow around them. The floating can be interrupted with a 'break' block.
• Aspect ratio:
  • The images are cropped by Wagtail to the desired size and aspect ratio. The preferred aspect ratio is 1:1, but as this does not work for all images, you can choose portrait or landscape instead. If you use the 'Original' option, the aspect ratio is not changed, so the image will not be cropped. This is e.g. useful for diagrams.
• Caption:
  • The caption can be saved in English and German when an image is uploaded. However, this standard caption can be overwritten in the corresponding fields in the image block.
  • Captions are only displayed if the checkbox 'Show caption' is checked.

2. Insert image in RichText Editor

Alternatively, images can be inserted directly into the text block instead of using an image block. In this case, however, their size and position can only be adjusted to a limited extent and the image cannot be changed afterwards. It is also not possible to define captions and credits directly with the image and to place them with the image. Therefore, we recommend the integration of images using an image block.

Arranging images (image block)

You can place multiple images in a row by selecting the appropriate image size and positioning all images next to each other. However, the image row only works for large browser windows. For smaller browser windows or in the mobile view, the images are partly arranged below another - depending on the selected size. Place a 'break' block before and after the image row, so that previous and subsequent elements do not flow into the image row, even if there is still space left or right (e.g. in mobile view).

2 pictures: picture size: medium

• Option 1: both pictures with position: left
• Option 2: 1st picture: position: left, 2nd picture: position: right.

3 pictures: picture size: small

• Option 1: all pictures with position: left
• Option 2: 1st image: position: left, 2nd image: position: right, 3rd image: position: centred;
  The 3rd image then slides between the first two images in desktop view and appears below the first two images on mobile devices. The page width is used to its full extent.

4 images: Image size: extra small

• all pictures with position: left

Add or edit image credits

The image credits are saved directly with the picture when it is uploaded, i.e. when uploading a picture the field 'Credits' should always be filled in. If the AIP or its employees hold the image rights, it is also sufficient to enter "AIP" or for example "AIP/R. Arlt".

If the picture credits require an English translation, please indicate this in the field 'Credits (EN)'. If you leave this field blank, the text that was entered under 'Credits' will appear on both, the German and English pages.

In order to edit credits on an image later on, you must edit the image object itself:

• Click on 'Edit Image' in the edit mode of a page or find the image in the 'Images' menu of the Wagtail Admin Interface.
• Adjust the text in 'Credits' and/or 'Credits (EN)'.
• Confirm your changes by clicking the 'Save' button at the bottom of the dialogue box.

Please note that image credits will only be displayed if the 'Show credits' checkbox in the image block of the page is checked. There are no credits shown for images that are directly embedded in the RichText Editor.

Add or edit caption

There are two ways to do this:

• Save the caption directly with the image; this caption can then be automatically displayed with this image anywhere on the web page.
  This works in the same way as the caption in the upper section.
• Define the caption on the page where the image is embedded, in the image block.
  The caption on the page in the image block has priority, i.e. the caption of the image itself can be overwritten.

The caption is always given as German and English text, as with other text elements.

Please note that captions are only displayed if the checkbox 'Show caption' in the image block of the page is checked. No caption is displayed for images that are directly integrated in the RichText Editor.