Release 1.1.0

[ebullient]

New feature: Images for backgrounds, items, monsters, races, and spells

The conversion tool downloads fluff images into img directories within each type, e.g. backgrounds/img or bestiary/aberration/img. These images are unordered, and are not referenced in entry text. Templates must be modified to include them.

To display all images, you can do something like this:

{#each resource.fluffImages}
{/each}

Note that the line above ends with two spaces, which serves as a line break when you have strict line endings enabled. You may need something a little different to get things to wrap the way you want in the case that there are multiple images (which is infrequent for these types).

You can also use two separate blocks, such that the first image is used at the top of the document, and any others are included later:

{#if resource.fluffImages && resource.fluffImages.0 }

{/if}

...

{#each resource.fluffImages}{#if it_index != 0}
{/if}{/each}

Notice the #right and #center anchor tags in the example above. The following CSS snippet defines formatting for two anchor tags: #right (which will float the image to the right) and #center (which will display the image as a centered block).

.json5e-background div[src$="#center"],
.json5e-item div[src$="#center"],
.json5e-monster div[src$="#center"],
.json5e-race div[src$="#center"],
.json5e-spell div[src$="#center"] {
text-align: center;
}
.json5e-background div[src$="#center"] img,
.json5e-item div[src$="#center"] img,
.json5e-monster div[src$="#center"] img,
.json5e-race div[src$="#center"] img,
.json5e-spell div[src$="#center"] img {
height: 300px;
}
.json5e-background div[src$="#right"],
.json5e-item div[src$="#right"],
.json5e-monster div[src$="#right"],
.json5e-race div[src$="#right"],
.json5e-spell div[src$="#right"] {
float: right;
margin-left: 5px;
}
.json5e-background div[src$="#right"] img,
.json5e-item div[src$="#right"] img,
.json5e-monster div[src$="#right"] img,
.json5e-race div[src$="#right"] img,
.json5e-spell div[src$="#right"] img {
height: 300px;
}

.rendered-widget .admonition-statblock-parent,
.markdown-rendered .admonition-statblock-parent,
.markdown-preview-section .admonition-statblock-parent {
clear: both;
}

Notes:

I recommend constraining the image height (rather than the width) in your CSS snippet for images.
The above snippet also adds a clear setting to the admonition parent. Some text descriptions are shorter than the constrained image height. Setting clear: both on admonition-parent ensures that images floated to the right do not impact the statblock display.
This configuration is in the [compendium.css snippet](https://github.com/ebullient/json5e-convert-cli/tree/main/css-snippets/compendium.css).
There is an example for each type in the [templates directory](https://github.com/ebullient/json5e-convert-cli/tree/main/src/main/resources/templates/) directory. Relevant file names start with images-.

Summary of changes

• 8881e5f 🐛 Include subclass features. Resolves Class data is missing: 5e-convert 1.1.0 #79
• b746c9c 🎨 Image template heading whitespace
• 1cdc95d 🐛 Resolve template paths (no shell expansion)
• 7d49006 ✨ Fluff images for items, races, backgrounds, spells, and monsters
• 03e8a6f ⬆️ diceType -> diceExpression for names tables
• 5d9ea7e ♻️ replace deprecated with method
• ba7b435 ♻️ default images() method

---

This discussion was created from the release Release 1.1.0.