{"id":14815,"date":"2021-01-11T13:12:10","date_gmt":"2021-01-11T18:12:10","guid":{"rendered":"https:\/\/carleton.ca\/webservices\/?p=14815"},"modified":"2024-06-08T22:01:10","modified_gmt":"2024-06-09T02:01:10","slug":"tips-tricks-image-gallery","status":"publish","type":"post","link":"https:\/\/carleton.ca\/webservices\/2021\/tips-tricks-image-gallery\/","title":{"rendered":"Tips &#038; Tricks: Image Gallery"},"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                        Tips &#038; Tricks: Image Gallery\n                    <\/h1>\n                \n                                \n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n<p>This week&#8217;s tip is all about Image Galleries!<\/p>\n\n\n\n<p>Everyone knows you can add images to web pages, but did you know you can add an Image Gallery with a built-in image slideshow feature?<\/p>\n\n\n\n<p>Keep reading to learn more about this awesome feature available right now for CMS sites!<\/p>\n\n\n\n<h2 id=\"using-an-image-gallery-to-display-a-batch-of-photos\" class=\"wp-block-heading\">Using an Image Gallery to Display a Batch of Photos<\/h2>\n\n\n\n<p>Do you have a bunch of photos you want to display, but don&#8217;t want them to just be floating on a page?<\/p>\n\n\n\n<p>Using an image gallery will help you better display your images!<\/p>\n\n\n\n<p>The image gallery feature allows you to have an image slideshow on your page where users can click through images.<\/p>\n\n\n\n<p><strong>Here is an example of what an image gallery looks like:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"801\" src=\"https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Image-Gallery-e1585317874486.jpg\" alt=\"\" class=\"wp-image-14817\" srcset=\"https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Image-Gallery-e1585317874486.jpg 1080w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Image-Gallery-e1585317874486-512x380.jpg 512w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Image-Gallery-e1585317874486-1024x759.jpg 1024w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Image-Gallery-e1585317874486-320x237.jpg 320w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Image-Gallery-e1585317874486-768x570.jpg 768w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Image-Gallery-e1585317874486-360x267.jpg 360w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Image-Gallery-e1585317874486-200x148.jpg 200w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/figure>\n\n\n\n<p>Although the images look smaller when they are used in the image gallery, the gallery allows users to click on an image and it creates a slideshow.<\/p>\n\n\n\n<p><strong>Below is an example of how the gallery turns into an image slideshow:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1915\" height=\"837\" src=\"https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/gallery-2.jpg\" alt=\"\" class=\"wp-image-14818\" srcset=\"https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/gallery-2.jpg 1915w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/gallery-2-512x224.jpg 512w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/gallery-2-1024x448.jpg 1024w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/gallery-2-320x140.jpg 320w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/gallery-2-768x336.jpg 768w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/gallery-2-1536x671.jpg 1536w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/gallery-2-1600x700.jpg 1600w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/gallery-2-360x157.jpg 360w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/gallery-2-200x87.jpg 200w\" sizes=\"auto, (max-width: 1915px) 100vw, 1915px\" \/><\/figure>\n\n\n\n<p><strong>See an image gallery in action:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-3 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n\n\n\n\n\n<\/figure>\n\n\n\n<h2 id=\"advantages-of-using-image-galleries\" class=\"wp-block-heading\">Advantages of Using Image Galleries<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Lays out the images for you in a grid pattern so you don&#8217;t have to worry about formatting the images on the page<\/li>\n\n\n\n<li>Gives you the option to choose the order of the photos and gives an option to add a caption to an image<\/li>\n\n\n\n<li>Lets you better display a batch of images without taking up a lot of space and making your pages super long<\/li>\n\n\n\n<li>Allows users to see the images up close through the image slideshow<\/li>\n\n\n\n<li>You can take images right from the media library or you can upload your own, very simple process<\/li>\n<\/ol>\n\n\n\n<h2 id=\"how-to-create-an-image-gallery\" class=\"wp-block-heading\">How to Create an Image Gallery<\/h2>\n\n\n\n<p>To learn more about how to create an image gallery and insert it onto a page, <a href=\"https:\/\/carleton.ca\/webservices\/cms-help\/images\/#sect4\">click here<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This week&#8217;s tip is all about Image Galleries! Everyone knows you can add images to web pages, but did you know you can add an Image Gallery with a built-in image slideshow feature? Keep reading to learn more about this awesome feature available right now for CMS sites! Using an Image Gallery to Display a [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[276],"tags":[],"class_list":["post-14815","post","type-post","status-publish","format-standard","hentry","category-tips-and-tricks"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts\/14815","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/comments?post=14815"}],"version-history":[{"count":0,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts\/14815\/revisions"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/media?parent=14815"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/categories?post=14815"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/tags?post=14815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}