{"id":4594,"date":"2025-01-09T10:47:11","date_gmt":"2025-01-09T15:47:11","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=4594"},"modified":"2025-01-09T15:48:03","modified_gmt":"2025-01-09T20:48:03","slug":"image-grid","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/mastery\/module-2-design-block-mastery\/image-grid\/","title":{"rendered":"Image Grid"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Image Grid\n <\/h1>\n \n \n \n\n

Module 2.6 \u2013 Mastery: Design Blocks: Image Grid<\/p>\n\n\n\n

\n
Examples: Image Grid<\/a><\/div>\n<\/div>\n\n\n <\/header>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n\n\n\n
\n

\n Table of Contents\n <\/h2>\n
\n
\n \n
\n
\n \n 1.\n <\/span>\n\n \n Step-by-Step\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 2.\n <\/span>\n\n \n Video Tutorial\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 3.\n <\/span>\n\n \n Try it Out\n <\/a>\n <\/div>\n\n <\/div>\n <\/div>\n\n <\/div>\n<\/div>\n\n\n\n

The image grid block is great for highlighting 3 to 5 images in a visually appealing way. <\/p>\n\n\n\n

Step-by-Step<\/h2>\n\n\n\n

1.<\/strong> Add the Image Grid block using the block menu.<\/a><\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

2<\/strong>. Add images by selecting an single item within the block grid and then click Select Image<\/strong>. Noet the minimum recommended image size is 768 pixels wide. <\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

3.<\/strong> Once you have added an image, you can customize using the block options to the right<\/p>\n\n\n\n

\n
\n\n \n
\n \n
\n \n\n
\"\"<\/figure>\n\n\n<\/div>\n\n\n
\n \n\n
    \n
  1. Toggle the button to enlarge the image<\/li>\n\n\n\n
  2. Drag the image to position it relatively within the block<\/li>\n<\/ol>\n\n\n<\/div>\n\n\n <\/div>\n\n\n <\/div>\n<\/section>\n\n\n\n

    4.<\/strong> Replace or remove the image by selecting a single item and then clicking Remove Image<\/strong> or Replace Image.<\/strong><\/p>\n\n\n\n

    \"Remove<\/figure>\n\n\n\n

    5.<\/strong> To add another single item (image), click the blue plus sign at the right of the block.<\/p>\n\n\n\n

    \"Add<\/figure>\n\n\n\n

    6.<\/strong> Once you have added several images, you can change the order using the arrows in the contextual menu above the block (click a single item to view the menu).<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    7.<\/strong> Select the entire image grid block by click the icon at the top left. You can now customize options for the entire block using the display options under the block tab at the right.<\/p>\n\n\n\n

    \"Display<\/figure>\n\n\n\n
    \n
    \n\n \n
    \n \n
    \n \n\n
    \"\"<\/figure>\n\n\n<\/div>\n\n\n
    \n \n\n
      \n
    1. Add a header for the block<\/li>\n\n\n\n
    2. Select a background colour (White or grey)<\/li>\n\n\n\n
    3. Customize the number of columns (2, 3, or 4)<\/li>\n\n\n\n
    4. Customize block width (Default, Large, Max)<\/li>\n\n\n\n
    5. Increase grid gap by selecting large<\/li>\n\n\n\n
    6. Change the aspect ratio. Options are Landscape, Portrait and Square<\/li>\n<\/ol>\n\n\n<\/div>\n\n\n <\/div>\n\n\n <\/div>\n<\/section>\n\n\n\n

      Video Tutorial<\/h2>\n\n\n\n