This site shows examples of different ways of presenting lists of posts (or pages). You can use it in editing posts or in your page templates with the Site Editor.
Each of the pages in this blog shows a different way of listing the same set of posts with the Query Loop block.
This page uses the Query Loop block to list the pages. The image on the left is the featured image of the page. The Title & text on the right comes from the title & the excerpt of the page.
-
Standard Blog
This page just shows the standard way the site theme shows lists of post. It will show on the home page or page that has been set to show latest posts if you are using a static home page. The Query Loop is in the page template. You can use the site editor to change…
-
Title & Date only
This is a very simple display of the titles and date of the posts. The Query loop is set to show 3 posts on a page. The fonts and styles have been left as standard.
-
Full Width Grid
Here we have inserted the Query Loop set the view of the template to grid and the width of the Query Loop block to full screen.
-
Full Width Grid No Space
The Post Template is reduced to just show the featured image. padding and margins have been removed. The Query Loop is set to show full width. 6 items per page. You can see there is a problem when a post has no featured image. The images are set to link to the posts.
-
Full Width Grid Covers
On this page we have edited the query loop, removed the Featured image and added a cover image showing the featured image. We have add the Title & date inside the cover block. We grouped the cover block and added a background image to the group. This shows up if there is no featured image.
-
Two Query Loops
This page has to query loops the first showing 2 posts, the second showing the rest but with smaller images and 4 in a row.
-
Magazine Grid with Featured Images
This one was pasted in from Magazine Grid with Featured Images – Block Pattern – WordPress.org/ WordPress.org has a whole set of patterns you can copy and paste into a Glow Blog. On this page we added rounded corners to the cover blocks. There are 3 Query Loops on this page.
-
Full Width Grid Covers with CSS
On this page we have edited the query loop, removed the Featured image and added a cover block showing the featured image. We have add the Title & date inside the cover block. We grouped the cover block and added a background image to the group. This shows up if there is no featured image.…
-
Grid Covers with CSS
This makes the whole image a link, not just the text. On this page we have edited the query loop, removed the Featured image and added a cover block showing the featured image. We have add the Title & date inside the cover block. We grouped the cover block and added a background image to…
