cmaas

How to show related posts in 11ty – sorted by how they're listed in the front matter

The general idea is to take the built-in collection.all, filter it down by the fileSlugs provided through the front matter and sort the filtered collection by their position in related:

Create a custom filter in .eleventy.js:

eleventyConfig.addFilter('filterRelated', (collection = [], related = []) => {
  const filtered = collection.filter(page => related.includes(page.fileSlug));
  return filtered.sort( (a, b) => related.indexOf(a.fileSlug) - related.indexOf(b.fileSlug));

herrkessler

mixin picture(path, name, type)
  picture
    each val in type
      source(srcset=path + "/" + name + "." + val type="image/" + val)
    img(src=path + "/" + name + ".jpg" alt=name)
	
+picture('path/to', 'image', ['jpg','webp'])

// Compiles to
//------------------------

kjohnson

jQuery( document ).ready( function(){
    var myListController = Marionette.Object.extend({

        initialize: function() {
            
            // Listen to the value change for Checkbox List fields.
            this.listenTo( Backbone.Radio.channel( 'listcheckbox' ), 'change:modelValue', this.onChangeModelValue );
        },

        onChangeModelValue: function( fieldModel ) {

config.json

{
  "vars": {
    "@gray-base": "#000",
    "@gray-darker": "lighten(@gray-base, 13.5%)",
    "@gray-dark": "lighten(@gray-base, 20%)",
    "@gray": "lighten(@gray-base, 33.5%)",
    "@gray-light": "lighten(@gray-base, 46.7%)",
    "@gray-lighter": "lighten(@gray-base, 93.5%)",
    "@brand-primary": "darken(#428bca, 6.5%)",
    "@brand-success": "#5cb85c",