absolute positioning of images on a slide

[abotzki]

Hi, I was wondering whether someone found a solution to a slide layout where one would apply absolute positions.

As far as I see you could apply style elements like shown here. Unfortunately, the top and left style element is ignored.

But I think that we'd need a class like this one for this image to make it work.

.absolute {
  position: absolute;
  display: block;
}

Any suggestion how to get this behaviour? Thanks a lot.

[andre-dietrich]

You can also directly set these attributes within the inline-style attribute, but of course, you can also define classes. I think simply adding position: absolute to your HTML-comment will do the trick. However, I add some examples how to change image settings, that you can Try out here - LiveEditor

<!--
@style
.styled-image {
    width: 300px;
    position: absolute;
    bottom: 20%;
    left: 35%;
}
@end
-->

# Image Position

LiaScript tries to identify the optimal scaling for an image, which means:

* if it is too wide for the screen it is scaled down
* if its height is to big for the screen it is scaled down to 75% of the screen height
* if it is too small it is not scaled
* in this case you can also click onto every image to enlarge it ... 

![Kitten](https://quarto.org/docs/presentations/revealjs/demo/mini/images/kitten-400-350.jpeg)

## Adding a position

Images are basically inline elements, thus, you can append an HTML-comment with any kind of
HTML-parameters to control its appearance. If you want to change its position you will have to
set the `position: absolute`

![Kitten](https://quarto.org/docs/presentations/revealjs/demo/mini/images/kitten-400-350.jpeg)<!--
style="width: 300px; position: absolute; bottom: 30px; left: 20px"
-->

## Using classes

All styling can also be added into CSS-classes:

![Kitten](https://quarto.org/docs/presentations/revealjs/demo/mini/images/kitten-400-350.jpeg)<!-- 
class="styled-image"
-->

## Dynamic positioning

It is also possible to use a script-tag to dynamically calculate your optimal settings and positioning.
The result of a script is send back to LiaScript as a string, to indicate, that this string should be
treated as a LiaScript snippet, you have to mark it with a starting `LIASCRIPT:` you can also use
`HTML:` to directly print the HTML-nodes...

* width: <script output="width" default="30" input="range" run-once>@input</script> %
* bottom: <script output="bottom" default="30" input="range" run-once>@input</script> %
* left: <script output="left" default="30" input="range" run-once>@input</script> %

<script style="display: block" modify="false">
`LIASCRIPT: 
![Kitten](https://quarto.org/docs/presentations/revealjs/demo/mini/images/kitten-400-350.jpeg)<!--
style="width: @input(`width`)%; position: absolute; bottom: @input(`bottom`)%; left: @input(`left`)%"
-->`
</script>

[abotzki]

Thanks a lot @andre-dietrich ! I am happy to see that there are so many options!

For an ELIXIR training course about FAIR training material design, I am preparing a small example presentation (still WIP ;-)) based on the demo slides which the quarto team has developed for their framework.

The idea is to provide examples from several tools to create OERs including slides. And most importantly also demostrate that Liascript is a very versatile tool you could do a lot of more stuff with.

[andre-dietrich]

Ow, that sounds great ;-) don't forget to take a look at the templates:

https://github.com/topics/liascript-template

I always prefer ABCjs as an alternative example to live programming

https://github.com/LiaTemplates/ABCjs

[andre-dietrich]

By the way, as a new option for quizzes, you can also combine ASCII-art with LiaScript ... Quotes are used to define a verbatim environment, which means, within the ASCII-art image, you can also embed any kind of LiaScript (including animations)... To trick the interpreter into Gap-Text instead of a single-line quiz, the input field has to be surrounded by spaces ...

``` ascii
                               Sum-Pyramid
                        .----------------------.
                       /                      /|
             .--------+----------------------+ +---------.
            /         |      " [[  24   ]] " |/         /|
  .--------+----------+----------+-----------+---------+ +----------.
 /         |         11          |     " [[   13   ]] "|/          /|
+----------+----------+----------+----------+----------+----------+ +
|      " [[   5   ]] "|          6          |          7          |/
+---------------------+---------------------+---------------------+
```

See a working example here

Just an idea ;-)

[abotzki]

Very nice, the example with the eye is excellent!