Regional University Computing Center Kaiserslautern-Landau

Text & Media Element

The Text & Media content element is used to display a text and link it to imagecontent.

 

Example text with image

Example element from the Typo3 frontend: A text with an image is displayed. In the image, which is above the text, three students are sitting at their laptops on the right. In the background you can see that they are in the atrium. In the text there is information about the study information day.
Example element from Typo3 frontend: text with image

A pixel width of 1200px at 100% page width in desktop view is recommended. And at least 750px at 50% page width in desktop view. This way the images are big enough for all possible views.

 

With the Text & Media element, as shown here or in the figure on the right, an image is linked to a text and output in an element.

Example image in the color yellow
Example image in the color yellow

Instruction

Example element from the Typo3 backend: Red boxes highlight the 1st procedural step. This figure shows how to select a content element with Text & Medium.
Example element from the Typo3 backend: Red boxes highlight the 1st procedural step.

1. click on the "plus content icon" in the editing area, now a menu opens, here you select "Text and media" in the "Typical page content" grid

 

Example element from the Typo3 backend: Red boxes highlight the 2nd to 5th steps of the procedure. The box associated with the 2nd step frames the field in which the heading text is to be typed. The box with number 3 indicates the layout to be chosen for the heading. The 4th frames the input field of a date and the 5th highlights the option of a link.
Example element from the Typo3 backend: Red boxes highlight the 2nd to 5th steps of the procedure.

2. now assign a heading

3. select the layout of the heading (type)

4. you can enter a date, which will be displayed above the headline

5. you can link the headline if you want now

6. fill the RTE (rich text editor) with text

 

Example element from Typo3 backend: Red box highlights the 6th step of the procedure. In it is highlighted where the text field of the RTE is.
Example element from the Typo3 backend: Red box highlights the 6th procedural step.

7. select a background color in the Appearance grid if necessary

Example element from the Typo3 backend: Red boxes highlight the 7th procedural step. The first box is placed on the Appearance tab. The second one points to the layout to be selected.
Example element from the Typo3 backend: Layout
Example element from the Typo3 backend: Red boxes highlight the 8th procedural step. The top box frames the Media tab. The ones below frame the "Add metadata" and "Select and upload data" buttons. The bottom box indicates the file that has already been uploaded.
Example element from the Typo3 backend: Red boxes highlight the 8th procedural step.

8. If you want, you can also add an image to your text in the "Media" tab. By clicking on "Add media files" a pop up of the file list will appear, here you can select images that have been previously uploaded to the file list (recommended). The second option is "Select and upload files" here you can upload images that are stored on your computer. Information on how to upload files to the file list and what advantages the "Add media files" variant has over simply selecting and uploading files can be found on our beginner's training page.

 

You are in the self-study and want to go to the training start page, then click on TYPO3 in the self-study for beginners part 1.

 

You are currently in self-training, then click Exercise - Text with image to continue.