ThumbnailImage

Description

contents 내부의 첫번째 Image를 썸네일 이미지로 지정.

Required

none.

Source

JS

path: quartz/components/scripts/custom/thumbnailImage.inline.ts

thumbnailImage.inline.ts

document.addEventListener("nav", () => {  
  document.querySelectorAll(".popover-hint").forEach((page) => {  
    const firstNode = page.firstChild?.firstChild  
  
    if (!firstNode) return  
  
    if (!(firstNode.nodeName.toLowerCase() === "img")) return  
  
    if (!(firstNode instanceof Element)) return  
  
    firstNode.classList.add("thumbnail-image")  
  })  
})

CSS

path: quartz/styles/base.scss

base.scss

...
.thumbnail-image {  
  width: 100% !important;  
  max-height: 500px !important;  
}
...