{"id":6612,"date":"2024-04-14T18:20:32","date_gmt":"2024-04-14T10:20:32","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6612"},"modified":"2024-04-14T18:20:32","modified_gmt":"2024-04-14T10:20:32","slug":"gallery","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/gallery\/","title":{"rendered":"Gallery"},"content":{"rendered":"\n
\n

The gallery<\/strong> 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.<\/p>\n

This tutorial will cover:<\/p>\n

    \n
  1. Guidelines for setting up a gallery<\/li>\n
  2. Adding media to a gallery<\/li>\n
  3. Creating connections between galleries using gallery groups<\/li>\n<\/ol>\n

    Building a Gallery<\/h2>\n
    \n
    \"Gallery<\/div>\n<\/figure>\n

    A gallery comprises a clickable thumbnail enclosed within a link block. When visitors click inside the link\u2019s boundary on the live site, the gallery opens to reveal the associated media.<\/p>\n

    To set up a gallery:<\/p>\n

      \n
    1. Navigate to Insert panel<\/strong> > Advanced<\/strong><\/li>\n
    2. Select the gallery<\/strong> component or drag it onto the Webflow canvas<\/li>\n<\/ol>\n
      \n
      \"The<\/div>\n<\/figure>\n

      Functionality of the Gallery Thumbnail Image<\/h3>\n

      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.<\/p>\n

      \n
      \"Image<\/div>\n<\/figure>\n

      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.<\/p>\n

      \n
      \"The<\/div>\n<\/figure>\n

      Changing the Gallery Thumbnail with Alternate Content<\/h3>\n

      You can replace the placeholder image element, and insert various content (e.g., a title, or any non-link components) within the gallery link<\/strong>.<\/p>\n

      Alternatively, you can use a division block<\/strong> and employ a background image to establish equivalently-sized image thumbnails.<\/p>\n

      \n
      \"A<\/div>\n<\/figure>\n

      Enhancing the Gallery Appearance<\/h3>\n

      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.<\/p>\n

      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.<\/p>\n

      Adding Media to the Gallery<\/h2>\n

      To include an image and description in the gallery modal window:<\/p>\n

        \n
      1. Choose the gallery link<\/strong> on the canvas<\/li>\n
      2. Access the Element settings panel<\/strong> > Gallery settings <\/strong>> Media<\/strong><\/li>\n
      3. Click the \u201cAdd image<\/strong>\u201d button<\/li>\n
      4. Select Choose image<\/strong><\/li>\n
      5. Pick an image from the Assets panel<\/strong><\/li>\n
      6. Enter a description in the Caption<\/strong> field<\/li>\n
      7. Select Save<\/strong><\/li>\n<\/ol>\n

        You can insert numerous images into a gallery link as needed. These images will be showcased as a slideshow within the gallery modal window.<\/p>\n

        Please Note:<\/strong> Presently, gallery elements do not facilitate alternative text for images within the gallery.<\/h6>\n
        \n
        \"The<\/div>\n<\/figure>\n

        In order to insert a video into the lightbox modal window:<\/p>\n

          \n
        1. Choose the lightbox link<\/strong> on the canvas<\/li>\n
        2. Navigate to Element settings panel<\/strong> > Lightbox settings <\/strong>> Media<\/strong><\/li>\n
        3. Press the \u201cAdd video<\/strong>\u201d icon<\/li>\n
        4. Include the URL of the video in the URL<\/strong> field<\/li>\n
        5. Click Save<\/strong><\/li>\n<\/ol>\n
          \n
          \"The<\/div>\n<\/figure>\n

          How to form dynamic lightboxes from Collection field media<\/h3>\n

          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.<\/p>\n

          To link a dynamic Collection field to the lightbox thumbnail:<\/p>\n

            \n
          1. Integrate a lightbox<\/strong> into a dynamically-linked Collection list or a CMS Collection page<\/li>\n
          2. Choose the placeholder thumbnail image<\/li>\n
          3. Access Element settings<\/strong> > Image settings<\/strong><\/li>\n
          4. Tick the box marked \u201cGet Image from Blog posts<\/strong>\u201d (the Collection name might vary based on the Collection you\u2019ve chosen)<\/li>\n
          5. Pick an image Collection field from the Select field<\/strong> dropdown<\/li>\n<\/ol>\n

            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:<\/p>\n

              \n
            1. Choose the lightbox link<\/strong><\/li>\n
            2. Access Element settings<\/strong> > Lightbox settings<\/strong> > Media<\/strong><\/li>\n
            3. Tick the box labeled \u201cGet Media from Blog posts<\/strong>\u201d (the Collection name might differ depending on the Collection you\u2019ve selected)<\/li>\n
            4. Select a media Collection field from the Select field<\/strong> dropdown<\/li>\n<\/ol>\n
              \n
              \"The<\/div>\n<\/figure>\n
              \n
              \"The<\/div>\n<\/figure>\n

              Steps for connecting lightbox units using lightbox clusters<\/h2>\n

              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.<\/p>\n

              Process to formulate a lightbox cluster<\/h3>\n
                \n
              1. Pick any element within a lightbox<\/strong><\/li>\n
              2. Proceed to Element settings<\/strong> > Lightbox settings<\/strong><\/li>\n
              3. Tick the box labeled as \u201cInterlink with other lightboxes\u201d<\/li>\n
              4. Enter a designation for the Cluster<\/strong><\/li>\n<\/ol>\n
                \n
                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.\"<\/div>\n<\/figure>\n

                Linking additional lightboxes to the same cluster<\/h3>\n

                To connect other lightboxes to the cluster, follow these steps independently for each lightbox:<\/p>\n

                  \n
                1. Choose any element within the lightbox<\/strong><\/li>\n
                2. Navigate to Element settings<\/strong> > Lightbox settings<\/strong><\/li>\n
                3. Mark the box titled as \u201cInterlink with other lightboxes\u201d<\/li>\n
                4. Input the identical Cluster name<\/strong><\/li>\n<\/ol>\n
                  \n
                  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.\"<\/div>\n<\/figure>\n

                  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.<\/p>\n

                  \n
                  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.<\/div>\n<\/figure>\n

                  Establish multiple lightbox clusters across a single page<\/h3>\n

                  When multiple lightboxes are displayed on the same page, you can segregate them by assigning distinct Cluster names<\/strong>.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use the lightbox element to display images or videos inside a full-screen modal window.","protected":false},"author":2,"featured_media":6613,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[290],"tags":[],"class_list":{"0":"post-6612","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-elements","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6612","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6612"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6612\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6613"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}