Thumbnail component

The Thumbnail component is useful for displaying a thumbnail “featured image” for a document. If any given page is lacking a thumbnail frontmatter property then nothing is added to the html document.

However if a thumbnail is provided as uri string, then the target image is displayed on the page. In desktop mode it displays floating to the left, but at mobile resolutions it just renders at the beginning of the document.

The thumbnail value can be either a url to a remote image or a path to an image within the vault relative to the vault base directory (not the repository directory)

Using the Thumbnail component

1. Open quartz.layout.ts
2. Import CustomComponents from the quartzCustomizations file
3. Call the Thumbnail component after the TagList inside the PageLayout’s beforeBody array.

Example implementation

// quartz.layout.ts
 
...
import { CustomComponents } from "../quartzCustomizations"
 
...
 
// components for pages that display a single page (e.g. a single note)
export const defaultContentPageLayout: PageLayout = {
	beforeBody: [
		Component.Breadcrumbs(),
		Component.ArticleTitle(),
		Component.ContentMeta(),
		Component.TagList(),
		CustomComponents.Thumbnail(),
	],
 
	...
}
  
...