images

---

navigation: title: Images parent: index.md position: 145 icon: minecraft:wool:1 categories:

• widgets

Cycling icons example — uncomment to enable:

icons:

- minecraft:wool:1

- minecraft:wool:4

- minecraft:wool:14

icon_components example (applies NBT to the icon: item):

icon_components:

display:

Name: "Colored Wool Demo"

---

Images

<FloatingImage>, <ItemImage>, and <BlockImage> rendering tests.

FloatingImage

Relative path (test1.png in the same directory):

Inline image mixed with text: here is an inline image.

<FloatingImage> accepts width / height (pixels): giving one keeps the aspect ratio; giving both stretches the image (ratio not preserved); giving neither falls back to the default natural / 4 + availableWidth clamp.

Fixed 64×64 (single dim, keeps ratio):

Forced 200×80 stretch (ratio not preserved):

Fixed height 40 (width derived):

ImageAnnotation

<ImageAnnotation> children attach hover tooltips (and optional colored borders) to rectangular regions of a <FloatingImage>. Coordinates (x, y, w, h) are in image pixels; the region is automatically scaled when the image is resized or stretched. Omitting all four covers the entire image.

Whole-image annotation (hover anywhere over the image to see the tooltip):

This tooltip appears when you hover over **any part** of the image.

Region annotation with a visible red border (x=10, y=10, w=60, h=40):

Hovering the **red-bordered region** shows this tooltip.

Multiple annotations on one image — each region shows a different tooltip:

Left half Right half

Stretched image (200×80) with an annotation that follows the stretch:

Left portion of the stretched image.

Image Sounds

Click the image or the left region to play a custom sound. Hover the right region to play a hover sound. The example declares the event ids in the resource pack's assets/guidenh/sounds.json; actual .ogg files should be placed below assets/guidenh/sounds/.

&Inline sound action

**Rich text sound link** This annotation has both a tooltip and a click sound.

ItemImage Scale

Inline Icon vs. Text Baseline

Inline <ItemImage> icons are nudged upward by ~4 pixels (scaled by scale) so their visual center lines up with the surrounding text baseline. The label text receives a separate, smaller default nudge (-2 px). Both can be overridden independently.

• Default offset (-4px icon, -3px label): this line mixes diamond, apple and iron ingot.
• Disabled icon offset (yOffset="0", label unchanged): diamond, apple.
• Disabled label offset (labelYOffset="0", icon unchanged): diamond, apple.
• Both offsets zeroed (yOffset="0" labelYOffset="0"): diamond, apple.

Values are pixels at scale=1 and are multiplied by the current scale at render time.

ItemImage Label

Label to the right (default italic name):

Label to the left:

Bold format with %s placeholder:

Strikethrough format:

Underline (using __):

Wavy underline:

Dotted underline:

Icon hidden, label only:

Icon shown, no tooltip:

BlockImage Scale

BlockImage now renders a transparent 3D placed-block preview rather than an item-form icon.

BlockImage Perspective And Tile NBT

BlockImage Row Samples

ItemLink

Basic link (text only, tooltip enabled):

Icon to the left of the link text:

Icon to the right, tooltip suppressed:

Ore-dictionary lookup:

Explicit link target with anchor:

Same-page anchor link: