--- title: Logo Slider description url: "https://www.toujou.com/service/element-library/media-elements/logo-slider-description/" date: 2020-02-27 modified: 2022-09-27 --- # Logo Slider 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. [Logo Slider description](https://www.toujou.de/service/element-library/media-elements/logo-slider-description/) Logo slider element =================== A slider with multiple logos centered on the page. Item ID: 05-004 [Sample views](#c1009411) [Step by step guide](#c1009413) [Screen adaption](#c1009416) --- Sample views -------------- - [ ![](https://www.toujou.de/_assets/processed/02kGXwotUNJ-0gdeg8Qk0DUiTcOV8AkyzXNm5uHGgl4/q:85/w:176/h:176/fn:Y3NtX011c3RlcmxvZ29fdHlwbzNfNWVhMDEwZWMyNQ:t/cb:c16ac127b3cc5da77c1403bd1ff94d2048d21d42/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9sb2dvcy9NdXN0ZXJsb2dvX3R5cG8zLnBuZw) ](http://typo3.org) - [ ![Logo toujou in schwarz-weiss](https://www.toujou.de/_assets/processed/vbXCyXJDPSjGbrqS_WkrgvxiwGEsaKJXS6MTiGRiwEY/q:85/w:176/h:176/fn:Y3NtX011c3RlcmxvZ29fdG91am91XzJiOTJhNTk0OGE:t/cb:7931ffd7d798e51e9133dcb4245d758c32081f52/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9sb2dvcy9NdXN0ZXJsb2dvX3RvdWpvdS5wbmc) ](https://www.toujou.de/) - [ ![](https://www.toujou.de/_assets/processed/W03fqDXTlATX-Tfbto6L9AxsKjJnLCthAjKqi5QOZpU/q:85/w:176/h:176/fn:Y3NtX011c3RlcmxvZ29fREZBVV9hMmI4M2ExNTQ5:t/cb:18f75e2a69a0cf60a6d281c899215c116bb7177e/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9sb2dvcy9NdXN0ZXJsb2dvX0RGQVUucG5n) ](http://dfau.de) - ![](https://www.toujou.de/_assets/processed/02kGXwotUNJ-0gdeg8Qk0DUiTcOV8AkyzXNm5uHGgl4/q:85/w:176/h:176/fn:Y3NtX011c3RlcmxvZ29fdHlwbzNfNWVhMDEwZWMyNQ:t/cb:c16ac127b3cc5da77c1403bd1ff94d2048d21d42/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9sb2dvcy9NdXN0ZXJsb2dvX3R5cG8zLnBuZw) - ![Logo toujou in schwarz-weiss](https://www.toujou.de/_assets/processed/vbXCyXJDPSjGbrqS_WkrgvxiwGEsaKJXS6MTiGRiwEY/q:85/w:176/h:176/fn:Y3NtX011c3RlcmxvZ29fdG91am91XzJiOTJhNTk0OGE:t/cb:7931ffd7d798e51e9133dcb4245d758c32081f52/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9sb2dvcy9NdXN0ZXJsb2dvX3RvdWpvdS5wbmc) - ![](https://www.toujou.de/_assets/processed/W03fqDXTlATX-Tfbto6L9AxsKjJnLCthAjKqi5QOZpU/q:85/w:176/h:176/fn:Y3NtX011c3RlcmxvZ29fREZBVV9hMmI4M2ExNTQ5:t/cb:18f75e2a69a0cf60a6d281c899215c116bb7177e/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9sb2dvcy9NdXN0ZXJsb2dvX0RGQVUucG5n) of --- Step by step guide -------------------- [ ![](https://www.toujou.de/_assets/processed/_U4jXvHtLRp0qR5m9nZkgHtYRNQ7rNMfe1A4ddcf6-M/q:85/c:1920:1080:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX2xvZ29fc2xpZGVyX2NyZWF0ZV9pbWFnZV9jYmRiMzBjZTNh:t/cb:0fa1a5046ecac1f68e2dc3cc4341f382a114d6eb/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA1X01lZGlhX2VsZW1lbnRzLzA1XzAzX2xvZ29fc2xpZGVyL2xvZ29fc2xpZGVyX2NyZWF0ZV9pbWFnZS5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/05_Media_elements/05_03_logo_slider/logo_slider_create_image.png) ### Create an image - Click the **+Content** button and select the **Logo Slider** element in the *Media* tab. - Choose **Add image/Add media file** in the *Content* tab. - Select one or several image file(s) from your file list or upload the desired files to the appropriate folder. To activate the slider you should always have uploaded more images then displayed in the Frontend. [ ![](https://www.toujou.de/_assets/processed/SfBjTzEfGFcJODBqWpyCvuneVjPpcOl7wnzq3bEzVY0/q:85/c:1080:607.49999999999:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX2xvZ29fc2xpZGVyX2VkaXRfaW1hZ2VfNGQ1ZTllZTMyZA:t/cb:c5181ab8baa2cdd1ed40b66cda7aea5aab75bc9e/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA1X01lZGlhX2VsZW1lbnRzLzA1XzAzX2xvZ29fc2xpZGVyL2xvZ29fc2xpZGVyX2VkaXRfaW1hZ2UucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/05_Media_elements/05_03_logo_slider/logo_slider_edit_image.png) ### Edit the image - A menu for editing the I**mage Metadata** will open under each image that is uploaded. - Add a link to the website URLs in the *link* section for each image/logo, if needed. - Check the image section displayed in the preview for the four different display sizes. [ ![](https://www.toujou.de/_assets/processed/1f0yykSU_64mSiI5eLC0q_x9fZfb5lOcct4W3i2mE1M/q:85/c:1920:1080:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX2xvZ29fc2xpZGVyX2Zvcm1hdF9pbWFnZV82ZTQzOTZmYzA1:t/cb:fbdab2f6afae867e3c335e0dc99b1e633a394007/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA1X01lZGlhX2VsZW1lbnRzLzA1XzAzX2xvZ29fc2xpZGVyL2xvZ29fc2xpZGVyX2Zvcm1hdF9pbWFnZS5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/05_Media_elements/05_03_logo_slider/logo_slider_format_image.png) ### Format the image - By clicking the **Open Editor** button, you can adjust the aspect ratio for the mobile, tablet, desktop, and widescreen view. - If necessary, set the image focus for responsive behavior to the desired image area in each case. --- ### Automatic replay of media If you use more than one media source within the same element, you have the option to have automatic replay. To ensure a fluid playback, all media is played using the same format (16:9). ![](https://www.toujou.de/_assets/processed/ZobsBoC6dBizT7n0l4xh3kpQSmGyl_IcOwm0uUEfjkU/q:85/w:433/h:106/fn:Y3NtX0F1dG9tYXRpY19TbGljZXJfTWVkaWFfRWxlbWVudHNfZWRmYjM4OTQ4NQ:t/cb:affe1374807ed0700d62cb5ee7aa44f53bde1c8c/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA1X01lZGlhX2VsZW1lbnRzL0F1dG9tYXRpY19TbGljZXJfTWVkaWFfRWxlbWVudHMuanBn) - ***Slide automatically***: Activate the slider by clicking on ito set up the automatic replay. - ***Interval of auto slidings (in seconds)***: The default speed for images is every 6 seconds. If you would like to change this frequency, move the slider accordingly on a scale from 1 to 15 seconds (this will only work if the *slide automatically* is activated). --- Screen adaption ----------------- The *Logo Slider* element enables you to display multiple images in a gallery loop. Make sure the aspect ratio of the images selected is similar and avoid mixing portrait and landscape formats. The slider is only working properly, when more images are stored than are displayed in the frontend. For different devices there are different numbers, e.g. for desktop it works with 5 images, for smartphones 3 images are enough. **Responsive**: The logo slider element is displayed at a fixed ratio for all available screen sizes. --- Linked topics ------------- Explanations from [toujou ](https://www.toujou.de/service/toujou-set-up/#c1004330)& [TYPO3](https://www.toujou.de/service/tutorials/#c1004326) setup related to this element guide. [Page-Content](https://www.toujou.de/service/tutorials/page-content/#c1004723) [File list](https://www.toujou.de/service/tutorials/file-list-module/#c1004649)