How to have cover image in frontmatter? #82

luminarious · 2022-02-01T21:58:55Z

luminarious
Feb 1, 2022

For a portfolio type site, is there a simple way to put an image as frontmatter? So if have src/pages/:project/index.vue, I would put cover: project.jpg and then use that as project thumbnail on index page and elsewhere.

In dev mode this works:

extendFrontmatter (frontmatter, filename) {
	frontmatter.cover = filename.slice(0, filename.lastIndexOf('/') + 1) + frontmatter.cover
},

But the filename will break in prod, since it's not actually processed.

Answered by ElMassimo

Feb 1, 2022

@luminarious There are different ways to achieve this, depending on what you need.

Direct References

The simplest way would be to put the images in public, and reference the full public path in the frontmatter. Example:

cover: /images/specific-project/project.jpg

Shorter References

Using extendFrontmatter (as in your example) you could modify cover to achieve the same result, but without specifying the full path:

cover: project.jpg

Dynamic References

You could use import.meta.globEager to obtain a fingerprinted path to all images, and then index that using the meta.filename or frontmatter information.

It has no runtime cost if you are using îles, but the code is not pretty. On the other h…

View full answer

ElMassimo · 2022-02-01T23:24:51Z

ElMassimo
Feb 1, 2022
Maintainer

@luminarious There are different ways to achieve this, depending on what you need.

Direct References

The simplest way would be to put the images in public, and reference the full public path in the frontmatter. Example:

cover: /images/specific-project/project.jpg

Shorter References

Using extendFrontmatter (as in your example) you could modify cover to achieve the same result, but without specifying the full path:

cover: project.jpg

Dynamic References

You could use import.meta.globEager to obtain a fingerprinted path to all images, and then index that using the meta.filename or frontmatter information.

It has no runtime cost if you are using îles, but the code is not pretty. On the other hand, it has the advantage of using fingerprinted assets, so you can use cache-control headers to let browsers keep the image forever, which is great for performance.

`@island/images`

If you would like to leverage asset fingerprinting, but would like to optimize images as well, you can use this module which wraps vite-plugin-image-presets.

Don't have any open source examples to share yet, but here's some code that you might find useful:

import imagePlugin, { hdPreset, ImageAttrs } from '@islands/images'

// Define a preset for all cover images, specifying multiple formats, quality, size, etc
const images = imagePlugin({
  cover: hdPreset({
    class: 'img',
    widths: [310],
    formats: {
      avif: { quality: 44 },
      jpeg: { quality: 70 },
    },
  }),
})

export default defineConfig({
  // Generate images for each page that specifies a cover
  async extendFrontmatter (frontmatter, filename) {
    if (frontmatter.cover) {
      // Images are placed in <root>/images, outside of <root>/src
      const src = `images/${frontmatter.cover}`

      // Use the `api` provided by the module to obtain an image path or array of srcsets:
      frontmatter.coverSrcsets = await images.api.resolveImage(src, { preset: 'cover' }) as ImageAttrs[]
      frontmatter.coverSrc = await images.api.resolveImage(src, { preset: 'cover', src: true }) as string
    }
  },
  modules: [
    // Install the module that we instantiated above.
    images,
  ],
})

Then, you can use these frontmatter properties as needed to render responsive images:

<Picture :src="$frontmatter.coverSrcsets"/>

For example, use only the src for social media:

<script setup lang="ts">
const { frontmatter, site } = usePage()

let imageUrl = $computed(() => `${site.url}${frontmatter.cover}`)
</script>

<template>
  <Head>
    <meta property="twitter:image" :content="imageUrl">
  </Head>
</template>

0 replies

luminarious · 2022-02-03T10:05:43Z

luminarious
Feb 3, 2022
Author

I tried the third version as the most mobile-friendly, but there seems to be some issue with the @islands/images plugin itself? I tried programmatic paths and hard-coded paths but all cases return this:

