About the content element
The Text&Media element is the most important content element. It is used to integrate texts and media on the web pages.
Usage:
- classic page content
- Texts with/without images
- Images/videos with/without text
- Gallery display possible for many media in several columns
- Best presentation with an image with layout "next to text right/left" and "in text right/left" on 100% page width.
- In grid elements of 66% or smaller, the text should be above/below the images. Layouts: top/bottom
Kafka
a text with picture in the text on the right
Someone must have slandered Josef K., because without him having done anything wrong, he was arrested one morning. "Like a dog!" he said, it was as if the shame should outlive him. When Gregor Samsa awoke one morning from troubled dreams, he found himself transformed into a monstrous vermin in his bed. And it was like a confirmation of their new dreams and good intentions when, at the end of their journey, their daughter was the first to rise and stretch her young body. "It's a strange contraption," the officer said to the explorer, surveying the familiar apparatus with a look of admiration.
Kafka once again
a text with pictures below and gallery option
LuckyBusiness
Someone must have slandered Josef K., because without him having done anything wrong, he was arrested one morning. "Like a dog!" he said, it was as if the shame should outlive him. When Gregor Samsa awoke one morning from troubled dreams, he found himself transformed into a monstrous vermin in his bed.
Step 2: Creating the content
First assign a heading under the "General" tab. Then define the type/layout of the heading. Now create the desired content of the Text&Media element at the bottom of the text editor.
Notes on the heading layout: The layout determines the size of the heading, with layout 1 being the largest and layout 6 the smallest. In Typo3, the "Standard" layout is preset by default; this corresponds to layout 2. If you select the "Hidden" layout, the heading is only visible in the backend and therefore remains hidden from site visitors. Use layout 1 only once per page, this improves the search engine ranking of your site!
Step 3: Adding an image (optional)
Integrating a media file
To integrate a media file, first go to the "Media" tab and then click on the "Add media file" button. You will then be redirected to the file list where you can select the desired image. Alternatively, you can also integrate a local file directly by clicking on "Select file and upload".
We recommend a pixel width of 1200px at 100% page width in the desktop view. And at least 750px at 50% page width in the desktop view. This ensures that the images are large enough for all possible views.
Please note that the media file is saved in the file list in the "user_upload" folder when the "Select file and upload" option is selected. This may make it more difficult for you and other editors to find this file in the file list.
Storing metadata
After embedding an image, please add the "Alternative text" and the "Image description" in the "Image metadata" section. This is primarily for accessibility purposes. If you have already entered these in the file list, they will be pre-filled automatically.
Image editing
In the Image editing area, you can set the aspect ratio of the image depending on the available screen size. This serves to optimize the image display for output on different end devices. To define the aspect ratio depending on the available screen size, click on "Open editor" and define aspect ratios for the corresponding screen sizes. The size "Extra Large" corresponds to a large PC monitor and "Very Small" to a smartphone display.
Tip: You can use the "Display module" to check the result. Alternatively, you can display the page, minimize your browser window and vary its size accordingly.
Note: The editor is only used to set aspect ratios. It does not offer any other image editing options.
Gallery settings
Under "Position and alignment" you determine where the image is positioned in relation to the text.
Under "Number of columns", you specify the number of columns available for the images. To display several images next to each other, the number of columns available must be >1. However, how many images can be displayed next to each other also depends on the corresponding image resolutions and the assigned height and width.
Step 4: Selecting the background color (optional)
To set a background color for the Text&Media element, first go to the "Appearance" tab. There, select the desired frame color in the "Background color" area.
Important: Please only use this option to highlight particularly important elements. Bright colors specifically draw the user's attention. Too much highlighting can have the opposite effect.
TYPO3 self-study
Exercise
- Create a text with a picture.
- Assign the heading "Winter"
- Add "Winter is the season that takes place between fall and spring. The winter months in the northern hemisphere are characterized by low temperatures. Sub-zero temperatures ensure ground frost and clear air. The weather is mainly characterized by lots of snowfall and freezing rain." as text.
- Select a white background as the appearance.
- Insert an image of your choice.