The gallery component displays images (with or without descriptions) or videos within a fullscreen slideshow modal window. Galleries are also adaptable across different screen sizes, making them convenient for showcasing media on computers, tablets, and smartphones.
This tutorial will cover:
- Guidelines for setting up a gallery
- Adding media to a gallery
- Creating connections between galleries using gallery groups
Building a Gallery
![64b94c835ac4b7af7a721e71_63bc40ccef7d7195da594eda_y-hn-q1ple3ygmiao0-9gxk_sl_6zscclybslviqrlmibeeymxnikf4-e_74cfnezrweaiyaziy1i34vapgtwazu16i3pmm3qzamyms9tufcoqfxtf8btmt8vadmihiqqpyt9tmdx1u_y1khnxfx-d Gallery icon thumbnail](https://webflow.tenten.co/wp-content/uploads/2024/04/64b94c835ac4b7af7a721e71_63bc40ccef7d7195da594eda_y-hn-q1ple3ygmiao0-9gxk_sl_6zscclybslviqrlmibeeymxnikf4-e_74cfnezrweaiyaziy1i34vapgtwazu16i3pmm3qzamyms9tufcoqfxtf8btmt8vadmihiqqpyt9tmdx1u_y1khnxfx-d.png)
A gallery comprises a clickable thumbnail enclosed within a link block. When visitors click inside the link’s boundary on the live site, the gallery opens to reveal the associated media.
To set up a gallery:
- Navigate to Insert panel > Advanced
- Select the gallery component or drag it onto the Webflow canvas
![64b94c845ac4b7af7a721ea5_63bc40cbec8b2ef6570bc3be_6uqrnw_hlqhfa2usjimemsdcfrtcx8qsacciu9s1wriyhakosaxmjbqqeclenlqeoc71zmeiymjscqse9c2yytqcyfpr7p3d20zjbjg0xuj5v7t03s2rvftkynzmggn2vv5oq9pvnr8co5ovgflk5f The gallery component highlighted in the Insert panel.](https://webflow.tenten.co/wp-content/uploads/2024/04/64b94c845ac4b7af7a721ea5_63bc40cbec8b2ef6570bc3be_6uqrnw_hlqhfa2usjimemsdcfrtcx8qsacciu9s1wriyhakosaxmjbqqeclenlqeoc71zmeiymjscqse9c2yytqcyfpr7p3d20zjbjg0xuj5v7t03s2rvftkynzmggn2vv5oq9pvnr8co5ovgflk5f.png)
Functionality of the Gallery Thumbnail Image
The gallery contains an image element that operates like any other image element. You can adjust its size, replace the placeholder thumbnail image by double-clicking, and include alternative text. Read more about image elements to explore further.
![64b94c845ac4b7af7a721e90_63bc40cc5aa9ff07c45e3a68_5e3zp0oef2oc0vdwkgx3flmpryztvgvrly01yx9jh6qruu56agwq1te7nbun8iwrf5m9xzt8wh1rhoomuumquokcdii3rzj_ihmdhbcpyhq2zeuglzytclu6_3fsfja6_0hn4fljtghe1gdcrx3rfr Image settings for the gallery thumbnail.](https://webflow.tenten.co/wp-content/uploads/2024/04/64b94c845ac4b7af7a721e90_63bc40cc5aa9ff07c45e3a68_5e3zp0oef2oc0vdwkgx3flmpryztvgvrly01yx9jh6qruu56agwq1te7nbun8iwrf5m9xzt8wh1rhoomuumquokcdii3rzj_ihmdhbcpyhq2zeuglzytclu6_3fsfja6_0hn4fljtghe1gdcrx3rfr.png)
You can utilize the same image for the gallery thumbnail and the larger gallery modal window. Webflow automatically generates adaptable versions for all in-line images. Explore more about responsive images for additional details.
![64b94c845ac4b7af7a721e9a_63bc40cb5aa9ff58245e3989_tl3slbdtbal5skvubivoz3k4cjcgnrylufn08zwvaj5ficpp7mnhgwr7rofwlb-2quauau-mfeykmklvpmlev8mks0p3qkrtr2sor9ltskfubyavbdtqhwkhdqbvlyxd7ctwki_9uhkgx2xyrzvkkt The identical image displayed in six various sizes: original, 2000px, 1600px, 1080px, 800px, and 500px.](https://webflow.tenten.co/wp-content/uploads/2024/04/64b94c845ac4b7af7a721e9a_63bc40cb5aa9ff58245e3989_tl3slbdtbal5skvubivoz3k4cjcgnrylufn08zwvaj5ficpp7mnhgwr7rofwlb-2quauau-mfeykmklvpmlev8mks0p3qkrtr2sor9ltskfubyavbdtqhwkhdqbvlyxd7ctwki_9uhkgx2xyrzvkkt.png)
Changing the Gallery Thumbnail with Alternate Content
You can replace the placeholder image element, and insert various content (e.g., a title, or any non-link components) within the gallery link.
Alternatively, you can use a division block and employ a background image to establish equivalently-sized image thumbnails.
![64b94c835ac4b7af7a721e79_63bc40cb9cb583fe824a6cff_ancirk1sr7pq6vrfet0uxtlwmriab2bs4fqoqlvf-wbiyhnsbrya8u_vd9pgh6hztitwlpabwtozekwo2kd2h0kocb9kuekznx3kelv2isehs2idlw6nsmmpejsrnh51_as67b_gitdroiqv2eri18 A gallery link incorporates an image of the Sutro baths in San Francisco. It features an H1 headline and a paragraph of text. The H1 text reads Sutro Baths, while the paragraph details San Francisco, CA.](https://webflow.tenten.co/wp-content/uploads/2024/04/64b94c835ac4b7af7a721e79_63bc40cb9cb583fe824a6cff_ancirk1sr7pq6vrfet0uxtlwmriab2bs4fqoqlvf-wbiyhnsbrya8u_vd9pgh6hztitwlpabwtozekwo2kd2h0kocb9kuekznx3kelv2isehs2idlw6nsmmpejsrnh51_as67b_gitdroiqv2eri18.png)
Enhancing the Gallery Appearance
You have the capability to design both the gallery link and its content. For instance, if you nest text elements within your gallery link, you can customize the typography of the gallery link component.
Although customization of the background overlay in the modal window that opens upon clicking the gallery link isn’t possible, you can insert an image or video, along with an image description if desired.
Adding Media to the Gallery
To include an image and description in the gallery modal window:
- Choose the gallery link on the canvas
- Access the Element settings panel > Gallery settings > Media
- Click the “Add image” button
- Select Choose image
- Pick an image from the Assets panel
- Enter a description in the Caption field
- Select Save
You can insert numerous images into a gallery link as needed. These images will be showcased as a slideshow within the gallery modal window.
Please Note: Presently, gallery elements do not facilitate alternative text for images within the gallery.
![64b94c845ac4b7af7a721e97_63bc40cbd293bb64ab33d17a_ee_163an_tbwwoh0hacepzb7ttunaudk4cg1o1lrprm5sm6xmxwcttpnr0ieb6kn1hde_gyxv-imzpcvkry_aopmod9rmfilb0ox29tigw-634wt9ubfayngojkng6q1wxpk52lncvs_3q1ienoidq The “Add image” button is highlighted in the Media section in Lightbox settings.](https://webflow.tenten.co/wp-content/uploads/2024/04/64b94c845ac4b7af7a721e97_63bc40cbd293bb64ab33d17a_ee_163an_tbwwoh0hacepzb7ttunaudk4cg1o1lrprm5sm6xmxwcttpnr0ieb6kn1hde_gyxv-imzpcvkry_aopmod9rmfilb0ox29tigw-634wt9ubfayngojkng6q1wxpk52lncvs_3q1ienoidq.png)
In order to insert a video into the lightbox modal window:
- Choose the lightbox link on the canvas
- Navigate to Element settings panel > Lightbox settings > Media
- Press the “Add video” icon
- Include the URL of the video in the URL field
- Click Save
![64b94c845ac4b7af7a721e93_63bc40cbc83b89442a848d74_tyys_8jhqpjfndjxk9tsir5eva71abbdubc5xxoz0ha37bdzkgd4nkg2xfggmfpwrplxiawu2-te1clwx3hg01rwosm3kgc5vqbebgzukmuv8s29qxpsijrwbe39aw4n-i-wpe-acbrrw_vsudyfh_ The “Add video” button is highlighted in the Media section in Lightbox settings.](https://webflow.tenten.co/wp-content/uploads/2024/04/64b94c845ac4b7af7a721e93_63bc40cbc83b89442a848d74_tyys_8jhqpjfndjxk9tsir5eva71abbdubc5xxoz0ha37bdzkgd4nkg2xfggmfpwrplxiawu2-te1clwx3hg01rwosm3kgc5vqbebgzukmuv8s29qxpsijrwbe39aw4n-i-wpe-acbrrw_vsudyfh_.png)
How to form dynamic lightboxes from Collection field media
It is possible to generate dynamic lightboxes by fetching the thumbnail image and/or lightbox media from media Collection fields (such as an image field, multi-image field, or video field) in your CMS or Ecommerce Collections.
To link a dynamic Collection field to the lightbox thumbnail:
- Integrate a lightbox into a dynamically-linked Collection list or a CMS Collection page
- Choose the placeholder thumbnail image
- Access Element settings > Image settings
- Tick the box marked “Get Image from Blog posts” (the Collection name might vary based on the Collection you’ve chosen)
- Pick an image Collection field from the Select field dropdown
Next, you can establish the connection between the lightbox and the Collection field to make your dynamic Collection images accessible in the lightbox. To attach a dynamic Collection field to the lightbox media:
- Choose the lightbox link
- Access Element settings > Lightbox settings > Media
- Tick the box labeled “Get Media from Blog posts” (the Collection name might differ depending on the Collection you’ve selected)
- Select a media Collection field from the Select field dropdown
![64b94c845ac4b7af7a721e8d_63bc40cc9b2bc53da8b0fb57_yxq7g_frjjg2jslv3nnl1hljzgqixvr7gfsfxvn3jfhm_vmiegcn1seer9k0f8kp-hgicju8jt5rav7x6wphstulfcspdtyi0e9qouwzvih_7zbk-vv9pib_89rtttfnvwt_ni5zawjkrihms7l3pn The “Get Image from Blog posts” checkbox is checked in Image settings and a “Main image” Collection field is chosen in the dropdown.](https://webflow.tenten.co/wp-content/uploads/2024/04/64b94c845ac4b7af7a721e8d_63bc40cc9b2bc53da8b0fb57_yxq7g_frjjg2jslv3nnl1hljzgqixvr7gfsfxvn3jfhm_vmiegcn1seer9k0f8kp-hgicju8jt5rav7x6wphstulfcspdtyi0e9qouwzvih_7zbk-vv9pib_89rtttfnvwt_ni5zawjkrihms7l3pn.png)
![64b94c845ac4b7af7a721ea2_63bc40cc633ca981306c9c77_3v718ztkdr-vouv1s_g8fzfrfmgjqdzykftiojw9pg8grh8wqucimmcxi4okakv7xqmheb8gdxgxfw7hmtnr6rovmkrynwxb5m-lctal53eglzz7oak3xzpg52zx5pv_eegrulxdx2tkjda1c0vabe The “Get Media from Blog posts” checkbox is selected in Lightbox settings and a “Blog image” Multi-image Collection field is highlighted in the dropdown.](https://webflow.tenten.co/wp-content/uploads/2024/04/64b94c845ac4b7af7a721ea2_63bc40cc633ca981306c9c77_3v718ztkdr-vouv1s_g8fzfrfmgjqdzykftiojw9pg8grh8wqucimmcxi4okakv7xqmheb8gdxgxfw7hmtnr6rovmkrynwxb5m-lctal53eglzz7oak3xzpg52zx5pv_eegrulxdx2tkjda1c0vabe.png)
Steps for connecting lightbox units using lightbox clusters
You have the option to interconnect multiple lightboxes to establish a slideshow gallery. Once a visitor clicks on a linked lightbox, all the media related to the associated group of lightboxes will be displayed.
Process to formulate a lightbox cluster
- Pick any element within a lightbox
- Proceed to Element settings > Lightbox settings
- Tick the box labeled as “Interlink with other lightboxes”
- Enter a designation for the Cluster
![64b94c845ac4b7af7a721e85_63bc40ccd59ddf64de93f8f9_0dv7swpsn3cpvc-z2rhaiiqrrcxwmgjlabtmekvruzb9mxcumbm2ruxbaera9qx37avhlmjqp8ir2xdys_ug040tp7zs0t66mafmkokts7pwql2l7jm-mgdwtwjrpcsmd3stvfxunexocadmy7page The lightbox settings board features an addition icon for an image, an inclusion icon for a video, a file title and a miniature image with a deletion symbol, a confirmed checkbox for "Interlink with other lightboxes" and a cluster title named "2021 Road trip."](https://webflow.tenten.co/wp-content/uploads/2024/04/64b94c845ac4b7af7a721e85_63bc40ccd59ddf64de93f8f9_0dv7swpsn3cpvc-z2rhaiiqrrcxwmgjlabtmekvruzb9mxcumbm2ruxbaera9qx37avhlmjqp8ir2xdys_ug040tp7zs0t66mafmkokts7pwql2l7jm-mgdwtwjrpcsmd3stvfxunexocadmy7page.png)
Linking additional lightboxes to the same cluster
To connect other lightboxes to the cluster, follow these steps independently for each lightbox:
- Choose any element within the lightbox
- Navigate to Element settings > Lightbox settings
- Mark the box titled as “Interlink with other lightboxes”
- Input the identical Cluster name
![64b94c845ac4b7af7a721e82_63bc40cce123082b2a8c34b8_ysyxbshv-ucg-avw_mcw1iczu-cpnnawlxo-9st0aa1ke8f7xiwpxwjgzxymhtmnsykxwaiujmfqvjxrkakeoaucm1bhran_9zridpbwgcqwa98j7z65vcc1k18l8c7vscomoxxmwqlyrmymhqnp_y A cluster of lightboxes showcasing four images, displaying an image of the renowned Sutro baths in San Francisco. An attached caption reads "Sutro baths, San Francisco."](https://webflow.tenten.co/wp-content/uploads/2024/04/64b94c845ac4b7af7a721e82_63bc40cce123082b2a8c34b8_ysyxbshv-ucg-avw_mcw1iczu-cpnnawlxo-9st0aa1ke8f7xiwpxwjgzxymhtmnsykxwaiujmfqvjxrkakeoaucm1bhran_9zridpbwgcqwa98j7z65vcc1k18l8c7vscomoxxmwqlyrmymhqnp_y.png)
When dealing with lightboxes in Collection lists, the act of creating and connecting one lightbox within a Collection item will automatically link all lightboxes present in the Collection list.
![64b94c835ac4b7af7a721e75_63bc40cc5aa9ff24315e3b63_h3uxgjh5metxckf3ogabvrkrit1o6ppbkihvsu_uz2s7c8ziw3fzfuwls4ohfabbf_6qiooxom7metho24mrkehhrs0bxxwoxkgszur8ssjxf-yyd6osm72eta2cqxq8fh1eybyb88hirkehpm8mnf The lightbox settings section highlights a confirmed box for "retrieve media from products" obtaining the primary image, a confirmed box for interlinking with other lightboxes, and a cluster name titled 2021 Road trip.](https://webflow.tenten.co/wp-content/uploads/2024/04/64b94c835ac4b7af7a721e75_63bc40cc5aa9ff24315e3b63_h3uxgjh5metxckf3ogabvrkrit1o6ppbkihvsu_uz2s7c8ziw3fzfuwls4ohfabbf_6qiooxom7metho24mrkehhrs0bxxwoxkgszur8ssjxf-yyd6osm72eta2cqxq8fh1eybyb88hirkehpm8mnf.png)
Establish multiple lightbox clusters across a single page
When multiple lightboxes are displayed on the same page, you can segregate them by assigning distinct Cluster names.
- Include or eliminate Workspace spots and members - April 15, 2024
- Centering box summary - April 15, 2024
- Store a site for future reference - April 15, 2024