About the content element
The content element "Text/Media fancy" offers a more unusual display of text combined with media.
- The first medium is displayed across 100% of the width of the content element and media elements 2-4 are arranged in three columns below it.
- The text is displayed flush with the image(s) in the layout options "next to text right/left" and "in text right/left". If a caption is available, the flush alignment is based on this.
Use:
- Attractive presentation of marketing-relevant material in particular
- It is particularly visually appealing if the text portion is not quite so large.
- Captions can easily become distracting here. In this case, use the title field to provide some information about what can be seen in the image.
- The CE Gallery is more suitable for displaying people or events.
- Best presentation with layout "next to text right/left" and "in text right/left" on 100% page width.
- In grid elements of 66% or smaller, there should be no text next to the images.
- Not suitable for columns in grid elements of 33% or 25%
Lorem ipsum dolor sit
consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac
Step 1: Creating a Text&Media element Fancy
To create the element, click on the "+ content icon" in the editing area of the target page. Then select the "Text&Media Fancy" element under the "Typical page content" tab. The editing menu for the element then opens automatically.
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".
When integrating several images into the Text&Media element Fancy, the first image is always displayed larger than the following images.
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.
Step 4: Selecting the background color (optional)
To set a background color for the Text&Media Fancy 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.
Step 5: Selecting the background image (optional)
To set a background image for the Text&Media Fancy element, first go to the "Appearance" tab. There, click on "Add image" in the "Background image" area. 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".
You can then set various effects and filters for the background image in the "Background image options" area. For example, you can use the "Fade effect" to ensure that the text of the element is still clearly legible. You can also use the "Fade effect" to combine the background color and background image.
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.
Important: Please only use this option to highlight particularly important elements. Background images specifically draw the user's attention. Too much highlighting can have the opposite effect.
TYPO3 self-study
Exercise
- Create a CE "Text/Media fancy".
- Fill it with a text of approx. 90 words.
- For the first media element, take a video from vcm.uni-kl.de and embed it.
- Use an image for each of the second to fourth media elements.
- Please think of alternative text.
- Try out different settings for the height/aspect ratio of the images. This will allow you to control the height of the resulting media package. The second to fourth media elements should have the same height/aspect ratio.