--- title: Map image description url: "https://www.toujou.com/service/element-library/map-elements/map-image-description/" date: 2019-06-21 modified: 2022-09-27 --- # Map image 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. [Map elements](https://www.toujou.de/service/element-library/map-elements/) 5. [Map image description](https://www.toujou.de/service/element-library/map-elements/map-image-description/) Map image ========= Your own square or 16:9 static map image with a textfield on either side. Item-IDs: 06-005 | 06-006 | 06-007 | 06-008 [Sample views](#c1006056) [Step by step guide](#c1006059) [Screen adaptation](#c1006061) ![](https://www.toujou.de/_assets/processed/tOuoY0DrZ8-_fEudt1kfv3zHsO8sEbaLdrvQyHSGhJU/q:85/w:433/h:54/fn:Y3NtXzA2XzAwNS1tYXBfaW1hZ2VfbGVmdF8tX3NxXzIwMDBfMjUwXzM5OTYyMjdhOTU:t/cb:ebd62562df0f5adcbc337e075fb8f3c5b859d78e/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9JY29ucy9Gb3JtYXRlL0JpYl8yMDAwXzI1MC8wNl9NYXBfRWxlbWVudHNfMjAwMF8yNTAvMDZfMDA1LW1hcF9pbWFnZV9sZWZ0Xy1fc3FfMjAwMF8yNTAucG5n) --- Sample views -------------- #### Square ![](https://www.toujou.de/_assets/processed/gWlrs5kL1UbbB0rr61pac_LP8cVZqlECpMM_m1-Vvr8/q:85/c:2073:2073:fp:0.473:0.5/rt:force/w:433/h:433/fn:Y3NtX01hcC1QaW5fOGE1ZTM0YWEyZQ:t/cb:646c78be3134ad775693e9c99fe9cb1bbb9f5013/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9NYXAtUGluLnBuZw) This is a map element designed for location images and this text. There are no restrictions for the nature of the content. So feel free to list the type of information as text or in the form of an address. [ ](https://www.facebook.com/) [ ](https://www.twitter.com/) [ ](https://www.instagram.com/) [ ](https://www.xing.com/) [ ](https://www.linkedin.com/) [ ](https://www.pinterest.com/) --- #### 16:9 ![](https://www.toujou.de/_assets/processed/UjujiCHu_7xOBzfAMnF1qQOW_2TcwUKcIz2v5Ishe44/q:85/c:3200:1797.7528089888:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX01hcC1QaW5fMDk2MTk4M2M3NQ:t/cb:646c78be3134ad775693e9c99fe9cb1bbb9f5013/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9NYXAtUGluLnBuZw) This is a map element designed for location images and this text. There are no restrictions for the nature of the content. So feel free to list the type of information as text or in the form of an address. [ ](https://www.toujou.de/www.facebook.com) [ ](https://www.toujou.de/www.twitter.com) [ ](https://www.toujou.de/www.instagram.com) [ ](https://www.toujou.de/www.xing.com) [ ](https://www.toujou.de/www.linkedin.com) [ ](https://www.toujou.de/www.pinterest.com) Step by step guide -------------------- [ ![](https://www.toujou.de/_assets/processed/F9K57KKLZuCsiY5B6PGcslQMz6yjHlOAzGxCtDYEsME/q:85/w:432/h:270/fn:Y3NtXzA2XzAzXzAxX2ltYWdlX2VsZW1lbnRfd2FlaGxlbl9jM2MzMDNiNzk3:t/cb:1e9a0e7c6e73b9945139c674c530a115bbae1357/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA2X01hcF9lbGVtZW50cy8wNl8wM19pbWFnZS8wNl8wM18wMV9pbWFnZV9lbGVtZW50X3dhZWhsZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/06_Map_elements/06_03_image/06_03_01_image_element_waehlen.png) ### Create new element - Click on the **+ Content** button to create any map element.[ ](https://www.toujou.de/fileadmin/toujou/element_library/06_Map_elements/06_01_contact_info/06_01_02_contact_element_waehlen.png) - In the *Map Elements* tab, select the map image element of your choice that is named accordingly [ ![](https://www.toujou.de/_assets/processed/mOsukG1-A2K32Q-lAAgadjmej0x95G42K9DbLNPVaIM/q:85/w:432/h:270/fn:Y3NtXzA2XzAzXzAyX2ltYWdlX3VwbG9hZF9kZDI5OGI3ZmJk:t/cb:e94610a1cf718fa297cb2d45178d51fced8d2ab8/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA2X01hcF9lbGVtZW50cy8wNl8wM19pbWFnZS8wNl8wM18wMl9pbWFnZV91cGxvYWQucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/06_Map_elements/06_03_image/06_03_02_image_upload.png) ### Insert image - Click on the button **Add image**. - Select an image file from your file list or upload a file to the appropriate folder (*Select & upload files*). [ ![](https://www.toujou.de/_assets/processed/JruS-rMwZucoihF0nI2meZDF20famWzhmUhCdl4JtfM/q:85/w:432/h:270/fn:Y3NtXzA2XzAzXzAzX3RleHRfZWluZnVlZ2VuXzk1ZjFmMjAyYzU:t/cb:32acc792afed0865024cd0923957a0cb67915416/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA2X01hcF9lbGVtZW50cy8wNl8wM19pbWFnZS8wNl8wM18wM190ZXh0X2VpbmZ1ZWdlbi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/06_Map_elements/06_03_image/06_03_03_text_einfuegen.png) ### Insert and format text - Paste your text into the editor. - If you copy the text from another file, pay attention to possibly copied formatting. - The text can be formatted directly within the rich text editor, with the help of the menu above the editor. [ ![](https://www.toujou.de/_assets/processed/eFz55CzDdmUh1D0l3wY7gzupkk6sFqHCT4SVMrxReAE/q:85/w:432/h:270/fn:Y3NtXzA2XzAzXzA0X3NvY2lhbF9hYWI2ZmFlZTQx:t/cb:659d04ac73332385249ea2294c4a41bea4b5e5f3/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA2X01hcF9lbGVtZW50cy8wNl8wM19pbWFnZS8wNl8wM18wNF9zb2NpYWwucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/06_Map_elements/06_03_image/06_03_04_social.png) ### Add social media buttons - In the *Social Media* tab, you can create links for various social media channels. - Insert the entire link to the profile for the respective medium. --- Screen adaptation ------------------- A *map image* shows your own static image file of a map next to a textfield and social media icons with either a fixed square or 16:9 aspect ratio. **Responsive behaviour**: If there is not enough space to display map and text area next to each other, all maps will show the information directly below. This ensures the consistent appearance of all maps on small devices, regardless of the original orientation. --- 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. [Text editing](https://www.toujou.de/service/tutorials/page-content/text-editing/) [Image editing](https://www.toujou.de/service/tutorials/page-content/image-editing/) [Filelist](https://www.toujou.de/service/tutorials/file-list-module/)