How to have cover image in frontmatter? #82
-
|
For a portfolio type site, is there a simple way to put an image as frontmatter? So if have 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. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 5 replies
-
|
@luminarious There are different ways to achieve this, depending on what you need. Direct ReferencesThe simplest way would be to put the images in cover: /images/specific-project/project.jpgShorter ReferencesUsing cover: project.jpgDynamic ReferencesYou could use 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
|
Beta Was this translation helpful? Give feedback.
-
|
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: |
Beta Was this translation helpful? Give feedback.
-
|
From the error, it seems that The @luminarious Can you share your 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 Feels like a cookbook/recipes section in the doc would be useful for these use cases. |
Beta Was this translation helpful? Give feedback.
-
|
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',
],
}) |
Beta Was this translation helpful? Give feedback.
-
|
While for most modules the string shorthands are a nice way to avoid extra imports, In the example above, since you use the 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? |
Beta Was this translation helpful? Give feedback.
-
|
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 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. |
Beta Was this translation helpful? Give feedback.
-
|
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 👍 |
Beta Was this translation helpful? Give feedback.
@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:Shorter References
Using
extendFrontmatter(as in your example) you could modifycoverto achieve the same result, but without specifying the full path:Dynamic References
You could use
import.meta.globEagerto obtain a fingerprinted path to all images, and then index that using themeta.filenameor frontmatter information.It has no runtime cost if you are using îles, but the code is not pretty. On the other h…