Decker Image Layout
Proposed structure
Parameters inred
. Media elements (img, svg, wrapped canvas, wrapped iframe) in
green
.
<p class="media center">
<figure class="image" style="width: 70%">
<img src="./06-metal.png" />
<figcaption>Caption.</figcaption>
</figure>
</p>
<span class="media top">
<figure class="image">
<img src="./06-metal.png" style="height: 4em" />
<figcaption>Caption.</figcaption>
</figure>
</span>
<p class="media masonry center">
<figure class="row" style="width: 70%">
<div class="container">
<figure class="image">
<img src="./06-metal.png" />
</figure>
<figure class="image">
<img src="./06-metal-r.png" />
<figcaption>Image Caption</figcaption>
</figure>
<figure class="image">
<img src="./06-metal-xs.png" />
</figure>
</div>
<figcaption>Three Images</figcaption>
</figure>
</p>
Tests
Paragraph Mode
In paragraph mode an image is the only element in a paragraph. The default width is 100% of the surrounding element.
(No idea, where the small margin below the image comes from.)
![](){}

The width can be reduced in percentages of the surrounding element.
![](){width="70%"}

Reduced width images can be centered, right, or left (default) aligned.
![Caption](){width="70%" .right}

All embedded things behave exactly like plain images. For example code blocks. They have a `max-height` attribute with a sensible default value.
``` {}
filter2 :: [Block] -> Filter [Block]
filter2 = pairwise filter
where
filter (Para [Image {}], Para []) =
return $ Just [RawBlock (Format "html5") ""]
filter (x, y) = return Nothing
Reduced width code block, centered.
``` {width="70%" .center}
filter2 :: [Block] -> Filter [Block]
filter2 = pairwise filter
where
filter (Para [Image {}], Para []) =
return $ Just [RawBlock (Format "html5") ""]
filter (x, y) = return Nothing
Iframes and embedded videos need a `aspect-rato` attribute. Default could be 16:9 or 4:3 or anything. See here for dynamically resizable video embedding.
{aspect="16/7"}
{aspect="16/7" width="72%"}
Alternatively, the height can be specified. This might make more sense for plain iframes.
{height="200px" width="72%"}
Line Mode
In line mode the image is surrounded by other elements.
The height of the image is set to a global default value in some absolute unit. Percentages do not work here.
![](){} Text ![](){} Text


Height and vertical alignment can be set.
![](){height="4em" .top} Text ![](){height="4em" .top} Text


Block elements like CodeBlock (and images resulting from them) can not be set in line mode.
Line Blocks
LineBlocks result in multiple images inside a media element which are displayed in one line all with the same height filling the entire width of the parent element.
| ![](){}
| ![](){}
| ![](){}


