{"id":53447,"date":"2012-02-21T10:21:28","date_gmt":"2012-02-21T15:21:28","guid":{"rendered":"http:\/\/www.bu.edu\/tech\/?page_id=53447"},"modified":"2013-12-06T15:12:10","modified_gmt":"2013-12-06T20:12:10","slug":"image-gallery","status":"publish","type":"page","link":"https:\/\/www.bu.edu\/tech\/services\/cccs\/websites\/www\/wordpress\/how-to\/image-gallery\/","title":{"rendered":"Add an Image Gallery"},"content":{"rendered":"<h2>Add an Image Gallery<\/h2>\n<p>Galleries display multiple images together in an appealing layout without having to manually arrange the images on the page.\u00a0 Galleries can be added to Pages or Posts.<\/p>\n<ul>\n<li><a href=\"#one\">Upload an Image<\/a><\/li>\n<li><a href=\"#two\">Insert an Image from the Media Library<\/a><\/li>\n<li><a href=\"#three\">Attach Images Directly from the Media Library<\/a><\/li>\n<li><a href=\"#four\">Add Captions<\/a><\/li>\n<li><a href=\"#five\">Add a Gallery<\/a><\/li>\n<\/ul>\n<p><img loading=\"lazy\" width=\"636\" height=\"401\" src=\"\/tech\/files\/2013\/10\/gallery_example-636x401.png\" alt=\"gallery_example\" title=\"gallery_example\" class=\"alignnone size-medium wp-image-71616\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2013\/10\/gallery_example-636x401.png 636w, https:\/\/www.bu.edu\/tech\/files\/2013\/10\/gallery_example.png 901w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/p>\n<h2><a name=\"one\"><\/a>Upload an Image<\/h2>\n<p>Click the <b>Add Media<\/b> button above the content editor and upload your image, which you can do by either dragging and dropping the image, or browsing to the location on your hard drive. You do not have to actually insert the image into the content; it will be attached as soon as it finished uploading (click <b>Save All Changes<\/b> to close the dialog without inserting the image).<\/p>\n<p><img loading=\"lazy\" width=\"636\" height=\"206\" class=\"alignnone size-medium wp-image-71607\" title=\"gallery_screenshot1\" alt=\"gallery_screenshot1\" src=\"\/tech\/files\/2013\/10\/gallery_screenshot1-636x206.png\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2013\/10\/gallery_screenshot1-636x206.png 636w, https:\/\/www.bu.edu\/tech\/files\/2013\/10\/gallery_screenshot1.png 889w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/p>\n<h2><a name=\"two\"><\/a>Insert an Image from the Media Library<\/h2>\n<p>Click the <b>Add Media<\/b> button above the content editor and insert an existing image from the <strong>Media Library <\/strong>tab.<\/p>\n<p><img loading=\"lazy\" width=\"636\" height=\"309\" class=\"alignnone size-medium wp-image-71613\" title=\"gallery_screenshot6\" alt=\"gallery_screenshot6\" src=\"\/tech\/files\/2013\/10\/gallery_screenshot6-636x309.png\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2013\/10\/gallery_screenshot6-636x309.png 636w, https:\/\/www.bu.edu\/tech\/files\/2013\/10\/gallery_screenshot6-1024x498.png 1024w, https:\/\/www.bu.edu\/tech\/files\/2013\/10\/gallery_screenshot6.png 1299w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/p>\n<h2><a name=\"three\"><\/a>Attach Images Directly from the Media Library<\/h2>\n<p>In the Media Library you can see what page an image is attached to. If you upload an image directly to the Media Library, it will display as \u201cUnattached,\u201d with a link to attach it to the page or post of your choice.<\/p>\n<p><img loading=\"lazy\" width=\"636\" height=\"123\" class=\"alignnone size-medium wp-image-71608\" title=\"gallery_screenshot2\" alt=\"gallery_screenshot2\" src=\"\/tech\/files\/2013\/10\/gallery_screenshot2-636x123.png\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2013\/10\/gallery_screenshot2-636x123.png 636w, https:\/\/www.bu.edu\/tech\/files\/2013\/10\/gallery_screenshot2-1024x198.png 1024w, https:\/\/www.bu.edu\/tech\/files\/2013\/10\/gallery_screenshot2.png 1184w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/p>\n<h2><a name=\"four\"><\/a>Add Captions<\/h2>\n<p>However you add your images, you can choose to add a caption to each image when editing its details. These captions will appear in the gallery and the Media Library.<\/p>\n<p><img loading=\"lazy\" width=\"636\" height=\"309\" class=\"alignnone size-medium wp-image-71609\" title=\"gallery_screenshot3\" alt=\"gallery_screenshot3\" src=\"\/tech\/files\/2013\/10\/gallery_screenshot3-636x309.png\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2013\/10\/gallery_screenshot3-636x309.png 636w, https:\/\/www.bu.edu\/tech\/files\/2013\/10\/gallery_screenshot3-1024x498.png 1024w, https:\/\/www.bu.edu\/tech\/files\/2013\/10\/gallery_screenshot3.png 1309w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/p>\n<h2><a name=\"five\"><\/a>Add a Gallery<\/h2>\n<p>Click the <b>Add Media <\/b>button above the content editor and select <b>Create Gallery<\/b> on the left panel. Select all images you want in the gallery (note: you can edit captions and other options on the right panel when you select an image. Edits to captions and options will also be saved in the <strong>Media Library<\/strong>.<strong><\/strong>) and click <b>Create a new gallery<\/b>.<\/p>\n<p><img loading=\"lazy\" width=\"636\" height=\"310\" class=\"alignnone size-medium wp-image-71610\" title=\"gallery_screenshot4\" alt=\"gallery_screenshot4\" src=\"\/tech\/files\/2013\/10\/gallery_screenshot4-636x310.png\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2013\/10\/gallery_screenshot4-636x310.png 636w, https:\/\/www.bu.edu\/tech\/files\/2013\/10\/gallery_screenshot4-1024x499.png 1024w, https:\/\/www.bu.edu\/tech\/files\/2013\/10\/gallery_screenshot4.png 1301w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/p>\n<p>You will then be able to specify specific gallery settings, as well as add images to or edit the gallery. \u00a0The settings include:<\/p>\n<ul>\n<li>Link to: You may link to the attachment page, a media file, or nothing<\/li>\n<li>Columns: Specifies the number of columns in the gallery<\/li>\n<li>Random Order: Check if you want your images sorted in a random order<\/li>\n<\/ul>\n<p>At this screen, you can also drag and drop your images to sort them manually.<\/p>\n<p><img loading=\"lazy\" width=\"636\" height=\"311\" class=\"alignnone size-medium wp-image-71611\" title=\"gallery_screenshot5\" alt=\"gallery_screenshot5\" src=\"\/tech\/files\/2013\/10\/gallery_screenshot5-636x311.png\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2013\/10\/gallery_screenshot5-636x311.png 636w, https:\/\/www.bu.edu\/tech\/files\/2013\/10\/gallery_screenshot5-1024x502.png 1024w, https:\/\/www.bu.edu\/tech\/files\/2013\/10\/gallery_screenshot5.png 1303w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/p>\n<p>When you are finished with these settings, click <b>Insert Gallery<\/b> to add the gallery to your page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Add an Image Gallery Galleries display multiple images together in an appealing layout without having to manually arrange the images on the page.\u00a0 Galleries can be added to Pages or Posts. Upload an Image Insert an Image from the Media Library Attach Images Directly from the Media Library Add Captions Add a Gallery Upload an&#8230;<\/p>\n","protected":false},"author":5434,"featured_media":0,"parent":304,"menu_order":53,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/53447"}],"collection":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/users\/5434"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/comments?post=53447"}],"version-history":[{"count":33,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/53447\/revisions"}],"predecessor-version":[{"id":53487,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/53447\/revisions\/53487"}],"up":[{"embeddable":true,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/304"}],"wp:attachment":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/media?parent=53447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}