Since a recent update, it's now possible to use the character portrait in a sheet. I've done so in my newest sheet, seen here: <div class="gridpicturebox">
<input class="blankit picturecheckbox" type="checkbox" id="picture" name="attr_pic-check" checked>
<label class="picturelabel" for="picture">
<img class="portraitpicture" name="attr_character_avatar" alt="" height="134" width="134">
</label>
</div>
.gridpicturebox{
grid-row-end: span 4;
}
.blankit {
display: none;
}
.picturelabel{
padding-right: 0px;
}
.portraitpicture{
border: 5px double #333;
height: 134px;
max-width: initial;
width: auto;
background-image: url(<a href="https://i.imgur.com/LMoVHDf.jpg" rel="nofollow">https://i.imgur.com/LMoVHDf.jpg</a>);
background-position: center;
background-clip: content-box;
background-size: cover;
}
.picturecheckbox:checked + .picturelabel {
filter: sepia(1);
} I'm pretty happy how this turned out. The portrait is a pseudo check-box, and checking it will toggle a sepia filter on and off. The image has a fixed height, and the width is set to auto to maintain the aspect ratio. I've got a background image that will appear if the character sheet doesn't have a portrait image. It was a little bit of a struggle figure out how to make that background display correctly, but the trick seems to be just hard-coding the dimensions into the html. The width: auto; in the css will overwrite the html width to maintain the portrait's aspect ratio, but if there is no portrait, it will default to the html value. The one wrinkle is that the edge of the background image seems to be poking out, ever so slightly, behind the character portrait. This seems to happen inconsistently based on the size of the portrait image and the zoom level. If anyone has ideas about what's causing that or how to fix it, I'm all ears.
