Text and media
The "Text and Media" element has a wide range of functions. Here you can create a simple text with headings, format them, add links to documents, images, other web pages or anchors on your own web page, embed videos, create tables and display individual images or even image galleries.
How do I create a text and media element with an image?
- Select the WEB → Page module.
- In the page tree, select the desired page where the text and media element should be located.
- In the center content area, click Create New Content Element.
- Navigate to the Typical Page Content tab and select Text & Media.
- Under Heading, you can optionally enter a heading.
- In the Text field, enter the desired text.
- In the Media tab, you can select an image via Add Image.
-
Clicking on the uploaded image opens the image metadata. Here, if the checkmark is set at "Set specific value", a title, an alternative text, a link or even a caption can be added.
-
- Do not forget to save!
To format the text, it must first be selected.
- Bold: Text bold
- Italic: Text italic
- Subscript: Text subscript
- Superscript: Text superscript
- quote:
quote
Paste options
Normal Paste, Plain Text Paste, Paste from Word (unfortunately these currently only work in Internet Explorer)
Note: You have the option to paste a copied text using CTRL + V. Since hidden "formatting elements" may be copied along with the text, it is imperative that you clean up the text after pasting it, since you do not have direct access to it. To do this, click on the Remove formatting icon.
Lists
- Numbering: Numbered list
- Enumeration: List with dots
Special Characters
- Insert special characters: Insert special characters such as letters from alphabets that are not available on all keyboards, mathematical characters, and arrows.
To create a link, first enter the text that should be linked (clickable in the frontend). Select this text and click Insert Link. The menu for inserting a new link opens. If you want to remove an existing link, select the text and click the Remove Link icon. You can create the following links:
- Page: Here you create links to pages within your TYPO3 page(s) which you can select via the displayed page tree. You can also create an anchor (jump mark) within a page. By clicking on the bordered arrow icon next to the page title in the page tree, all elements that are in the page will open for selection.
- External URL: Here you can link to any internet address. Under the item Target window New window should be selected, so that you don't lose the users on your page (clicking on the link in the frontend will open a new browser window). At last you need to click on the Set link button.
- Email: Here you can link to an email address. At last you have to click on the Set Link button.
- Media: Here you create links to files (documents or images to open/download), which you select via the displayed directory tree. Media must be uploaded to TYPO3 beforehand (details can be found in the corresponding chapter).
How to embed a video:
- Select the WEB à Page module.
- In the page tree, select the desired page where the video will be displayed.
- In the content area, click Create new content element.
- Select the Typical Page Content tab and there the Text & Media element.
- In the General tab of the RT Editor, paste the video URL or any text (it will not be output in the frontend) and select it.
- Click the Insert Link icon.
- Switch to the External URL tab and select oembed for Style,
- YouTube Video: add the URL again and click Set Link.
- uniTUBE Video: add the URL followed by the video ID and click Set Link. "https://unitube.uni-graz.at/play/345xc......"
- Don't forget to save!
If you would like your video uploaded to YouTube but do not have an account, please contact Communications & Public Relations.
If you want to embed videos from another platform, note which platforms support the oEmbed feature: https://oembed.com/providers.json
- In the Rich Text Editor, click the Insert Table icon.
- A drop-down for creating a new table will open. There you can select the number of rows and columns by clicking on the highlighted area. When the columns and rows are clicked, the table is immediately created in the editor.
- If you right click in the table, you can open the table properties and determine if you want to create the table with header cells above, left or above and left. With a click on OK the table is created.
- You only have to fill the table accordingly. Table headers and the heading can still be changed at any time by right-clicking Table Properties.
- Save the entries.
Note: You cannot define the column width. This automatically adjusts to the contents of the table. Fixed column widths could lead to problems in the Responsive display of the website. However, if you have copied a table that has a fixed column width, the system may automatically integrate a slider under the table and only parts of the table will be visible at first glance. If you want to change this, please contact the service desk.
To add an image to the text, switch from the General tab to the Media tab. Click on the button "Add media file" to select an already uploaded image file. The image can now be selected by clicking on the title. The image metadata will open in which you can now add a caption or link the image. You should enter the alternative text - a description of the image - for good accessibility when using images. In Typo3 there is the possibility to crop the image e.g. in a certain format or freely. The selected image can now be displayed on the website via the media adjustments, for example, reduced in size. To do this, enter the desired pixels either in height or in width. Whether the image should be displayed above the text on the right, next to the text on the left, or centered below the text can be determined by you in the gallery settings via the dropdown or via the icons. By activating the behavior "Enlarge on click", when the image is clicked, it will be maximally enlarged in the frontend of the web page.
Note: If you have enabled the " Enlarge on click" behavior and set a link to the image, the set link will be ignored.
If you want to add multiple images to your page, you can also add them using the Media tab via the "Upload media file" button. To do this, you can check the boxes on the right. When all the desired images are selected, you can click the Import Selection button. Thus all images will be linked into the element. Here also fill in the alternative text when using images. Under the added images you can now influence the display size of all images by setting the width or the height of all images equal. But you can also select under the gallery settings the number of columns in which the images should be displayed, then the images will be automatically reduced to the required column size. To create a gallery, you need to select the "Enable gallery" dropdown under the behavior. If there are several such galleries on the page, you can also set which groups of images will be displayed in the gallery. Now, in order not to have all images visible on the page, "Show first image only" (preview mode)" can be selected. This way, only the first image will be included in the website and the others will only appear when clicked on.
If you write an e-mail address in the body text, i.e. directly in the text editor, and link it as an e-mail, the e-mail address is converted to an (at) instead of the @ symbol on the web page for security reasons to prevent bots that crawl web pages from filtering out e-mail addresses and possibly spamming them. However, when the email address is clicked, it is automatically converted back to an @ by the email program. If an address is not converted, the address may not be properly linked as an email.
max.mustermann@uni-graz.at → max.mustermann(at)uni-graz.at
