Decker Image Layout

Proposed structure

<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%"}

Caption.

Reduced width images can be centered, right, or left (default) aligned.

![Caption](){width="70%" .right}

Captions can of course be entire paragraphs that can contain any HTML within reasonable limits.

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.

![Caption](youtube:fR6DA54tIGc){aspect="16/7"}

![Caption](youtube:fR6DA54tIGc){aspect="16/7" width="72%"}

Alternatively, the height can be specified. This might make more sense for plain iframes.

![Caption](https://tramberend.beuth-hochschule.de/){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

Image Caption

Height and vertical alignment can be set.

![](){height="4em" .top} Text ![](){height="4em" .top} Text

Image Caption

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.

| ![](){}
| ![](){}
| ![](){}

Image Caption