Image sizing / media wrapping logic

[kno10]

One of the things I struggle most with decker is image sizing.

I am not totally happy with the current logic that double-wraps images:

<div class="media" style="max-height:40%">
<figure class="image">
<img src="imagefile" alt="filename" />
</figure>
</div>

some of the issues I have with the current solution:

• extra media wrapper
• no way to have CSS styles on the actual img tag – style= is applied to the outermost container
• width= and height= magically apply to different
• width= (HTML, Markdown) vs. width: (within CSS) syntax mismatch, but not so much deckers fault
• no way to control alt= -- produces data-alt="alt" on the media wrapper
• no way to have aria-label= without producing a visible figcaption

To illustrate:

![](filename){ width=40% }

![](filename){ height=40% }

![](filename){ width=40% height=40% }

![](filename){ style="width:40%" }

produces the unexpected output:

<div class="media">
<figure class="image" style="height:auto;width:auto;">
<img src="filename" style="height:40%;width:auto;" alt="filename" />
</figure>
</div>
<div class="media">
<figure class="image" style="height:auto;width:40%;">
<img src="filename" style="height:auto;width:100%;" alt="filename" />
</figure>
</div>
<div class="media">
<figure class="image" style="height:auto;width:40%;">
<img src="filename" style="height:40%;width:100%;" alt="filename" />
</figure>
</div>
<div class="media" style="height:40%">
<figure class="image">
<img src="filename" alt="filename" />
</figure>
</div>

style= always goes to the outermost <div>, width= to the <figure>, height= to the <img>, and depending on what you set, the width or height changes between 100% and auto. Clearly this is not a mistake but a decision, but it does not make my life easier. Maybe this could made optional, or even configurable with a template. In particular, I do not see what the benefit of the <div> is - I guess it is meant to make it easier to add the style attribute - but I would usually also not even use a figure, but plain <img>s. Unfortunately, when I use raw HTML image tags, this also means I need to take care of copying the images (I have my slides organized in small topical sets that I :include:, and would like to keep the associated images in the matching folder, rather than in a central assets folder).

media adds a small bottom margin (0.2em) in the standard stylesheet: https://github.com/decker-edu/decker/blob/792437a68b98c47674567ca9be2cb8a4c0e1484f/resource/decker/support/css/style.css#L88-L90

except if it is the last child in a container div (e.g., for multiple columns): https://github.com/decker-edu/decker/blob/792437a68b98c47674567ca9be2cb8a4c0e1484f/resource/decker/support/css/style.css#L155-L157 (this :last-child rule has been giving me layout issues in several other places, too).

[kno10]

In pure pandoc, even when implicit_figures is enabled, it apparently is possible to produce a raw image without a <figure> by appending a line break, i.e., by using

![](img)\

In decker this still produces a lot of boilerplate HTML:

<p><span class="media"><span class="figure image" style="height:auto;width:90%;"><img src="filename" style="height:auto;width:100%;" alt="filename" /></span></span><br />
</p>

Maybe we could also have a raw option to disable the image handling?

[monofon]

I just added a raw class for images that prevents most processing in 4070b8a. Now

![Alt Text](include/06-metal.png "Title Text"){.raw style="image-rendering:pixelated;width:1200px;"}

translates to

<img src="include/06-metal.png" title="Title Text" class="processed raw" style="image-rendering:pixelated;width:1200px;" alt="Alt Text">

with image URLs intact and local images copied to public.

Out of curiosity, what kind of image layout are you trying to achieve? Can you provide an example?

[kno10]

I don't have that one clear case where it fails. Quite often I simply want to put multiple images in columns besides each other, and want them to be aligned. The margin-bottom cited above, in particular together with the :last-child rule then frequently caused images to be not properly aligned.

I also rather often use CSS such as width: 100%; max-width: 30em or width: 100%; max-height: 5em, and this triple layer of wrapping makes it much less transparent what is happening, once things do not work as intended. I prefer the simpler solutions (and reveal.js already adds way too much magic).

[kno10]

A test case of poor interaction of style and container width I just observed on my slides:

![smallimg]{ width=40% style="float:right" }
Some text

With .raw, this works as intended.

I also tried this:

![smallimg]{ style="float:right;width:40%" }

but then the image may be smaller than 40%, as the width is applied to the container, and the image is not width:100% within the container. The following worked:

![smallimg]{ width=100% style="float:right;width:40%" }

As the first width is applied to the image, the second CSS width to the container, but that is non-intuitive.

[salbeira]

How about trying something like this:

::: columns-6-4

::: dummy

Some explanation of the image to the right

:::

::: dummy

![caption](/path/to/image){width=100%}

:::

:::

[kno10]

That adds even more layers, and introduces yet another width parameter, that of the column(s). And because these are all relative values, they affect each other. I always prefer simpler solutions over workarounds, the KISS principle.

[salbeira]

The layers can actually be omitted if you have only single elements you want to align or write them down in alternating order as that is how the grid-layout works.

The neat part is that with the grid cells the image refrains from expanding beyond the boundaries of its cell. So within a column layout you should not even need to specify a width for jpg or png images (svgs tend to have no size information stored so you might be forced to specify width or height anyway).

And this isn't a workaround. This is exactly how we want column layouts to be used. The default behaviour of everything markdown is "arrange stuff vertically" and if you want to arrange stuff horizontally, use the columns environment.

::: columns-6-4

A Paragraph on the Left

![An Image on the Right]()

:::