Skip to content

Instantly share code, notes, and snippets.

@Narottam04
Last active July 4, 2021 11:58
Show Gist options
  • Save Narottam04/3dc79301aa2d38d62b792715770903c0 to your computer and use it in GitHub Desktop.
Save Narottam04/3dc79301aa2d38d62b792715770903c0 to your computer and use it in GitHub Desktop.
11ty Collection for Image files not working
// Import fast-glob package
const fg = require('fast-glob');
module.exports = config => {
config.addPassthroughCopy('./src/images/');
const BASE_DIR = "images/aquapolis";
config.addCollection("images", () => fg.sync(`${BASE_DIR}/**/*.{jpg,png,gif}`));
return {
markdownTemplateEngine: 'njk',
dataTemplateEngine: 'njk',
htmlTemplateEngine: 'njk',
dir: {
input: 'src',
output: 'dist'
}
};
};
---
title: 'PokeCards'
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
</head>
<body>
<h1>PokeCards</h1>
<section class="gallery">
{% for image in collections.images %}
<figure><img src="{{image}}" alt="" loading="lazy"></figure>
{% endfor %}
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment