Images with/without text
In this page
In addition to the operating instructions for the image function, you will find many examples of how images and text can be arranged together.
Image "in the text on the right"
The image is aligned "in the text on the right". The heading is positioned above the combined text/image element.
Normally, the image is then surrounded by the text on the left. However, there is a special feature here: if there is not enough space next to the image (e.g. in the side column or on smartphone screens), the image is automatically displayed above the text! The side-by-side display therefore only takes place if there is sufficient available width.
Images with/without text
If images are to be inserted, this can be done either on their own or together with surrounding text. Several images can also be embedded at the same time and arranged next to and/or on top of each other in an invisible grid.
In any case, the images to be used must be available as graphic files so that they can be placed on the website. In preparation, you should have already uploaded these files (e.g. JPG images) to the TYPO3 file directory, see Manage images and downloads.
Inserting graphics into a website
To use images "correctly" in TYPO3, use the [Media] tab in a content element of the type "Text & Media" (Fig. 1).
Under [Media], select the desired image files from the TYPO3 file list (Fig. 2 → marker 1) and then click on the grey bar of an image (Fig. 2 → marker 2) to edit further characteristics for this image:
Features that are set per image
After the bar for the image has been expanded:
- Title: Displayed when you hold the mouse over the image without clicking
- Link: When clicking on the image, the link target set here is called up if necessary
- Alternative text: Short description of the image content (important e.g. for blind people!)
- Description (caption): This text, if available, is displayed below the image.
- Editor: Behind this button (Fig. 2 → marker 3) is the option to crop the respective image, i.e. to select an image section. A section can be freely selected or a predefined proportion (height-width ratio) can be used.
All these values can already be assigned as "default" when uploading the image in the file list and are then automatically used here. However, if you set your own values here, they will overwrite the default values set when uploading.
Media customisations - common settings for all images
Below the image selection, the "Media adjustments" are now set, which apply equally to all images selected above:
- the pixel size within the page (Fig. 3 → marker 1; please be sure to only fill in one of the fields "Width of each element" and "Height of each element" - the other will result by itself through proportional resizing!) as well as any framing of the images (Fig. 3 → marker 2)
- the"position and alignment" in relation to the surrounding text (Fig. 3 → marker 3)
- the column layout, i.e. if there are several images: in how many columns next to each other the images should be displayed (Fig. 3 → marker 4)
- Enlargement: Should an enlarged version be displayed as a "lightbox" when clicking on the images? (Fig. 3 → marker 5)
- Download: Should a download link for the image file in undiminished size be offered in the caption? (Fig. 3 → marker 6)
Place captions in the image instead of below it
Captions in the image - with large font
The caption is normally displayed in a smaller font below the image. However, it can also be placed as a prominent caption in the image instead.
To do this, select the "Caption in image / bold" layout in the "Appearance" tab in the elementproperties of the Text&Media element. You will then get this look:
Show copyright information
Is it necessary to mention the copyright or not?
Make copyright visible
- Assign copyright information:
In the file list, click on the pencil icon displayed next to a graphic file and then fill in the "Copyright" field in the [Metadata] tab accordingly.- In the content element where the image is integrated, this value can be overwritten individually (also by an empty content to display no copyright for this image, although one is specified in the file list).
- Show copyright in the website:
In the [Media] tab of the Text&Media element, activate the "Show copyright information" switch at the bottom right.
And this is what it looks like (the copyright is slightly greyed out and can therefore be distinguished from the normal caption):
Place graphics expanded
If several images(e.g. logos) are to appear next to each other and are to be distributed as loosely and harmoniously as possible across the available width, the CSS class gallery-widened can be assigned to the relevant content element in the [Advanced] tab. The images are then both horizontally expanded and vertically centred.
Important: The total width of the images must not completely fill the available width on the page from the outset, i.e. it must remain smaller so that there is still room to expand the display. If necessary, you can reduce the numerical value in the "Width of each element" field in the [Media] tab in order to reduce the size of the graphics and thus create additional "space".
Here is an example with three graphics whose "Width of each element" has been set to 180px, the "Number of columns" to 3 and the "Position" to Bottom centre:
A special type of image-text presentation: flip cards
Flip cards are like postcards - they have a picture motif on the front and text on the back.
This tool can be useful for presenting special objects. However, it is important to note that the associated text is hidden behind the image, so to speak. Therefore, flip cards are only suitable for special forms of presentation and should never be used for "anything and everything"!
How a flip card is created
A flip card is a text & media element (consisting of an image and the corresponding text) for which the CSS class flip card has been entered in the [Advanced] tab. The text is then automatically displayed centred on the "back" of the image.
Important: Make absolutely sure that the text is not too long and therefore fits completely on the "back" of the image!
Example: Flip card (2s)
The Ossietzky Memorial
The memorial is located in front of the lecture theatre centre and commemorates the university's namesake, Nobel Peace Prize winner Carl von Ossietzky.
Picture "in the text on the left"
The image is aligned "in the text on the left". The image and body text are aligned flush at the top. Long text may flow around the image.
Please note: If there is not enough space next to the image (e.g. in the side column or on smartphone screens), the image is automatically displayed above the text!
Image "left in text" and vertically "centred"
The image is aligned "in the text on the left". In addition, the CSS class centred has been assigned for vertical centring, whereby the text is placed vertically centred in relation to the image.
Image "next to the text on the left", "centred"
The image is aligned "next to the text on the left" (incl. heading!), the element also has the CSS class centred.