{"id":4068,"date":"2024-08-23T10:55:57","date_gmt":"2024-08-23T14:55:57","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=4068"},"modified":"2026-08-10T20:59:09","modified_gmt":"2026-08-11T00:59:09","slug":"gallery","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/intermediate-training\/intermediate-training-module-2-common-content-blocks\/gallery\/","title":{"rendered":"Gallery"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Gallery Block\n <\/h1>\n \n \n \n\n

Intermediate Training Module 2: Common Content Blocks<\/p>\n\n\n <\/header>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n\n\n

The Gallery block allows you to display multiple images together in a clean, organized layout. Rather than inserting individual images one at a time, a gallery groups related images into a single visual collection.<\/p>\n\n\n\n

Galleries are ideal for showcasing:<\/p>\n\n\n\n

    \n
  • Events and activities<\/li>\n\n\n\n
  • Facilities and spaces<\/li>\n\n\n\n
  • Research projects<\/li>\n\n\n\n
  • Student experiences<\/li>\n\n\n\n
  • Campus photography<\/li>\n\n\n\n
  • Project portfolios<\/li>\n<\/ul>\n\n\n\n

    A well-designed gallery can help tell a story, highlight accomplishments, and make pages more engaging.<\/p>\n\n\n\n

    When to Use a Gallery<\/h2>\n\n\n\n

    Use a Gallery block when you want to display several related images together.<\/p>\n\n\n\n

    Examples include:<\/p>\n\n\n\n

      \n
    • Event Photos:<\/strong> Showcase images from a conference, workshop, open house, or community event.<\/li>\n\n\n\n
    • Spaces and Facilities:<\/strong> Highlight classrooms, labs, meeting rooms, or campus facilities.<\/li>\n\n\n\n
    • Student and Faculty Activities:<\/strong> Display research, teaching, student life, or community engagement.<\/li>\n\n\n\n
    • Before-and-After Examples:<\/strong> Present visual comparisons in an easy-to-follow format.<\/li>\n<\/ul>\n\n\n\n

      When multiple images support the same topic, a gallery is often more effective than several standalone image blocks.<\/p>\n\n\n\n

      Adding a Gallery<\/h2>\n\n\n\n

      To add a Gallery block:<\/p>\n\n\n\n

        \n
      1. Click the +<\/strong> button and search for Gallery<\/strong>.<\/li>\n\n\n\n
      2. Select the Gallery block.<\/li>\n\n\n\n
      3. Upload new images or choose images from the Media Library.<\/li>\n\n\n\n
      4. Select multiple images.<\/li>\n\n\n\n
      5. Click Create Gallery<\/strong>.<\/li>\n\n\n\n
      6. Click Insert Gallery<\/strong>.<\/li>\n<\/ol>\n\n\n\n

        Your images will automatically be displayed in a grid layout.<\/p>\n\n\n\n

        Gallery Layout Options<\/h2>\n\n\n\n

        Several settings can be used to customize how images are displayed.<\/p>\n\n\n\n

        Number of Columns<\/h3>\n\n\n\n

        Control how many images appear in each row.<\/p>\n\n\n\n

        For example:<\/p>\n\n\n\n

          \n
        • 2 columns<\/li>\n\n\n\n
        • 3 columns<\/li>\n\n\n\n
        • 4 columns<\/li>\n<\/ul>\n\n\n\n

          The ideal number depends on:<\/p>\n\n\n\n

            \n
          • The number of images<\/li>\n\n\n\n
          • The available page width<\/li>\n\n\n\n
          • How much detail appears in each image<\/li>\n<\/ul>\n\n\n\n

            Image Size<\/h3>\n\n\n\n

            Choose the image resolution displayed within the gallery.<\/p>\n\n\n\n

            Larger image sizes provide more detail but may take up more space on the page.<\/p>\n\n\n\n

            Cropping Images<\/h3>\n\n\n\n

            Cropping helps create a consistent visual appearance by making images display at the same proportions.<\/p>\n\n\n\n

            This can be particularly helpful when images have different dimensions.<\/p>\n\n\n\n

            Linking Images<\/h3>\n\n\n\n

            Depending on your site’s configuration, images can link to:<\/p>\n\n\n\n

              \n
            • The image file<\/li>\n\n\n\n
            • An attachment page<\/li>\n\n\n\n
            • Another destination<\/li>\n<\/ul>\n\n\n\n

              Randomizing Images<\/h3>\n\n\n\n

              Some gallery configurations allow images to appear in a random order each time the page loads.<\/p>\n\n\n\n

              Reordering Images<\/h2>\n\n\n\n

              Images can be rearranged within the gallery.<\/p>\n\n\n\n

              To change the order:<\/p>\n\n\n\n

                \n
              1. Select an image within the gallery.<\/li>\n\n\n\n
              2. Use the move controls to reposition it.<\/li>\n\n\n\n
              3. Continue until the gallery is arranged as desired.<\/li>\n<\/ol>\n\n\n\n

                The order of images can influence how visitors experience the content, so it is worth reviewing carefully.<\/p>\n\n\n\n

                Accessibility and Image Quality<\/h2>\n\n\n\n

                As with all images on your website:<\/p>\n\n\n\n

                  \n
                • Use high-quality photographs.<\/li>\n\n\n\n
                • Add meaningful alt text where appropriate.<\/li>\n\n\n\n
                • Avoid images that contain important text.<\/li>\n\n\n\n
                • Ensure images remain clear on mobile devices.<\/li>\n<\/ul>\n\n\n\n

                  Well-prepared images improve both usability and accessibility.<\/p>\n\n\n\n

                  Best Practices<\/h2>\n\n\n\n

                  Use Related Images<\/strong>
                  Images within a gallery should support a common topic or theme.<\/p>\n\n\n\n

                  Choose Quality Over Quantity<\/strong>
                  A small collection of strong images is often more effective than a large collection of average ones.<\/p>\n\n\n\n

                  Consider Image Order<\/strong>
                  Place the strongest or most important images first.<\/p>\n\n\n\n

                  Maintain Consistency<\/strong>
                  Where possible, use images with similar quality, orientation, and style.<\/p>\n\n\n\n

                  Preview on Mobile Devices<\/strong>
                  Always review galleries on smaller screens to ensure they remain easy to browse.<\/p>\n\n\n\n

                  Common Uses<\/h2>\n\n\n\n

                  Galleries work well for:<\/p>\n\n\n\n

                    \n
                  • Event photo collections<\/li>\n\n\n\n
                  • Campus tours<\/li>\n\n\n\n
                  • Research showcases<\/li>\n\n\n\n
                  • Student projects<\/li>\n\n\n\n
                  • Department highlights<\/li>\n\n\n\n
                  • Facility overviews<\/li>\n<\/ul>\n\n\n\n

                    They are one of the most effective ways to present visual content without overwhelming visitors.<\/p>\n\n\n\n

                    \n