TypeError: Cannot read properties of undefined (reading 'resolveImage')
    at Array.extendFrontmatter (C:\Code\hardi.design\iles\iles.config.ts:47:53)
    at Object.extendFrontmatter (C:\Code\hardi.design\iles\node_modules\.pnpm\iles@0.7.27_stylus@0.56.0\node_modules\iles\dist\node\chunk-UNTEK7AT.js:328:34)
    at async Object.frontmatterForFile (file:///C:/Code/hardi.design/iles/node_modules/.pnpm/@islands+pages@0.7.9_vue@3.2.29/node_modules/@islands/pages/dist/pages.js:179:16)
    at async Object.pageRouteFromFile (file:///C:/Code/hardi.design/iles/node_modules/.pnpm/@islands+pages@0.7.9_vue@3.2.29/node_modules/@islands/pages/dist/pages.js:146:27)
    at async Object.addPage (file:///C:/Code/hardi.design/iles/node_modules/.pnpm/@islands+pages@0.7.9_vue@3.2.29/node_modules/@islands/pages/dist/pages.js:126:20)
    at async file:///C:/Code/hardi.design/iles/node_modules/.pnpm/@islands+pages@0.7.9_vue@3.2.29/node_modules/@islands/pages/dist/pages.js:123:51
    at async Promise.all (index 18)
    at async Object.addAllPages (file:///C:/Code/hardi.design/iles/node_modules/.pnpm/@islands+pages@0.7.9_vue@3.2.29/node_modules/@islands/pages/dist/pages.js:123:7)
    at async Context.buildStart (file:///C:/Code/hardi.design/iles/node_modules/.pnpm/@islands+pages@0.7.9_vue@3.2.29/node_modules/@islands/pages/dist/pages.js:327:9)
    at async Promise.all (index 6)

5 replies

ElMassimo Feb 3, 2022
Maintainer

From the error, it seems that api is not being set by the time extendFrontmatter is called, which is unusual.

The api is available after configResolved, and in the trace you shared the error is happening on buildStart, which is called afterwards.

@luminarious Can you share your iles.config.ts?

Perhaps the module is not being added (since the snippet I shared above doesn't include that part).

export default defineConfig({
  modules: [
    images,
  ],
...

If that's the case, I might add an error message when the api is not available, suggesting that the user adds the module (or plugin if using vite-plugin-image-presets directly).

Feels like a cookbook/recipes section in the doc would be useful for these use cases.

luminarious Feb 3, 2022
Author

I assumed all plugins are added the same way (as I saw from the @islands/feed example):

import { defineConfig } from 'iles'
import imagePlugin, { hdPreset, ImageAttrs } from '@islands/images'

// Define a preset for all cover images, specifying multiple formats, quality, size, etc
const images = imagePlugin({
	cover: hdPreset({
		class: 'img',
		widths: [310],
		formats: {
			avif: { quality: 44 },
			jpeg: { quality: 70 },
		},
	}),
})

export default defineConfig({
	// Generate images for each page that specifies a cover
	async extendFrontmatter (frontmatter, filename) {
		if (frontmatter.cover) {
			//const src = filename.slice(0, filename.lastIndexOf('/') + 1) + frontmatter.cover
			const src = 'covers/cover.jpg'
			try {
				// Use the `api` provided by the module to obtain an image path or array of srcsets:
				frontmatter.coverSrcsets = await images.api.resolveImage(src, { preset: 'cover' }) as ImageAttrs[]
				frontmatter.coverSrc = await images.api.resolveImage(src, { preset: 'cover', src: true }) as string
			} catch(e) {
				console.log(src)
				console.error(e)
			}
		}
	},
	modules: [
		'@islands/feed',
		'@islands/images',
	],
})

ElMassimo Feb 3, 2022
Maintainer

While for most modules the string shorthands are a nice way to avoid extra imports, @islands/images doesn't do anything useful without presets, so typically you want to do this instead.

In the example above, since you use the api directly, you would provide the module that you instantiated:

	modules: [
		'@islands/feed',
		images,
	],
})

Otherwise, it's creating a new module, with a separate api, and the one instantiated outside is not "installed" in Vite.

This is not the friendliest UX, but perhaps more documentation around it would help, thoughts?

luminarious Feb 3, 2022
Author

Favourite option would definitely be just one interface for all plugins because remembering any deviations sucks. Maybe just hide the difference from regular plugins, so it's automatically imported but used only if also mentioned in modules[]?

I am 🤩 that I finally have images showing up! But I'll make a separate thread for questions about image presets if that's ok.

ElMassimo Feb 3, 2022
Maintainer

If you prefer consistency, you can import all modules, just like you would do for Vite plugins.

Glad to hear that it's working now 👍

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to have cover image in frontmatter? #82

{{title}}

Replies: 2 comments 5 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

How to have cover image in frontmatter? #82

luminarious Feb 1, 2022

Direct References

Shorter References

Dynamic References

Replies: 2 comments · 5 replies

ElMassimo Feb 1, 2022 Maintainer

Direct References

Shorter References

Dynamic References

@island/images

luminarious Feb 3, 2022 Author

ElMassimo Feb 3, 2022 Maintainer

luminarious Feb 3, 2022 Author

ElMassimo Feb 3, 2022 Maintainer

luminarious Feb 3, 2022 Author

ElMassimo Feb 3, 2022 Maintainer

luminarious
Feb 1, 2022

Replies: 2 comments 5 replies

ElMassimo
Feb 1, 2022
Maintainer

`@island/images`

luminarious
Feb 3, 2022
Author

ElMassimo Feb 3, 2022
Maintainer

luminarious Feb 3, 2022
Author

ElMassimo Feb 3, 2022
Maintainer

luminarious Feb 3, 2022
Author

ElMassimo Feb 3, 2022
Maintainer