Images will now be added by script using background-image

[LokiMidgard]

fixes #19

[Gudradain]

I'm not sure this is an improvement.

I mean, you are removing the html tag then re-adding them and then the user has to learn a lot of specific syntax to move and resize the image tag when he could have simply edit the style of the image tag.

In the end the user has to learn more syntax and is losing control. Someone familiar with html will have an easier time editing the style directly on the img tag than digging through the documentation.

[LokiMidgard]

I agree you can't control the tag more detailed when using it directly. And you need to learn non standard html tags. This would be no benefit for someone knowing HTML.

But my concern was, people not knowing HTML. Just editing text where they think it will work. For those using the style syntax in the HTML attribute tag could be confusing.

And someone knowing HTML and JS will probably be able to set the div tags directly and not using the attributes if he need a finer control.

My proposal would be documenting exactly what the attributes do and mention that they can be omitted if the div tags are added manually. Maybe adding the div tags in a comment in the position where they would sit in the sample.

That way someone knowing HTML should be able to understand how to use div's directly and someone how is lucky to open an text editor will be less confused.

But I'm fine with both approaches. I can also remove the JS again and add the tags directly.

[LokiMidgard]

What do you think about replacing the one color images with something where you would see the effect when you scale and move the image.

When someone now uses the template and tries the different options, changing the scale or position has almost no visible effect.

[Gudradain]

Maybe? We could always ask users, but here is my opinion for the moment.

I received a comment on the card template lately. The user instinctively tried to create image the same size as the one I created in the card template. That's all he needed for sizing.

For the spirit-border image, I don't know if we need any resizing. It seems pretty custom on all spirits. So, it might be enough to just put an image of the correct size. And if someone want to customize the spirit-border image, he might also wants to play with the height, element position (not only background position), width?. We are still missing quite a few settings to be flexible.

I like the idea of using the attribute spirit-image and spirit-border as I think it will be enough for the majority of the user but I don't like the idea of reimplementing all the possible styles.

On the other hand, there is one setting that would be pretty useful and that many would appreciate I think, adjusting the height of the spirit-image and special-rule section with only 1 setting. Maybe a percentage?

To adjust the height of the special rule section, you have to change the height of the spirit-image, the position of the spirit-border, the height and position of special rule section. It's a bit hard for user not used to HTML and I bet it will be needed a lot.

[LokiMidgard]

based on your feedback I made the Special rules section resizable. You can set the height attribute on the spical-rules-container to percent or pixel or whatever height unit is allowed in css.

For that I put the border in the special rules container so it will always be at the correct position. The spirit-name and container will be positioned using javascript.

Both spirit text and border are now centered on the top of the special-rules-container. The border overlaps the special rules container and the spirit image, so it can be used to hide the sharp edge like in the originals. The border height is only constrained by the height of the container which should be more then enough.

I resized both example images to fit the available space. The spirit image will have the complete height. So no matter what size the special rules have, there will always be a spirit.

I also removed the positional attributes for the images. But I would welcome it if at least the positioning attributes for the spirit-image could stay. I need them for my project and then I would have less customization that need to be maintained if this project updates.

I haven't yet documented anything. I wanted to here if there are some changes to this. But one thing that maybe should be noted is, that if the border is very thick and/or the spirit name so long that it will become two rows (or more😨) the best way to compensate this is to change the padding-top of the special-rules-container.

If we want to use an actual image for the spirit I would propose the We Will Regin again by Eriyal. It has the correct aspect ratio, is under a license that allows integrating it in other work and does not look like I have doodled something in paint.

[LokiMidgard]

@Gudradain Any more feedback on this?

[LokiMidgard]

Now the position of the special rules get calculated correctly, without explicitly setting height attribute on it.