{"id":668,"date":"2020-05-27T17:16:07","date_gmt":"2020-05-27T17:16:07","guid":{"rendered":"https:\/\/university-communications.ncsu.edu\/documentation\/?page_id=668"},"modified":"2024-12-11T16:51:33","modified_gmt":"2024-12-11T21:51:33","slug":"image-grid-block","status":"publish","type":"reference-article","link":"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/image-grid-block\/","title":{"rendered":"Image Grid Block"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>This block allows you to display images in a grid format of one image across or two images side-by-side. You can add as many rows of images as you\u2019d like.<\/p>\n\n\n\n<p>It is a good way to show a lot of prominent photography. The images within the Image Grid block can also become part of a gallery that users can swipe through.<\/p>\n\n\n\n<p>Below is an example of one possible Image Grid configuration.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/image-grid-example.jpg\" data-fullsize=\"1138x1218\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"957\" height=\"1024\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/image-grid-example-957x1024.jpg\" alt=\"\" class=\"wp-image-675\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/image-grid-example-957x1024.jpg 957w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/image-grid-example-280x300.jpg 280w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/image-grid-example-768x822.jpg 768w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/image-grid-example.jpg 1138w\" sizes=\"auto, (max-width: 957px) 100vw, 957px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Alternative Blocks<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/image-block\/\">Image block<\/a>: The standard image block can be used to pace a story and provide natural separation between different story sections.<\/li><li><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/thumbnail-gallery-block\/\">Thumbnail Gallery block<\/a>: This block allows you to create a traditional photo gallery. A grid of thumbnails are displayed and the user can click on a thumbnail to enlarge and swipe through the gallery.<\/li><li><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/video-image-block\/\">Video Image block<\/a>: You can add video by embedding a YouTube video using the Video Image block. This block allows you to select a still image to use ad the video\u2019s cover image.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Need help?<\/h2>\n\n\n\n<p>Have questions? Feel free to reach out with any questions or concerns at\u00a0<a href=\"http:\/\/go.ncsu.edu\/ucomm-dev-request\">go.ncsu.edu\/ucomm-dev-request<\/a>.<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false,"ncst_custom_author":"","ncst_show_custom_author":false,"ncst_dynamicHeaderBlockName":"ncst\/default-header","ncst_dynamicHeaderData":"{\"pageIntro\":\"This block allows you to create a grid of images that can be included enlarged and included in a gallery.\"}","ncst_content_audit_freq":"","ncst_content_audit_date":"","ncst_content_audit_display":false,"ncst_backToTopFlag":"","_links_to":"","_links_to_target":""},"availability":[],"content-type":[51],"class_list":["post-668","reference-article","type-reference-article","status-publish","hentry","content-type-block"],"acf":[],"_links":{"self":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/668","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article"}],"about":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/types\/reference-article"}],"version-history":[{"count":5,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/668\/revisions"}],"predecessor-version":[{"id":38247,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/668\/revisions\/38247"}],"wp:attachment":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=668"}],"wp:term":[{"taxonomy":"availability","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/availability?post=668"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/content-type?post=668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}