diff --git a/config/shortcodes/image.js b/config/shortcodes/image.js
index fbce1d4..2356323 100644
--- a/config/shortcodes/image.js
+++ b/config/shortcodes/image.js
@@ -14,10 +14,15 @@ const imageShortcode = async (
alt = "",
caption = "",
className = undefined,
+ placeholder = "",
widths = [400, 800, 1280],
formats = ["webp", "jpeg"],
sizes = "100vw",
) => {
+ if (!src) {
+ return `
${placeholder}
`;
+ }
+
const metadata = await Image(src, {
widths: [...widths, null],
formats: [...formats, null],
@@ -26,6 +31,9 @@ const imageShortcode = async (
sharpOptions: {
animated: true,
},
+ cacheOptions: {
+ duration: "7d",
+ },
});
const lowsrc = metadata.jpeg[metadata.jpeg.length - 1];
diff --git a/src/css/blocks/image-placeholder.css b/src/css/blocks/image-placeholder.css
new file mode 100644
index 0000000..fa809a3
--- /dev/null
+++ b/src/css/blocks/image-placeholder.css
@@ -0,0 +1,13 @@
+.image-placeholder {
+ background-color: var(--color-surface);
+ border-radius: var(--spacing-1);
+ width: 100%;
+ height: 100%;
+ font-size: 0.8em;
+ line-height: 1.125em;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--spacing-1);
+ text-align: center;
+}
diff --git a/src/now.html b/src/now.html
index 7e3142d..0427db1 100644
--- a/src/now.html
+++ b/src/now.html
@@ -19,8 +19,11 @@ title: /now
- {{ album.artist }} - {{ album.album }}
- {% image album.imageUrl, "" %}
+ {% set textContent %}
+ {{ album.artist }} - {{ album.album }}
+ {% endset %}
+ {{ textContent }}
+ {% image album.imageUrl, "", "", "", textContent %}
{% endfor %}
@@ -32,8 +35,11 @@ title: /now
+ {% set textContent %}
+ {{ movie.title }}
+ {% endset %}
{{ movie.title }}
- {% image movie.imgSrc, "" %}
+ {% image movie.imgSrc, "", "", "" , textContent %}
{% endfor %}