format	html

Callout Image Extension For Quarto

callout-png facilitates image specification within (reasonable facsimiles of) Quarto callouts.

These image specifications supplant the native & hacked bootstrap icon options currently available with Quarto callouts and extends the icon customization beyond the default palette. https://github.com/coatless-quarto/custom-callout is an option for icon replacement. callout-png is similarly--minded, but is focused on image specification.

The extension is named callout-png because the .png format is known to support transparency (images with transparent backgrounds will return the most visually appealing results). Multiple image formats are permitted. Html documents should allow flexible image sourcing; pdf and typst documents will be more restrictive (e.g., some image formats such as .svg or .gif may give grief).

Native images should be used with typst and traditional pdf document types (url image--grabbing is not supported with format: typst or format: pdf).

Installing

quarto add jtkulas/callout-png

This will install the extension under the _extensions subdirectory. If you're using version control, you will want to check in this directory.

Using

Identify the extension within your YAML with filters:, then implement via fenced div:

---
title: "My Callout Document"
format: html
filters:
  - callout-png  
---

::: {.callout-png}  
Content here...
:::

The default callout should display with the Pink Panther as an image and "Pinktacular Callout" as a title. The displayed font will mirror your document mainfont with the title presented in bold:

Customization options:

Option	Description	Default Value	Example
color	Banner color (left--hand border will render 7% darker [html only])	#ff99ff	color="#bada55"
title	Content displayed to the right of image	Pinktacular Callout	title="My special callout"
image	Image filename & location	pink-panther.png	image="prettypic.png"
image-height	Vertical sizing of image	4.8em	image-height="2em"
header-vpad	Banner padding (vertical -- top & bottom)	0em	header-vpad="1em"

Examples

Two specifications of the 5 different attribute parameters:

::: {.callout-png title="This is BIGGER snoopy" color="#c9c9c3" image="snoopylocal.png" header-vpad="1em" icon-height="8em"}

+ bundled extension image (snoopylocal.png)
+ color=grey 
+ height=8em 
+ vertical padding=1em

:::

::: {.callout-png title="This is smaller snoopy" color="#cb6ed4" image="https://pngimg.com/uploads/snoopy/snoopy_PNG78.png" header-vpad="0em" icon-height="3em"}

+ online image location
+ color=purple 
+ height=3em 
+ vertical padding=0em

:::

Here is the source code for a minimal example: example.qmd.

Known issues

	html	RevealJS	typst	$\LaTeX$
local images	✅	✅	✅	✅
url images	✅	✅	❌	❌
dark left border	✅	✅	❌	❌
negative header-vpad values	❌	❌	✅	✅
collapsable	❌	❌	❌	❌

Contributing

Issues and pull requests are welcome! Please open an issue on the GitHub repository to propose changes or make feature requests.