{"id":3388,"date":"2024-04-09T18:53:20","date_gmt":"2024-04-09T22:53:20","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/?p=3388"},"modified":"2024-05-16T18:55:01","modified_gmt":"2024-05-16T22:55:01","slug":"collections-in-eleventy","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/collections-in-eleventy\/","title":{"rendered":"Collections in Eleventy"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">There are a few ways that you can generate lists of pages in 11ty. Eleventy has a concept called <strong>Collections<\/strong> that are a group of content. This post looks at how to show pages in a collection. That collection can be based on tags, custom front-matter variables, and a listing all of the files in a folder.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction to Templates and Collections<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This video walks through what Templates are and what Collections are and how you can use them together to dynamic lists of pages, galleries and more.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.dropbox.com\/scl\/fi\/c2ma6lccbgjue38trbfud\/11ty-collection-templates-intro.mp4?rlkey=qbl793289gsk8nnfoapf3owvm&amp;dl=0\" target=\"_blank\" rel=\"noreferrer noopener\">Link to Dropbox video with closed captioning<\/a>. Same video embedded below.<\/p>\n\n\n\n<figure class=\"wp-block-video alignfull\"><video controls src=\"https:\/\/www.dropbox.com\/scl\/fi\/c2ma6lccbgjue38trbfud\/11ty-collection-templates-intro.mp4?rlkey=qbl793289gsk8nnfoapf3owvm&amp;raw=1\"><\/video><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Miro Boards<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here are two Miro boards that I will use in videos and in class to help explain how Collections and Templates work.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/miro.com\/app\/board\/uXjVOBXwxKc=\/?share_link_id=352773757495\" target=\"_blank\" rel=\"noreferrer noopener\">Templates and Collections<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/miro.com\/app\/board\/o9J_lHqO0FA=\/?share_link_id=376713172225\" target=\"_blank\" rel=\"noreferrer noopener\">Eleventy Collections<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Collections Example<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This video walks through the Collections Example List all pages with a tag<\/p>\n\n\n\n<figure class=\"wp-block-video alignwide\"><video controls src=\"https:\/\/www.dropbox.com\/scl\/fi\/xanwjtg9anr3jf6u0q1b0\/List-Pages-Collection-Tag.mp4?rlkey=qcly10ig0rs640yyj1th56lkd&amp;raw=1\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can follow along with the video by using the <a href=\"https:\/\/github.com\/profstein\/collections-example\" target=\"_blank\" rel=\"noreferrer noopener\">collections-example<\/a> repository, the video above and the instructions below.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click on the link for the repo: <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/profstein\/collections-example\" target=\"_blank\">https:\/\/github.com\/profstein\/collections-example<\/a><\/li>\n\n\n\n<li>Click <strong>Use this template<\/strong><\/li>\n\n\n\n<li>Go through the steps to create your version of the repository<\/li>\n\n\n\n<li>Open a Codespace for your repository<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">List all pages with a tag<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">By default 11ty creates a collection for each tag on a page. You can use this to tell it to go through that collection and then show all of the pages that have a tag.<\/p>\n\n\n\n<details class=\"wp-block-stackable-accordion stk-block-accordion stk-inner-blocks stk-block-content stk-block stk-28b0117\" data-block-id=\"28b0117\">\n<summary class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-b820b6e stk--container-small stk-block-accordion__heading\" data-v=\"4\" data-block-id=\"b820b6e\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-b820b6e-container stk-hover-parent\"><div class=\"stk-block-content stk-inner-blocks stk-b820b6e-inner-blocks\">\n<div class=\"wp-block-stackable-icon-label stk-block-icon-label stk-block stk-48890a6\" data-block-id=\"48890a6\"><div class=\"stk-row stk-inner-blocks stk-block-content\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-c440382\" id=\"example-code-list-pages-by-tag\" data-block-id=\"c440382\"><h4 class=\"stk-block-heading__text stk-block-heading--use-theme-margins\">Example Code: List pages by tag<\/h4><\/div>\n\n\n\n<div class=\"wp-block-stackable-icon stk-block-icon stk-block stk-9b08950\" data-block-id=\"9b08950\"><span class=\"stk--svg-wrapper\"><div class=\"stk--inner-svg\"><svg style=\"height:0;width:0\"><defs><linearGradient id=\"linear-gradient-9b08950\" x1=\"0\" x2=\"100%\" y1=\"0\" y2=\"0\"><stop offset=\"0%\" style=\"stop-opacity:1;stop-color:var(--linear-gradient-9-b-08950-color-1)\"><\/stop><stop offset=\"100%\" style=\"stop-opacity:1;stop-color:var(--linear-gradient-9-b-08950-color-2)\"><\/stop><\/linearGradient><\/defs><\/svg><svg data-prefix=\"fas\" data-icon=\"chevron-down\" class=\"svg-inline--fa fa-chevron-down fa-w-14\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 448 512\" aria-hidden=\"true\" width=\"32\" height=\"32\"><path fill=\"currentColor\" d=\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\"><\/path><\/svg><\/div><\/span><\/div>\n<\/div><\/div>\n<\/div><\/div><\/summary>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-9574528 stk-block-accordion__content\" data-v=\"4\" data-block-id=\"9574528\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-9574528-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-9574528-inner-blocks\">\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-34b8345\" data-block-id=\"34b8345\"><p class=\"stk-block-text__text\">First you must add a tag to pages in their front matter. For example you might create <strong>post.md<\/strong> and put this front-matter in<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-2590fe0\" data-block-id=\"2590fe0\"><p class=\"stk-block-text__text\"><\/p><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>---\ntitle: Post 1\nlayout: post.njk\ntags: &#91;post, othertag]\n---<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Then you can add this same tag in front-matter of other pages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">List Pages with &#8220;post&#8221; tag<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Next we will create the list of posts. This can be wherever you want. In this example we will create a blog.md file and put this in to list the pages:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ul&gt;\n  {%- for post in collections.post %}\n  &lt;li&gt;\n  &lt;a href=\"{{ post.url }}\"&gt;\n  {{ post.data.title }}\n  &lt;\/a&gt;\n  &lt;\/li&gt;\n  {%- endfor %}\n&lt;\/ul&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Note: <\/strong>To list posts with a different tag, you would change what collection you were using in the For Loop. For example to list posts with a banana tag:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{%- for post in collections.<strong>banana<\/strong> %}<\/code><\/pre>\n<\/div><\/div><\/div>\n<\/details>\n\n\n\n<h2 class=\"wp-block-heading\">List pages with custom front-matter<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The video below walks through the two custom front-matter examples below. Before you do this, you will need to have created the <strong>collections example <\/strong>repository as instructed above.<\/p>\n\n\n\n<figure class=\"wp-block-video alignfull\"><video controls src=\"https:\/\/www.dropbox.com\/scl\/fi\/nklmmszdl6zh1l2cto6p6\/List-Pages-CustomFrontMatter.mp4?rlkey=12vfe14pywk310xaj71pqtx12&amp;raw=1\"><\/video><\/figure>\n\n\n\n<details class=\"wp-block-stackable-accordion stk-block-accordion stk-inner-blocks stk-block-content stk-block stk-761c8e3\" data-block-id=\"761c8e3\">\n<summary class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-e2cc482 stk--container-small stk-block-accordion__heading\" data-v=\"4\" data-block-id=\"e2cc482\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-e2cc482-container stk-hover-parent\"><div class=\"stk-block-content stk-inner-blocks stk-e2cc482-inner-blocks\">\n<div class=\"wp-block-stackable-icon-label stk-block-icon-label stk-block stk-4b66ed8\" data-block-id=\"4b66ed8\"><div class=\"stk-row stk-inner-blocks stk-block-content\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-539ead2\" id=\"example-code-list-all-pages-by-author-of-the-current-page\" data-block-id=\"539ead2\"><h4 class=\"stk-block-heading__text stk-block-heading--use-theme-margins\">Example Code: List all pages by author of the current page<\/h4><\/div>\n\n\n\n<div class=\"wp-block-stackable-icon stk-block-icon stk-block stk-381c0ba\" data-block-id=\"381c0ba\"><span class=\"stk--svg-wrapper\"><div class=\"stk--inner-svg\"><svg style=\"height:0;width:0\"><defs><linearGradient id=\"linear-gradient-381c0ba\" x1=\"0\" x2=\"100%\" y1=\"0\" y2=\"0\"><stop offset=\"0%\" style=\"stop-opacity:1;stop-color:var(--linear-gradient-381-c-0-ba-color-1)\"><\/stop><stop offset=\"100%\" style=\"stop-opacity:1;stop-color:var(--linear-gradient-381-c-0-ba-color-2)\"><\/stop><\/linearGradient><\/defs><\/svg><svg data-prefix=\"fas\" data-icon=\"chevron-down\" class=\"svg-inline--fa fa-chevron-down fa-w-14\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 448 512\" aria-hidden=\"true\" width=\"32\" height=\"32\"><path fill=\"currentColor\" d=\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\"><\/path><\/svg><\/div><\/span><\/div>\n<\/div><\/div>\n<\/div><\/div><\/summary>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-6d6918e stk-block-accordion__content\" data-v=\"4\" data-block-id=\"6d6918e\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-6d6918e-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-6d6918e-inner-blocks\">\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-f5ed19e\" data-block-id=\"f5ed19e\"><p class=\"stk-block-text__text\">In this example, we are going to list other posts by the author of the current page.  In order to do it we will first need to add author information to the front matter of our posts, then we will write some Nunjucks code to look at all of our posts and pull out those with the same author as the current page.<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-e9b072b\" data-block-id=\"e9b072b\"><p class=\"stk-block-text__text\">First you must add the <strong>custom front matter<\/strong>. For example you might create <strong>post.md<\/strong> and put this front-matter to track the author<\/p><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>---\ntitle: Post 2\nlayout: post.njk\ntags: &#91;post, sand, breeze, sea, sun]\nauthor: Author 2\nlocation: aruba\n---<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Then you would add this same author variable to other posts. by that Author<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">List Pages with a specific author value<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Next we will create the list of posts for an author. The trick here is adding the if statement to check for posts with the author value we want.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This code would go on the post page wherever you want the list of posts to show up. You could also place it in a special post template so that it would automatically show up on all posts that use the template. <\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block alignwide code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;HTML+Nunjucks&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;hasCustomCSS&quot;:false,&quot;customCSS&quot;:&quot;&quot;,&quot;otterConditions&quot;:[],&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;p&gt;Posts by {{author}}&lt;\/p&gt;\n&lt;ul role=&quot;list&quot;&gt;\n{% for post in collections.post %}\n    {% if author === post.data.author %}\n    &lt;li&gt;\n        &lt;a href=&quot;{{ post.url }}&quot;&gt;\n            {{ post.data.title }}\n        &lt;\/a&gt;\n    &lt;\/li&gt;\n    {% endif %}\n{%- endfor %}\n&lt;\/ul&gt;<\/pre><\/div>\n<\/div><\/div><\/div>\n<\/details>\n\n\n\n<details class=\"wp-block-stackable-accordion stk-block-accordion stk-inner-blocks stk-block-content stk-block stk-174956f\" data-block-id=\"174956f\">\n<summary class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-e5cb897 stk--container-small stk-block-accordion__heading\" data-v=\"4\" data-block-id=\"e5cb897\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-e5cb897-container stk-hover-parent\"><div class=\"stk-block-content stk-inner-blocks stk-e5cb897-inner-blocks\">\n<div class=\"wp-block-stackable-icon-label stk-block-icon-label stk-block stk-e2e30f6\" data-block-id=\"e2e30f6\"><div class=\"stk-row stk-inner-blocks stk-block-content\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-38bef2c\" id=\"example-code-list-all-pages-by-a-specific-author\" data-block-id=\"38bef2c\"><h4 class=\"stk-block-heading__text stk-block-heading--use-theme-margins\">Example Code: List all pages by a specific author<\/h4><\/div>\n\n\n\n<div class=\"wp-block-stackable-icon stk-block-icon stk-block stk-93a3f9e\" data-block-id=\"93a3f9e\"><span class=\"stk--svg-wrapper\"><div class=\"stk--inner-svg\"><svg style=\"height:0;width:0\"><defs><linearGradient id=\"linear-gradient-93a3f9e\" x1=\"0\" x2=\"100%\" y1=\"0\" y2=\"0\"><stop offset=\"0%\" style=\"stop-opacity:1;stop-color:var(--linear-gradient-93-a-3-f-9-e-color-1)\"><\/stop><stop offset=\"100%\" style=\"stop-opacity:1;stop-color:var(--linear-gradient-93-a-3-f-9-e-color-2)\"><\/stop><\/linearGradient><\/defs><\/svg><svg data-prefix=\"fas\" data-icon=\"chevron-down\" class=\"svg-inline--fa fa-chevron-down fa-w-14\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 448 512\" aria-hidden=\"true\" width=\"32\" height=\"32\"><path fill=\"currentColor\" d=\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\"><\/path><\/svg><\/div><\/span><\/div>\n<\/div><\/div>\n<\/div><\/div><\/summary>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-799d7d3 stk-block-accordion__content\" data-v=\"4\" data-block-id=\"799d7d3\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-799d7d3-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-799d7d3-inner-blocks\">\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-e82bccf\" data-block-id=\"e82bccf\"><p class=\"stk-block-text__text\">In this example, we are going to list the posts by a specific author. It is not as flexible as the code above, but you may want to have a page where you filter acollection based on a specific value.<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-7d0b052\" data-block-id=\"7d0b052\"><p class=\"stk-block-text__text\">You will still need to have the <strong>custom front matter<\/strong>.<\/p><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Next we will create the list of posts for an author. You could change this to use whatever custom variable and value you want to use.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This code would go on the post page wherever you want the list of posts to show up. <\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block alignwide code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;HTML&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;hasCustomCSS&quot;:false,&quot;customCSS&quot;:&quot;&quot;,&quot;otterConditions&quot;:[],&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;p&gt;Posts by Author 2&lt;\/p&gt;\n&lt;ul role=&quot;list&quot;&gt;\n{% for post in collections.post %}\n{% if post.data.author === &quot;Author 2&quot; %}\n  &lt;li&gt;\n    &lt;a href=&quot;{{ post.url }}&quot;&gt;\n        {{ post.data.title }}\n    &lt;\/a&gt;\n  &lt;\/li&gt;\n{% endif %}\n{%- endfor %}\n&lt;\/ul&gt;<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">You could change the variable, author, or the value, Author 2, to meet the variable and value you want to use.<\/p>\n<\/div><\/div><\/div>\n<\/details>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Use Custom Collection to List all pages in a folder<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This one allows you to list all pages in a folder. That means you don&#8217;t have to remember to add the same tag to all of the files you want to include. It does mean that you have to add some custom code to eleventy.js to create the <strong>Custom Collection<\/strong>. A Custom Collection is one that you define (instead of one 11ty automatically defines, like for tags).<\/p>\n\n\n\n<details class=\"wp-block-stackable-accordion stk-block-accordion stk-inner-blocks stk-block-content stk-block stk-4cb7799\" data-block-id=\"4cb7799\">\n<summary class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-273b7a5 stk--container-small stk-block-accordion__heading\" data-v=\"4\" data-block-id=\"273b7a5\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-273b7a5-container stk-hover-parent\"><div class=\"stk-block-content stk-inner-blocks stk-273b7a5-inner-blocks\">\n<div class=\"wp-block-stackable-icon-label stk-block-icon-label stk-block stk-ad2bdb4\" data-block-id=\"ad2bdb4\"><div class=\"stk-row stk-inner-blocks stk-block-content\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-123bdc9\" id=\"example-code-list-pages-in-a-folder\" data-block-id=\"123bdc9\"><h4 class=\"stk-block-heading__text stk-block-heading--use-theme-margins\">Example Code: List pages in a folder<\/h4><\/div>\n\n\n\n<div class=\"wp-block-stackable-icon stk-block-icon stk-block stk-3966bb0\" data-block-id=\"3966bb0\"><span class=\"stk--svg-wrapper\"><div class=\"stk--inner-svg\"><svg style=\"height:0;width:0\"><defs><linearGradient id=\"linear-gradient-3966bb0\" x1=\"0\" x2=\"100%\" y1=\"0\" y2=\"0\"><stop offset=\"0%\" style=\"stop-opacity:1;stop-color:var(--linear-gradient-3966-bb-0-color-1)\"><\/stop><stop offset=\"100%\" style=\"stop-opacity:1;stop-color:var(--linear-gradient-3966-bb-0-color-2)\"><\/stop><\/linearGradient><\/defs><\/svg><svg data-prefix=\"fas\" data-icon=\"chevron-down\" class=\"svg-inline--fa fa-chevron-down fa-w-14\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 448 512\" aria-hidden=\"true\" width=\"32\" height=\"32\"><path fill=\"currentColor\" d=\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\"><\/path><\/svg><\/div><\/span><\/div>\n<\/div><\/div>\n<\/div><\/div><\/summary>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-2a683bf stk-block-accordion__content\" data-v=\"4\" data-block-id=\"2a683bf\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-2a683bf-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-2a683bf-inner-blocks\">\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-cb095b0\" data-block-id=\"cb095b0\"><p class=\"stk-block-text__text\">First we have to edit <strong>.eleventy.js<\/strong> in order to add a Custom Collection. It is important to add this <strong>eleventyConfig<\/strong> right after the other <strong>eleventyConfig<\/strong> statements and before the <strong>return<\/strong><\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-image stk-block-image stk-block stk-37e014b\" data-block-id=\"37e014b\"><figure><span class=\"stk-img-wrapper stk-image--shape-stretch\"><img loading=\"lazy\" decoding=\"async\" class=\"stk-img wp-image-2261\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-content\/uploads\/sites\/1879\/2021\/12\/Screen-Shot-2021-12-08-at-7.04.39-PM.png\" width=\"2048\" height=\"804\" alt=\"screenshot of .eleventy.js file\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-content\/uploads\/sites\/3596\/2021\/12\/Screen-Shot-2021-12-08-at-7.04.39-PM.png 2048w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-content\/uploads\/sites\/3596\/2021\/12\/Screen-Shot-2021-12-08-at-7.04.39-PM-300x118.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-content\/uploads\/sites\/3596\/2021\/12\/Screen-Shot-2021-12-08-at-7.04.39-PM-1024x402.png 1024w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-content\/uploads\/sites\/3596\/2021\/12\/Screen-Shot-2021-12-08-at-7.04.39-PM-768x302.png 768w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-content\/uploads\/sites\/3596\/2021\/12\/Screen-Shot-2021-12-08-at-7.04.39-PM-1536x603.png 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><\/span><\/figure><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>eleventyConfig.addCollection(\"postsFolder\", function(collectionApi) {\n    return collectionApi.getFilteredByGlob(\"**\/posts\/*.md\").sort(function(a, b) {\n      \/\/return a.date - b.date; \/\/ sort by date - ascending\n      return b.date - a.date; \/\/ sort by date - descending\n    });\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now we have defined a Custom Collection named <strong>postsFolder<\/strong>. We can use this like the tag collections.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you wanted to use a different folder then you could change <strong>&#8220;**\/posts\/*.md&#8221;<\/strong> to something else like <strong>&#8220;**\/gallery\/*.md&#8221;<\/strong> if you had a gallery folder.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next we will create the list of posts. This is like we did for tags but using the custom collection name.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ul&gt;\n  {%- for post in collections.<strong>postsFolder<\/strong> %}\n  &lt;li&gt;\n  &lt;a href=\"{{ post.url }}\"&gt;\n  {{ post.data.title }}\n  &lt;\/a&gt;\n  &lt;\/li&gt;\n  {%- endfor %}\n&lt;\/ul&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div><\/div><\/div>\n<\/details>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are a few ways that you can generate lists of pages in 11ty. Eleventy has a concept called Collections that are a group of content. This post looks at&hellip;&nbsp;<a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/collections-in-eleventy\/\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Collections in Eleventy<\/span><\/a><\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","_themeisle_gutenberg_block_has_review":false,"openlab_post_visibility":"","footnotes":""},"categories":[50,43],"tags":[],"class_list":["post-3388","post","type-post","status-publish","format-standard","hentry","category-eleventy","category-resource"],"_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/posts\/3388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/comments?post=3388"}],"version-history":[{"count":11,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/posts\/3388\/revisions"}],"predecessor-version":[{"id":4376,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/posts\/3388\/revisions\/4376"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/media?parent=3388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/categories?post=3388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/tags?post=3388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}