{"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":"2026-08-10T21:16:49","modified_gmt":"2026-08-11T01:16:49","slug":"image-grid","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/advanced-training\/advanced-training-module-2-advanced-design-blocks\/image-grid\/","title":{"rendered":"Image Grid"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        Image Grid\n                    <\/h1>\n                \n                                \n                                    \n\n<p class=\"wp-block-paragraph\">Advanced Training Module 2: Advanced Design Blocks<\/p>\n\n\n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p class=\"wp-block-paragraph\">The Image Grid block allows you to display multiple images in a visually engaging layout. Unlike a standard Gallery block, which focuses on presenting a collection of images, the Image Grid block is designed to create a more intentional visual design and draw attention to featured content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Image Grids work particularly well when you want to showcase a small number of high-quality images that support a specific message or theme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Common uses include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Student life highlights<\/li>\n\n\n\n<li>Campus photography<\/li>\n\n\n\n<li>Research and lab spaces<\/li>\n\n\n\n<li>Event photo collections<\/li>\n\n\n\n<li>Program highlights<\/li>\n\n\n\n<li>Department showcases<\/li>\n<\/ul>\n\n\n\n<h2 id=\"when-to-use-an-image-grid\" class=\"wp-block-heading\">When to Use an Image Grid<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use an Image Grid when a collection of images tells a story or reinforces a message. An Image Grid is often more visually impactful than displaying several separate Image blocks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples include:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Student Experience<\/strong><br>Showcase classroom, campus, and extracurricular experiences.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Research Highlights<\/strong><br>Feature laboratories, equipment, fieldwork, or research projects.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Facilities and Spaces<\/strong><br>Display classrooms, study areas, or department facilities.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Events and Activities<\/strong><br>Highlight photography from recent events or community engagement activities.<\/p>\n\n\n\n<h2 id=\"adding-an-image-grid\" class=\"wp-block-heading\">Adding an Image Grid<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To add an Image Grid:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the <strong>+<\/strong> button and search for <strong>Image Grid<\/strong>.<\/li>\n\n\n\n<li>Select the Image Grid block.<\/li>\n\n\n\n<li>Select an image area within the grid.<\/li>\n\n\n\n<li>Choose <strong>Select Image<\/strong>.<\/li>\n\n\n\n<li>Upload an image or choose one from the Media Library.<\/li>\n\n\n\n<li>Repeat until all desired images have been added.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Recommended minimum image width:<\/strong> 768 pixels<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Using higher-quality images generally produces better results.<\/p>\n\n\n\n<h2 id=\"managing-individual-images\" class=\"wp-block-heading\">Managing Individual Images<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Each image in the grid can be customized independently.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Common options may include:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Enlarge on Click<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Allow visitors to open a larger version of the image.<\/li>\n\n\n\n<li>This can be useful when images contain details that may be difficult to see in the grid layout.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Image Position<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Adjust the image position to determine which portion of the photo is most visible.<\/li>\n\n\n\n<li>This is particularly useful when important content is near the edges of the image.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Replace or Remove Images<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Update images without rebuilding the entire grid.<\/li>\n\n\n\n<li>This makes it easy to refresh content while maintaining the layout.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"managing-the-grid-layout\" class=\"wp-block-heading\">Managing the Grid Layout<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Once multiple images have been added, you can customize the overall appearance of the grid.<\/p>\n\n\n\n<h3 id=\"block-title\" class=\"wp-block-heading\">Block Title<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Add a heading above the Image Grid.<\/p>\n\n\n\n<h3 id=\"number-of-columns\" class=\"wp-block-heading\">Number of Columns<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Choose how many images appear in each row.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Common options include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>2 columns<\/li>\n\n\n\n<li>3 columns<\/li>\n\n\n\n<li>4 columns<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">More columns allow more images to appear simultaneously, while fewer columns create larger image displays.<\/p>\n\n\n\n<h3 id=\"background-colour\" class=\"wp-block-heading\">Background Colour<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Most Image Grids support:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>White background<\/li>\n\n\n\n<li>Grey background<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Use background colours thoughtfully to help distinguish sections of a page.<\/p>\n\n\n\n<h3 id=\"block-width\" class=\"wp-block-heading\">Block Width<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Depending on your layout, width options may include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Default<\/li>\n\n\n\n<li>Large<\/li>\n\n\n\n<li>Maximum Width<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Wider layouts can create greater visual impact, especially on homepage and landing page designs.<\/p>\n\n\n\n<h3 id=\"grid-spacing\" class=\"wp-block-heading\">Grid Spacing<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Adjust the spacing between images.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Smaller gaps create a more compact appearance, while larger gaps give images more breathing room.<\/p>\n\n\n\n<h3 id=\"image-aspect-ratio\" class=\"wp-block-heading\">Image Aspect Ratio<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Choose how images should be cropped and displayed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Common options include:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Landscape<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Best for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Campus photography<\/li>\n\n\n\n<li>Group photos<\/li>\n\n\n\n<li>Event images<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Portrait<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Best for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>People photos<\/li>\n\n\n\n<li>Staff profiles<\/li>\n\n\n\n<li>Vertical imagery<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Square<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Best for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Balanced visual layouts<\/li>\n\n\n\n<li>Mixed image collections<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Using a consistent aspect ratio helps create a cleaner and more professional appearance.<\/p>\n\n\n\n<h2 id=\"reordering-images\" class=\"wp-block-heading\">Reordering Images<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The order of images can significantly affect how visitors experience the content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To reorder images:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select an image.<\/li>\n\n\n\n<li>Use the move controls.<\/li>\n\n\n\n<li>Arrange images in the desired sequence.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Consider placing the strongest or most important image first.<\/p>\n\n\n\n<h2 id=\"best-practices\" class=\"wp-block-heading\">Best Practices<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Use High-Quality Images<\/strong><br>Image Grids rely heavily on visual impact. Choose clear, professional images whenever possible.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Maintain a Consistent Style<\/strong><br>Images that share similar colours, lighting, and composition often produce stronger layouts.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Focus on a Single Theme<\/strong><br>The images in a grid should support a common message or topic.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Avoid Overcrowding<\/strong><br>Just because the block can hold many images doesn&#8217;t mean it should. A smaller number of strong images often creates a more effective presentation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong class=\"myprefix-text-bold\">Consider Mobile Devices<\/strong><br>Preview the grid on different screen sizes to ensure the layout remains effective.<\/p>\n\n\n\n<h2 id=\"image-grid-vs-gallery\" class=\"wp-block-heading\">Image Grid vs Gallery<\/h2>\n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n        \n    <div class=\"grid gap-6 mx-auto my-6 cu-column md:gap-10 md:grid-cols-2 md:my-10 first:mt-0\">\n        \n<div class=\"cu-column-content\">\n    \n\n<h3 id=\"use-an-image-grid-when\" class=\"wp-block-heading\">Use an Image Grid When:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Visual design is the primary goal.<\/li>\n\n\n\n<li>You are highlighting a small collection of important images.<\/li>\n\n\n\n<li>Images support a specific message or story.<\/li>\n<\/ul>\n\n\n<\/div>\n\n\n<div class=\"cu-column-content\">\n    \n\n<h3 id=\"use-a-gallery-when\" class=\"wp-block-heading\">Use a Gallery When:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You want to display a large collection of images.<\/li>\n\n\n\n<li>Browsing photographs is the primary goal.<\/li>\n\n\n\n<li>Image quantity is more important than layout.<\/li>\n<\/ul>\n\n\n<\/div>\n\n\n    <\/div>\n\n\n    <\/div>\n<\/section>\n\n\n\n<figure class=\"wp-block-embed alignwide is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio w-screen ml-offset-center cu-max-w-child-7xl px-4 md:px-6 lg:px-12\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"cutheme Mastery Training - Image Grid block\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/kBmHCHdf-Xs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n        \n    \n    <dl class=\"cu-description cu-component-updated\">\n        \n    <div class=\"grid pt-4 pb-3 border-b accordion border-cu-black-100 md:pt-6 md:pb-5 first:border-t\">\n        <dt class=\"font-semibold not-prose\">\n            <button class=\"flex items-center justify-between w-full text-left accordion__button\" aria-expanded=\"false\" aria-controls=\"accordion-transcript-image-grid\">\n                <span class=\"flex-1 ml-auto text-left break-words whitespace-normal cu-icon\">\n                    Transcript \u2013 Image Grid\n                <\/span>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" class=\"w-5 h-5 ml-auto transition-transform rotate-0 accordion__icon text-cu-black-500\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"><\/path>\n                <\/svg>\n            <\/button>\n        <\/dt>\n        <dd class=\"p-0 mt-0 cu-prose cu-prose-first-last accordion__content md:p-0 md:mt-0\" hidden=\"\" id=\"accordion-transcript-image-grid\">\n            \n\n<p class=\"wp-block-paragraph\">Welcome to this tutorial on mastering the Image Grid Block! In this video, we&#8217;ll guide you through creating a visually appealing image grid, which is perfect for showcasing three to five images.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s get started with a step-by-step guide:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Add the Image Grid<\/strong>&nbsp;using the Block Menu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next, you can add images by selecting a single item and then clicking on &#8220;Select Image&#8221; over here on the right.<br><strong>Note:<\/strong>&nbsp;The minimum recommended image size is 768 pixels wide.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once you\u2019ve added an image, you can customize it:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on the single item and use the block options on the right.<\/li>\n\n\n\n<li>You can change the relative position by moving the adjustment wheel.<\/li>\n\n\n\n<li>Enlarge the image or replace it by clicking the &#8220;Replace&#8221; button and choosing a different image.<\/li>\n\n\n\n<li>If needed, you can remove the image altogether.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">To add another image, click on another single item, select an image, and choose one from the media library.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After adding several images, you can:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Change their order using the arrow in the contextual menu to shift images from side to side.<\/li>\n\n\n\n<li>Select the entire block by clicking on the image at the top left of the contextual menu.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Now, let\u2019s explore the display options for the entire block:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Add a header:<\/strong>&nbsp;You can give the block a title or description.<\/li>\n\n\n\n<li><strong>Change the background color:<\/strong>&nbsp;Choose gray, white, or another option.<\/li>\n\n\n\n<li><strong>Control the number of columns:<\/strong>&nbsp;For example, here we have four columns. To add a fourth image, click on the blue plus sign at the bottom, then select an image from the media library.<\/li>\n\n\n\n<li><strong>Adjust the width:<\/strong>&nbsp;Options include default, large, or max width.<\/li>\n\n\n\n<li><strong>Customize spacing:<\/strong>&nbsp;Change the size, padding, or gap between images.<\/li>\n\n\n\n<li><strong>Choose the aspect ratio:<\/strong>&nbsp;Options include portrait, square, or the default landscape.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">There are many other configurations available. Explore the Block Library to discover additional ways to customize your Image Grid.<\/p>\n\n\n        <\/dd>\n    <\/div>\n\n\n    <\/dl>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"try-it-out\" class=\"wp-block-heading\">Try it Out<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add an Image Grid to a page.<\/li>\n\n\n\n<li>Add three to five images.<\/li>\n\n\n\n<li>Experiment with different column layouts.<\/li>\n\n\n\n<li>Change the image aspect ratio.<\/li>\n\n\n\n<li>Rearrange the images.<\/li>\n\n\n\n<li>Preview the page and review the visual impact of the layout.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Showcase curated collections of images using flexible grid layouts that add visual impact to your pages.<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1505,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_cu_dining_location_slug":"","footnotes":"","_links_to":"","_links_to_target":""},"cu_page_type":[68],"class_list":["post-4594","page","type-page","status-publish","hentry","cu_page_type-advanced-training-module-2"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/4594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=4594"}],"version-history":[{"count":4,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/4594\/revisions"}],"predecessor-version":[{"id":4641,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/4594\/revisions\/4641"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/1505"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=4594"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=4594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}