The **Gallery** component is perfect for displaying a large collection of images or videos, with options to include related content for added context. ## How to edit in the back office? ![Edition of Gallery image ](/sites/g/files/dvc2391/files/styles/media/public/image/2024/11/Screenshot%202024-11-20%2014.39.30.png.webp?itok=9_8XqcC4) ![Image veolia example ](/sites/g/files/dvc2391/files/styles/media/public/image/2024/11/Screenshot%202024-11-20%2014.39.49_0.png.webp?itok=2e8PjSA7) ![Image editing gallery ](/sites/g/files/dvc2391/files/styles/media/public/image/2024/11/Screenshot%202024-11-20%2014.40.12.png.webp?itok=pt3EApPr) ![Image editing gallery ](/sites/g/files/dvc2391/files/styles/media/public/image/2024/11/Screenshot%202024-11-20%2014.40.45.png.webp?itok=IUwx4zYt) ![Image editing gallery ](/sites/g/files/dvc2391/files/styles/media/public/image/2024/11/Screenshot%202024-11-20%2014.40.58.png.webp?itok=rHSm5fD8) To set up the **Gallery** component, start by entering an **admin title** for internal identification in the back office. In the first tab, choose the desired display mode for each item: either Gallery image or Gallery video, depending on the content type. Next, add existing **media items** (images or videos) to the Gallery by selecting them from the media library. Note that these gallery items must be created beforehand. If you need to **adjust the sequence of media**, use the *drag-and-drop* feature in the "Gallery item order" section. Then, choose the **color** that will appear when clicking on the gallery before enlarging it. Add a **caption**, which is a small text displayed below the image. Now, you could select a **media item.** If desired, **write a description** beneath it in text format. It is also possible to **attach a PDF file**. Lastly, use the "Add existing media item" button to include more media as needed, ensuring a dynamic and organized display of visual content. ## Examples: **Gallery Photo** ![bird photo](/sites/g/files/dvc2391/files/styles/gallery_thumbnail/public/image/2024/11/CHILI-1-7930.jpg.webp?itok=K5o0zBDc)click here #### First Gallery example First Gallery example [](#) ![bird photo](/sites/g/files/dvc2391/files/styles/gallery_popup/public/image/2024/11/CHILI-1-7930.jpg.webp?itok=au1Wv34_) [Test link](/gallery "Gallery") ![Image veolia example ](/sites/g/files/dvc2391/files/styles/gallery_thumbnail/public/image/2024/11/A21I6663BB%281%29_0.jpg.webp?itok=Uv3FQ-Gt)#### Second Gallery example Second Gallery example [](#) ![Image veolia example ](/sites/g/files/dvc2391/files/styles/gallery_popup/public/image/2024/11/A21I6663BB%281%29_0.jpg.webp?itok=3jZHET9I) ![Image veolia example ](/sites/g/files/dvc2391/files/styles/gallery_thumbnail/public/image/2024/11/Queretaro_Acueducto-8502.jpg.webp?itok=RP80xI55)#### Third Gallery example Third Gallery example [](#) ![Image veolia example ](/sites/g/files/dvc2391/files/styles/gallery_popup/public/image/2024/11/Queretaro_Acueducto-8502.jpg.webp?itok=PiTO9P7X) [ sample document ( PDF - 10.8 KB ) ](/sites/g/files/dvc2391/files/document/2019/07/Sample%20document%20-%20A4_1.pdf "sample document") ![Image veolia example ](/sites/g/files/dvc2391/files/styles/gallery_thumbnail/public/image/2024/11/CHILI-3081_1.jpg.webp?itok=Sg2eNy6O)#### Fourth Gallery example Fourth Gallery example [](#) ![Image veolia example ](/sites/g/files/dvc2391/files/styles/gallery_popup/public/image/2024/11/CHILI-3081_1.jpg.webp?itok=-k3qTZ37) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula risus eu sapien bibendum, ac malesuada arcu elementum. Quisque fermentum nulla ut ligula blandit, sed convallis odio pulvinar. Fusce at risus at turpis consequat imperdiet non vel odio. Nam sollicitudin felis sit amet neque laoreet, a cursus magna commodo. **Gallery Video** [](#) Vidéo VERSO ![](/sites/g/files/dvc2391/files/styles/gallery_thumbnail/public/video_thumbnails/AAvHldX0ZIk.jpg.webp?itok=DZPiipG8) #### Pourquoi de nombreuses espèces vont-elles bientôt disparaître ? Pourquoi de nombreuses espèces vont-elles bientôt disparaître ? [](#) ![](/sites/g/files/dvc2391/files/styles/gallery_thumbnail/public/video_thumbnails/E4oA8AwcZ8E.jpg.webp?itok=zKjnaEKh) #### Le parcours d'une bouteille en plastique : du tri au recyclage - En Route Le parcours d'une bouteille en plastique : du tri au recyclage - En Route [](#) ![](/sites/g/files/dvc2391/files/styles/gallery_thumbnail/public/video_thumbnails/qMPAWsp1rBE.jpg.webp?itok=fs0ZPWWY) #### C'est quoi la flexibilité électrique ? C'est quoi la flexibilité électrique ? [](#) ## Enhance your web pages with components [Discover all the components here](/drupal-essentials/components) [ ![container icon](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Design%20sans%20titre%20%2812%29.jpg.webp?h=b202b291&itok=vmeeKQt-) ](/text)[Text](/text) ### [Text](/text) [ ![Card logo](/sites/g/files/dvc2391/files/styles/media/public/image/2025/02/Design%20sans%20titre%20%2832%29.png.webp?itok=IkpmBO28) ](/card)[Card](/card) ### [Card](/card) [ ![Quote logo](/sites/g/files/dvc2391/files/styles/media/public/image/2025/02/Design%20sans%20titre%20%2833%29.png.webp?itok=h2rKsDhF) ](/quote)[Quote](/quote) ### [Quote](/quote) [ ![content carosel icon](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Design%20sans%20titre%20%2811%29.jpg.webp?itok=h0W8b7g1) ](/carousel)[Carousel](/carousel) ### [Carousel](/carousel) [ ![Employee logo](/sites/g/files/dvc2391/files/styles/media/public/image/2025/02/Design%20sans%20titre%20%2835%29.png.webp?h=7699e6c3&itok=Po8T6NPm) ](/employees)[Employee](/employees) ### [Employee](/employees) [ ![Iframe logo](/sites/g/files/dvc2391/files/styles/media/public/image/2025/02/Design%20sans%20titre%20%2836%29.png.webp?h=3089ca13&itok=yg-giCJz) ](/iframe)[Iframe](/iframe) ### [Iframe](/iframe) [ ![Integration Code logo](/sites/g/files/dvc2391/files/styles/media/public/image/2025/02/Design%20sans%20titre%20%2838%29.png.webp?itok=vZx3cgmj) ](/integration-code)[Integration Code](/integration-code) ### [Integration Code](/integration-code) Previous Next ## Ask for support We use ServiceNow to track all of your requests and questions [Create a ticket now](https://veglobal.service-now.com/s3c?id=service_catalog&root=fcec05201b1649504d79dce2b24bcb50) ![](/sites/g/files/dvc2391/files/styles/crop_freeform/public/image/2024/04/image%2014%20%283%29.png.webp?itok=j1xAfftb)