begin working on animation support

content/blogposts/blogposts.11tydata.js

@@ -1,5 +1,5 @@
 const conf = {
-	tags: "blogpost",
+	tags: "blogposts",
 	layout: "blogpost.njk",
 	eleventyComputed: {
 		permalink(data) {

content/layouts/portfolio.njk

@@ -14,7 +14,7 @@ layout: base.njk
 	<div class="portfolio-detail-images gallery">
 		{% for image in data.images %}
 		<a href="{% imageUrl image.url %}">
-			<img src="{{image.url}}" alt="" loading="lazy" />
+			<img src="{{image.url}}" alt="" loading="lazy" width="600" />
 			{% if image.caption %}
 			<div class="gallery-caption">
 				{{image.caption}}

content/pages/blog.njk

@@ -4,7 +4,7 @@ permalink: "/blog/"
 ---
 
 <h1>Blog</h1>
-{% for post in collections.blogpost | reverse %}
+{% for post in collections.blogposts | reverse %}
 <div>
 	{{post.data.date | dateLocale}} - <a href="{{ post.data.permalink | safe }}">{{post.data.title}}</a>
 </div>

content/portfolio/portfolio.11tydata.js

@@ -10,14 +10,15 @@ const conf = {
 			const dir = path.dirname(data.page.inputPath);
 
 			const files = fs.readdirSync(dir)
-				.filter(file => ['.png', '.jpg', '.jpeg', '.JPG'].includes(path.extname(file)))
+				.filter(file => ['.png', '.jpg', '.jpeg', '.JPG', '.webp'].includes(path.extname(file)))
 				.sort();
 
 
 			const images = await Promise.all(files.map(async (image) => {
 
 				const imagePath = path.resolve(dir + '/' + image);
-				const exif = await exifr.parse(imagePath, { pick: ['XPComment', 'DateTimeOriginal'] });
+				//const exif = await exifr.parse(imagePath, { pick: ['XPComment', 'DateTimeOriginal'] });
+				const exif = {};
 
 				return {
 					url: data.page.url + image,

content/style.scss

@@ -87,9 +87,11 @@ body {
 				flex-wrap: wrap !important;
 			}
 
-			picture {
+			picture,
+			img {
 				display: block;
-				height: 15rem;
+				height: 15rem !important;
+				max-width: 33.33%;
 				flex-grow: 1;
 
 				img {

eleventy.config.js

@@ -31,7 +31,13 @@ export default async function (eleventyConfig) {
 
 	//Images
 	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
-		widths: ["700"]
+		widths: ["700"],
+		formats: ["jpeg", "webp", "gif"],
+		useCache: true,
+		sharpOptions: {
+			animated: true,
+			limitInputPixels: false
+		}
 	});
 	eleventyConfig.addShortcode("figure", (url, alt, caption, width) => {
 		return `
@@ -45,10 +51,15 @@ export default async function (eleventyConfig) {
 	eleventyConfig.addShortcode("imageUrl", async (image, width) => {
 		const img = await Image(`./content${image}`, {
 			outputDir: 'dist/img/',
-			useCache: true
+			useCache: true,
+			sharpOptions: {
+				animated: true,
+				limitInputPixels: false
+			}
 		});
 
-		return img.jpeg[0].url;
+		const files = img.jpeg ?? img.webp;
+		return files[0].url;
 	});
 
 	//Markdown