--- title: Single and multiple media description url: "https://www.toujou.com/service/element-library/media-elements/single-and-multiple-media-description/" date: 2019-06-14 modified: 2022-09-27 --- # Single and multiple media description 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Element library](https://www.toujou.de/service/element-library/) 4. [Media elements](https://www.toujou.de/service/element-library/media-elements/) 5. [Single and multiple media description](https://www.toujou.de/service/element-library/media-elements/single-and-multiple-media-description/) Single and multiple media elements ================================== One single medium or up to four media in a row centered on the page. Item-ID: 05-001 | 05-005 | 05-008 | 05-009 [Sample views](#c1006006) [Step by step guide](#c1006010) [Screen adaptation](#c1006012) ![](https://www.toujou.de/_assets/processed/QifzE9m1ADOAcAGVORBYvHx9L2TWsNH9Cdv0d4NnBIE/q:85/w:433/h:54/fn:Y3NtXzA1X21lZGlhX3NpbmdsZV9tdWx0aXBsZV82MzhjZGQyMDA3:t/cb:c33ceaa88854ce4b5018210cee0451d4be65df74/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA1X01lZGlhX2VsZW1lbnRzLzA1X21lZGlhX3NpbmdsZV9tdWx0aXBsZS5wbmc) --- Sample view single -------------------- ![](https://www.toujou.de/_assets/processed/Oc0fWW7Vjtsz9HsPs4IHgFwwEXrABMsNI3FuIAIEr88/q:85/w:433/h:204/fn:Y3NtX25hdHVyZV8wMl9iNzc0MTQwNzhi:t/cb:c280ff572f1a66b5eb140eea932e106cb4525732/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9uYXR1cmVfMDIuanBn) Sample view multiple ---------------------- ![](https://www.toujou.de/_assets/processed/P9QP0XcuIk1fCUsd_-LaZBPhvAqiT6va6znCgNxWifs/q:85/w:294/h:165/fn:Y3NtX25hdHVyZV8wMV83MjI4NTNhOTJi:t/cb:cb634793507b1ed08c3736bfdedcda03741907fa/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9uYXR1cmVfMDEuanBn) To display third-party HTML content, we need your consent. For more information, please see our [ privacy policy. ](https://www.toujou.de/privacy-statement/) Allow once Always allow ![](https://www.toujou.de/_assets/processed/AYht33YO-9H1SxqKnD2Dm_hEcd4gAl2nsHxrO6xtmhk/q:85/c:1626:914.09638554217:fp:0.5:0.57530120481928/rt:force/w:294/h:165/fn:Y3NtX25hdHVyZV8wM19lYzYyYmNlNWEx:t/cb:522284e836adb80a786f8b170be6a9981034caf3/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9uYXR1cmVfMDMuanBn) --- Step by step guide -------------------- [ ![](https://www.toujou.de/_assets/processed/fRcBxDXbIxSAzwMLL_lRKUVWi-Gjm4lfvrTpws8nWO8/q:85/w:432/h:270/fn:Y3NtXzA1LTAxX2VsZW1lbnRfd2FlaGxlbl9lODk5MWY5NDk3:t/cb:51ded4d5886f34267387e895c051df42e2af5fa3/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA1X01lZGlhX2VsZW1lbnRzLzA1XzAxX3NpbmdsZV9tdWx0aXBsZS8wNS0wMV9lbGVtZW50X3dhZWhsZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/05_Media_elements/05_01_single_multiple/05-01_element_waehlen.png) ### Create media element - Click on the **+ Content** button to create any media element. In the *Media* tab, select the element of your choice. - Choose the element according its grid design (two/three/four); there is no limit within the slider and gallery element. [ ![](https://www.toujou.de/_assets/processed/Gnv20bqKT1IDCABgtkPA-39sfbMysj9q47fsfW2krkQ/q:85/w:432/h:270/fn:Y3NtXzA1LTAyX21lZGl1bV93YWVobGVuX2Q0ZjUzMTFhMDQ:t/cb:76f3c64f47aba15455e8e71da6c94f9752945a78/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA1X01lZGlhX2VsZW1lbnRzLzA1XzAxX3NpbmdsZV9tdWx0aXBsZS8wNS0wMl9tZWRpdW1fd2FlaGxlbi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/05_Media_elements/05_01_single_multiple/05-02_medium_waehlen.png) ### Insert images - To insert an image, click **Add media file** in the *General* tab. - Select an image file from your file list or upload a file to the appropriate folder. - Repeat this step for multiple images. [ ![](https://www.toujou.de/_assets/processed/JiTJz-CIijo7yDiyjFY_m4FP0dLCE6w0t74TCrTgFsY/q:85/w:432/h:270/fn:Y3NtXzA1LTAzX21ldGFkYXRlbl9mOTFkZjJkMDI1:t/cb:fa980227e4eca267432e089caf27a69be8683906/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA1X01lZGlhX2VsZW1lbnRzLzA1XzAxX3NpbmdsZV9tdWx0aXBsZS8wNS0wM19tZXRhZGF0ZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/05_Media_elements/05_01_single_multiple/05-03_metadaten.png) ### Image information - Any image information and links can be entered directly in the *Image Metadata* workspace. - Activate the *Description (Caption)* by checking **Set element specific value (No default)** to add a caption to the image. Write the text into the field provided. [ ![](https://www.toujou.de/_assets/processed/eUrxRrpBnkDVk-Diq_f8Hpe71a5eSUALhTC9T1PFa_4/q:85/w:432/h:270/fn:Y3NtXzA1LTA0X2JlYXJiZWl0ZW5fM2JmNDYwNzBiNA:t/cb:cb64a0b7561c5d3b352d07e33eeec428f26f5fed/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA1X01lZGlhX2VsZW1lbnRzLzA1XzAxX3NpbmdsZV9tdWx0aXBsZS8wNS0wNF9iZWFyYmVpdGVuLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/05_Media_elements/05_01_single_multiple/05-04_bearbeiten.png) ### Format image - The ratio and size of the image can be adjusted in the *Image manipulator* by clicking **Open Editor**. - For more information on how to work within the image editor, go to the [detailed tutorial](https://www.toujou.de/service/tutorials/page-content/image-editing/). --- [ ![](https://www.toujou.de/_assets/processed/8R2-xmgjokU_-l0hKay87p3Ri37N6Sm_byCSpNsBekQ/q:85/w:433/h:271/fn:Y3NtXzA1XzAyX3ZpZGVvX3VybF9hY2NmOThkMTk1:t/cb:d9d82b290eec00e1140c3b9b4eef2c3e94174b3d/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA1X01lZGlhX2VsZW1lbnRzLzA1XzAxX3NpbmdsZV9tdWx0aXBsZS8wNV8wMl92aWRlb191cmwucG5n) ](https://www.toujou.de/_assets/processed/3Qii2NW97LJODxLPES3HNOvyyD0hPUrqLRNyIcSjuxc/q:85/w:1024/h:640/fn:Y3NtXzA1XzAyX3ZpZGVvX3VybF8yYWYzZWIyZjg1:t/cb:d9d82b290eec00e1140c3b9b4eef2c3e94174b3d/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA1X01lZGlhX2VsZW1lbnRzLzA1XzAxX3NpbmdsZV9tdWx0aXBsZS8wNV8wMl92aWRlb191cmwucG5n) ### Insert videos - Click on the **+ Content** button to create any media element. In the *Media* tab, select the element of your choice. - To insert a video/multiple videos, click **Add media by URL** in the *General* tab. - Paste the full URL of a YouTube or Vimeo video into the mask that appears in an overlapped window. **Note on GIF**: This data format can be uploaded from the [file list](https://www.toujou.de/service/tutorials/file-list-module/#c1004649) just like an image described above. Make sure to use the correct format. For website performance reasons, we advise you to use it sparingly and to keep the data size as small as possible, as it will be displayed in its original size. --- Screen adaptation ------------------- *Media* are single or multiple images or videos. **Responsive behaviour**: The images or videos are fully displayed at a fixed ratio for each available screen size. Any three media elements are always displayed in a row. On small devices, four media elements are displayed in rows of two. --- Linked topics ------------- [toujou set-ups](https://www.toujou.de/service/toujou-set-up/) & [TYPO3 tutorials](https://www.toujou.de/service/tutorials/) related to this element description. [Image editing](https://www.toujou.com/service/tutorials/page-content/text-editing/) [Filelist](https://www.toujou.de/service/tutorials/file-list-module/)