{"id":96340,"date":"2022-05-03T22:52:03","date_gmt":"2022-05-04T02:52:03","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=96340"},"modified":"2022-05-05T22:34:03","modified_gmt":"2022-05-06T02:34:03","slug":"photo-gallery-with-query-loop-block","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/","title":{"rendered":"How to Create a Photo Gallery Using the Query Loop Block"},"content":{"rendered":"<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/photo-gallery-query-loop-blk-1024x538.png\" alt=\"Create a Photo Gallery using the Query Loop block - article header image\" class=\"wp-image-96341\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/photo-gallery-query-loop-blk-1024x538.png 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/photo-gallery-query-loop-blk-300x158.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/photo-gallery-query-loop-blk-768x403.png 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/photo-gallery-query-loop-blk.png 1200w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>The query loop block can be used to make a gallery, but be aware that its primary purpose is to sort posts, not images.  The query loop block is one of the primary elements that the full site editing system is built on. <br><br>Using the filter option of the <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/query-loop-block\/\">query loop block<\/a> can be used to show specific content from a page or post. One very useful way to use this block is to create a display of post thumbnails in a gallery. This could be useful for image-heavy websites that need a unique solution to categorize project images and\/or photo portfolios in cases where an image or series of images are represented by the post\u2019s featured image.<br><br>The intent of the use of the query loop block to create a gallery is not to create the best photo gallery to display your art or photography.  It is simply to demonstrate the use of the query loop block to filter out specific content and display the set of images based on the featured image of each post.<\/p>\n\n\n\n<p>If you are searching for a good plugin or option to show artfully show images or a photo gallery, then please see the article:  <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/photo-gallery-and-slider-plugins-for-wordpress\/\">Free Gallery and Slider Plugins for WordPress<\/a>.<\/p>\n\n\n\n<p>In this tutorial, we will walk you through creating a photo gallery linking to blog posts using the query loop block.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#preparing\">Preparing Your Posts for the Gallery<\/a><\/li><li><a href=\"#creating\">Creating a Photo Gallery with the Query Loop Block<\/a><\/li><\/ul>\n\n\n\n<p>We are using WordPress version 5.9.3 and the Twenty Twenty-two theme.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"preparing\">Preparing Your Posts for the Gallery<\/h2>\n\n\n\n<p>Before you use the query loop block to display the posts in a photo gallery, you need to first make sure your posts are categorized and a featured image has been added to each post.\u00a0<\/p>\n\n\n\n<p>The featured image is what will be used for the thumbnails when the gallery is created by the query loop block. The category is needed for the query loop block to pull and organize the posts.\u00a0<br><\/p>\n\n\n\n<p class=\"alert alert-info\">The query loop block has a few options to display the posts that it filters.  These options are dependent on the featured image if you intend to display images per each post that are filtered.  The two options provided with the query loop block that display images allow you to stack the images or put them in a grid formation.  This tutorial uses the grid option. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Setting a Featured Image For Your Posts<\/h3>\n\n\n\n<p>The query block has several different ways of displaying filtered posts.\u00a0 It can create text-only lists or it can use thumbnails.\u00a0 In order to use the thumbnail, your post will require that you have added a featured image.\u00a0 Follow the steps below to add a featured image if needed:<\/p>\n\n\n\n<ol class=\"article_list wp-block-list\"><li>Click on <strong>Posts<\/strong> in the main menu, then click on <strong>All Posts<\/strong> to see your existing posts. If you\u2019re creating a new post, then the option for the featured image will appear in the right column under <em>Post<\/em> when you have the post title selected.\u00a0\u00a0<\/li><li>Select the post that you wish to edit.<\/li><li>When the post is opened, make sure you have the title selected and then go to the right column on the page.\u00a0 You need to be in the <em>Post<\/em> tab. Scroll down and click <strong>Set featured image<\/strong>.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"708\" class=\"wp-image-96342\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/select-featured-image.jpg\" alt=\"Set Featured Image\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/select-featured-image.jpg 1269w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/select-featured-image-300x213.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/select-featured-image-1024x725.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/select-featured-image-768x544.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li><li>Upload or select an image for the thumbnail graphic that will represent this post.\u00a0 You can select the existing image in your media library and WordPress will automatically create the thumbnail for you.\u00a0 Or, you can create an image that has the dimensions of 1200px X 628px image and upload it as your thumbnail.\u00a0\u00a0<\/li><li>Once you have the image uploaded or selected, click on <strong>Set Featured Image<\/strong>.<\/li><li>Lastly, you will still need to save the post with the change.\u00a0 Click on <strong>Update<\/strong> or <strong>Publish<\/strong> in the top right corner of the screen.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"708\" class=\"wp-image-96343\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/save-changes-featured-image.jpg\" alt=\"Save selected featured image\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/save-changes-featured-image.jpg 1269w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/save-changes-featured-image-300x213.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/save-changes-featured-image-1024x725.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/save-changes-featured-image-768x544.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><br><br><\/li><\/ol>\n\n\n\n<p>Once your image is categorized and you have a featured image, then you\u2019re ready to move on to creating the gallery using the query loop block.<br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adding Your Posts to a Category<\/h3>\n\n\n\n<p>There are several ways to add a post to a category.\u00a0 You can use <strong>Quick Edit<\/strong>, the <strong>Categories<\/strong> section in the administrator, or you can use the visual editor when you\u2019re creating or editing your post.<br><br><strong>Use Quick Edit to Add Your Post to a Category<\/strong><\/p>\n\n\n\n<ol class=\"article_list wp-block-list\"><li><a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/logging-into-wordpress-dashboard\/\">Log in to your WordPress Dashboard<\/a>.<\/li><li>In the main menu, click on <strong>Posts<\/strong>, then <strong>All Posts<\/strong>.<\/li><li>WordPress allows you to organize content using a category. When you\u2019re looking at the list of posts that you have already created, you can hover over a title and use the <strong>Quick Edit<\/strong> option to add that post to an existing category.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"440\" class=\"wp-image-96344\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/use-quick-edit-categorize.jpg\" alt=\"Use Quick Edit to Categorize\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/use-quick-edit-categorize.jpg 1508w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/use-quick-edit-categorize-300x132.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/use-quick-edit-categorize-1024x451.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/use-quick-edit-categorize-768x338.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><br><br><\/li><li>Once you have the post categorized, click on the blue <strong>Update<\/strong> button in the bottom right corner of the quick edit window to save your changes.<\/li><\/ol>\n\n\n\n<p><br><br><strong>Use Categories to Add Your Post to a Category<\/strong><br><br>If you don\u2019t have an appropriate category, then you can also create one using <strong>Categories<\/strong> under <strong>Posts<\/strong> in the main menu.\u00a0 You will need to name the category, add a slug (URL-friendly version of the name), select a parent category (optional), add a description, and save the category by clicking the <strong>Add New<\/strong> button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"499\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/image-1024x499.jpeg\" alt=\"\" class=\"wp-image-96381\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/image-1024x499.jpeg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/image-300x146.jpeg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/image-768x374.jpeg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/image.jpeg 1394w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p><strong>Use the Visual Editor to Add Your Post to a Category<\/strong><\/p>\n\n\n\n<p>When you\u2019re editing or creating your post with the visual editor you can also add it to a category.<\/p>\n\n\n\n<ol class=\"article_list wp-block-list\"><li>Click on the title of your post.<\/li><li>In the column at the right, click on the <strong>gear icon<\/strong> in the top right corner if you don\u2019t see the <strong>Settings<\/strong> column.\u00a0 Click on <strong>Post<\/strong> to see the post settings.<\/li><li>Scroll down to Categories.\u00a0 Add your post to an existing category or create a new one.<br><\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"483\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/image-1-1024x483.jpeg\" alt=\"\" class=\"wp-image-96382\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/image-1-1024x483.jpeg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/image-1-300x141.jpeg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/image-1-768x362.jpeg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/image-1-1536x724.jpeg 1536w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/image-1.jpeg 1600w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\"><li>Save your changes by clicking on <strong>Save Draft<\/strong>,\u00a0 <strong>Update,<\/strong> or <strong>Publish<\/strong> in the top right corner.<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"creating\">Creating a Photo Gallery with the Query Loop Block<\/h2>\n\n\n\n<ol class=\"article_list wp-block-list\"><li>Once you\u2019ve <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/create-edit-pages-posts-wordpress\/\">created posts<\/a> with your photos and set the category and featured images for each, it\u2019s time to add the query loop photo gallery to a page. In the WordPress Dashboard, click on <strong>Pages<\/strong>, then <strong>Add New or choose an existing page <\/strong>(like your homepage).\u00a0<\/li><li>Add a <strong>query loop block<\/strong>. Then click on <strong>Choose<\/strong>.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"472\" class=\"wp-image-96383\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/add-query-loop-block.jpg\" alt=\"Select Query Loop block\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/add-query-loop-block.jpg 1920w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/add-query-loop-block-300x142.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/add-query-loop-block-1024x483.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/add-query-loop-block-768x362.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/add-query-loop-block-1536x725.jpg 1536w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><br>Note that there are various visual styles on the left that can be selected for the query loop block.\u00a0 This tutorial is using the default setting.<\/li><li>In the column for the block settings to the right of the page, scroll down and set up the query loop block to filter out the category that you want to display on that page.\u00a0 In this case, we have selected \u201cFlowers.\u201d<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"472\" class=\"wp-image-96384\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/set-query-loop-filter.jpg\" alt=\"Set query loop filter\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/set-query-loop-filter.jpg 1920w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/set-query-loop-filter-300x142.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/set-query-loop-filter-1024x483.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/set-query-loop-filter-768x362.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/set-query-loop-filter-1536x725.jpg 1536w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li><li>In the toolbar above the title of the post is an option for grid view.\u00a0 Then, in the block settings at the right scroll down and look for <strong>Columns<\/strong>.\u00a0 We have chosen 2 columns for this gallery for a symmetrical configuration.<\/li><li><strong>Publish or Update<\/strong> your page in the top right corner.<\/li><\/ol>\n\n\n\n<p>You\u2019ve completed creating a gallery with the query loop block!<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"483\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/flower-gallery-final-1024x483.jpg\" alt=\"\" class=\"wp-image-96385\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/flower-gallery-final-1024x483.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/flower-gallery-final-300x142.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/flower-gallery-final-768x362.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/flower-gallery-final-1536x725.jpg 1536w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/flower-gallery-final.jpg 1920w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>The query loop block can be used for much more than just creating a gallery, but I hope this helps to give you a useful example of how you can use the block in your WordPress site.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The query loop block can be used to make a gallery, but be aware that its primary purpose is to sort posts, not images. The query loop block is one of the primary elements that the full site editing system is built on. Using the filter option of the query loop block can be used<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/\"> Read More ><\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4532],"tags":[],"class_list":["post-96340","post","type-post","status-publish","format-standard","hentry","category-full-site-editing"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Create a Photo Gallery Using the Query Loop Block | InMotion Hosting<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Photo Gallery Using the Query Loop Block | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"The query loop block can be used to make a gallery, but be aware that its primary purpose is to sort posts, not images. The query loop block is one of the primary elements that the full site editing system is built on. Using the filter option of the query loop block can be used Read More &gt;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-04T02:52:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-06T02:34:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/photo-gallery-query-loop-blk-1024x538.png\" \/>\n<meta name=\"author\" content=\"InMotion Hosting Contributor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InMotion Hosting Contributor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b\"},\"headline\":\"How to Create a Photo Gallery Using the Query Loop Block\",\"datePublished\":\"2022-05-04T02:52:03+00:00\",\"dateModified\":\"2022-05-06T02:34:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/\"},\"wordCount\":1233,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/photo-gallery-query-loop-blk-1024x538.png\",\"articleSection\":[\"Full Site Editing\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/\",\"name\":\"How to Create a Photo Gallery Using the Query Loop Block | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/photo-gallery-query-loop-blk-1024x538.png\",\"datePublished\":\"2022-05-04T02:52:03+00:00\",\"dateModified\":\"2022-05-06T02:34:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/photo-gallery-query-loop-blk.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/photo-gallery-query-loop-blk.png\",\"width\":1200,\"height\":630,\"caption\":\"How to Create a Photo Gallery with the Query Loop Block\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Photo Gallery Using the Query Loop Block\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b\",\"name\":\"InMotion Hosting Contributor\",\"description\":\"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!\",\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/inmotion-hosting\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting\"],\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/arn\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a Photo Gallery Using the Query Loop Block | InMotion Hosting","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Photo Gallery Using the Query Loop Block | InMotion Hosting","og_description":"The query loop block can be used to make a gallery, but be aware that its primary purpose is to sort posts, not images. The query loop block is one of the primary elements that the full site editing system is built on. Using the filter option of the query loop block can be used Read More >","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2022-05-04T02:52:03+00:00","article_modified_time":"2022-05-06T02:34:03+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/photo-gallery-query-loop-blk-1024x538.png","type":"","width":"","height":""}],"author":"InMotion Hosting Contributor","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"InMotion Hosting Contributor","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b"},"headline":"How to Create a Photo Gallery Using the Query Loop Block","datePublished":"2022-05-04T02:52:03+00:00","dateModified":"2022-05-06T02:34:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/"},"wordCount":1233,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/photo-gallery-query-loop-blk-1024x538.png","articleSection":["Full Site Editing"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/","name":"How to Create a Photo Gallery Using the Query Loop Block | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/photo-gallery-query-loop-blk-1024x538.png","datePublished":"2022-05-04T02:52:03+00:00","dateModified":"2022-05-06T02:34:03+00:00","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/photo-gallery-query-loop-blk.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/05\/photo-gallery-query-loop-blk.png","width":1200,"height":630,"caption":"How to Create a Photo Gallery with the Query Loop Block"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/photo-gallery-with-query-loop-block\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to Create a Photo Gallery Using the Query Loop Block"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b","name":"InMotion Hosting Contributor","description":"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!","sameAs":["https:\/\/www.linkedin.com\/company\/inmotion-hosting\/","https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/arn\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/96340","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=96340"}],"version-history":[{"count":2,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/96340\/revisions"}],"predecessor-version":[{"id":96476,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/96340\/revisions\/96476"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=96340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=96340"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=96340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}