More image options?

[lfb0801]

First of all, I really like the project. I used to use mdp, but really needed images for my slides.

Is there a way to display images within a slide instead of in full screen? Would it then be possible to add multiple images to a slide?

[Tenchi2xh]

First of all, I really like the project. I used to use mdp, but really needed images for my slides.

Is there a way to display images within a slide instead of in full screen? Would it then be possible to add multiple images to a slide?

If you are on a Mac, and use iTerm, you can use imgcat to generate an ANSI escape sequence containing the image that the terminal will interpret and display, which you can paste verbatim in your slides.

I have been doing that for my slides, and if you refer to the doc there are two numbers you can edit in the generated code to adjust the width and height so it fits in the presentation

[cskksdfklpz]

May I ask how should we generate the ANSI Escape sequence and which part shall we paste to the slides?

[Tenchi2xh]

imgcat name_of_image.png | pbcopy

Will render the image as an escape sequence and put it in your clipboard. You can then paste it in your slide:

]1337;File=name=ZmF2aWNvbi5wbmc=;size=1335;inline=1:iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIEDhkEucE1HgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAEm0lEQVRYw9WXy29UVRzHP+ecO3fuTGdaOrTQIoUBgQoCgkUNGAkGoxhDdKGuWJgY/Avc6NKFG7e4c2viEh/RxOBrIQ1BCCD4ojz64Flm2mk7r/s4x8XtzHQ6M9BBCPEkd3Fzz+N7fr/v7/f9XvH2kZzhEQ7JIx6PHIC18GXXOounBix6kgInIh7oQSXPMJU3nJ/wGR7xMYsBrE5J3t3rkEo83KDsWmdxZ67IPzeDegATWc3HXxcYSlv0LZPEbIESIFoEYkWnZM1yBcDVyYCxTIA2zedrDQXPcHvG8Pu4z7Up3TwF41nNeNZd0k32b4nw3osxAIYveRw95f53DiwcEQWqRTaEgJhdu6pjCRJRga+bV3SgwQuWAKAjCjvXRhhISZIxga1aI+9fVvu4M23R2ykxpjkAP4DZkuHatObsmM9U3jQCSDqCw/scdq61sK32KiDdo0j3qHvO08Zwbizgs1+KTM6aegB7ByMMpS1yRcPRUyUycwYvMA2hfP/VOJaCHy64HB/xAVjfK3nrWYeEI/joaL4hdUoKuuOCA9ttdqy12L/F5osT5XoAj3VLLCUYHnH5/rzX8ha+NigpmJjS1VIyBvzAAIIL14LWXU/C4X0x+rtlYwqC+cpIRAURFU42Bjwf7iUWrb4LIGKFpDUGOmOiWpYNAG7kNF5g2LfZ5vEVirIP2bzmmzMuf98I7qvEBvsVr+2wSXVIbAvWLFdoY7iZa9IHTlzy2LpasalPsbJLzhNR4UQER44VyRXaE82uuODNZ6JsGwiPcH3DXMlweTLg14teI4DMnOHTY0XW9yosJVidkhza45DukfR1SnKF9qLQ1ylJ90oCbfj8eJnr05pAGyaymmyzMozZsHfQ5rtzYUcbuSUYSltsXmXVNZ2ljpgtSDqS8xM+P//lkg9Jz6Y+RdELKLqL5HgoHeHQnigbV6r55mG4PRPmylL30WJVJbK6SrqOKHxwMM7uDZFGP1Apw/UrZJ2IVNjc7hCL9oCQhHFbVEWsDkDSCZd0xR6eHHd3iLqz6gBUupdt1Wr7QZhFvWCf6HyLj6gmlmxxmI0B169vUu0Mf36N6xkqItnMK8i7bTBbCncp++3HouSFa6YLBj+4D1MaaLg+pZnIBkwX2gcwOav57YrHaEajzRIMiaExTCev+JwZ8yksMDtSiCVx486s4ZNvi/W3vVsKCm64bU+yFhQvoO5wASQcQaChUK7ByJcNFeWuML2Vj1x4Vh2A0TuakmfYscZiICWJWiFbK08sAq9st6t9fTRTY+aNaU1+HtCBbTYxu35t1IKVXYLnN0bwA8N4pokYnbzi8dKTEQb7LT48GOfsmI+va1KaiAqe2xBOPz1a72wBfvzD450XFG8MRVnVLckVTHWtkvBEv6InKRnPBAyP1MRILPw3HEhJXn86yu4NFpZqDOVMUfPTnx5fnXaZK5tFrgde3mpzYJtN37Lm3D552ePL0y4XbwXNAVREqSsmSTqChCMQQGAMs0XDbMkwXTAtHa4QkOoIHXJXXGDJkLAF1zBTNMwUdVWUWtryogtFV3Mz137zMSaU9cycgcz/5Of0X3X54LhrEFQDAAAAAElFTkSuQmCC

Don't convert a big image and resize them down first because all of those bytes as text will make your text file hard to edit (and quite big).

(instead of | pbcopy you can also > some_file and open that file and copy and paste from there)

Once you have the escape squence for your image you can edit some flags to make it fit your slide. You can add more flags before the : where the image data starts:

]1337;File=name=ZmF2aWNvbi5wbmc=;size=1335;inline=1;width=10:...

Here I added width=10 to make it exactly 10 characters wide (aspect ratio is preserved) but play around until your slide looks good. You can also add some non breaking spaces to the left to try and center the image.

The full docs are here: https://iterm2.com/documentation-images.html

Here's a full example:

---
title: An image has appeared
author: Tenchi
patat:
    wrap: true
    margins:
        left: 30
        right: 30
...

# An image has appeared

## The image

Here's an image:

    ]1337;File=name=ZmF2aWNvbi5wbmc=;size=1335;inline=1;width=10:iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIEDhkEucE1HgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAEm0lEQVRYw9WXy29UVRzHP+ecO3fuTGdaOrTQIoUBgQoCgkUNGAkGoxhDdKGuWJgY/Avc6NKFG7e4c2viEh/RxOBrIQ1BCCD4ojz64Flm2mk7r/s4x8XtzHQ6M9BBCPEkd3Fzz+N7fr/v7/f9XvH2kZzhEQ7JIx6PHIC18GXXOounBix6kgInIh7oQSXPMJU3nJ/wGR7xMYsBrE5J3t3rkEo83KDsWmdxZ67IPzeDegATWc3HXxcYSlv0LZPEbIESIFoEYkWnZM1yBcDVyYCxTIA2zedrDQXPcHvG8Pu4z7Up3TwF41nNeNZd0k32b4nw3osxAIYveRw95f53DiwcEQWqRTaEgJhdu6pjCRJRga+bV3SgwQuWAKAjCjvXRhhISZIxga1aI+9fVvu4M23R2ykxpjkAP4DZkuHatObsmM9U3jQCSDqCw/scdq61sK32KiDdo0j3qHvO08Zwbizgs1+KTM6aegB7ByMMpS1yRcPRUyUycwYvMA2hfP/VOJaCHy64HB/xAVjfK3nrWYeEI/joaL4hdUoKuuOCA9ttdqy12L/F5osT5XoAj3VLLCUYHnH5/rzX8ha+NigpmJjS1VIyBvzAAIIL14LWXU/C4X0x+rtlYwqC+cpIRAURFU42Bjwf7iUWrb4LIGKFpDUGOmOiWpYNAG7kNF5g2LfZ5vEVirIP2bzmmzMuf98I7qvEBvsVr+2wSXVIbAvWLFdoY7iZa9IHTlzy2LpasalPsbJLzhNR4UQER44VyRXaE82uuODNZ6JsGwiPcH3DXMlweTLg14teI4DMnOHTY0XW9yosJVidkhza45DukfR1SnKF9qLQ1ylJ90oCbfj8eJnr05pAGyaymmyzMozZsHfQ5rtzYUcbuSUYSltsXmXVNZ2ljpgtSDqS8xM+P//lkg9Jz6Y+RdELKLqL5HgoHeHQnigbV6r55mG4PRPmylL30WJVJbK6SrqOKHxwMM7uDZFGP1Apw/UrZJ2IVNjc7hCL9oCQhHFbVEWsDkDSCZd0xR6eHHd3iLqz6gBUupdt1Wr7QZhFvWCf6HyLj6gmlmxxmI0B169vUu0Mf36N6xkqItnMK8i7bTBbCncp++3HouSFa6YLBj+4D1MaaLg+pZnIBkwX2gcwOav57YrHaEajzRIMiaExTCev+JwZ8yksMDtSiCVx486s4ZNvi/W3vVsKCm64bU+yFhQvoO5wASQcQaChUK7ByJcNFeWuML2Vj1x4Vh2A0TuakmfYscZiICWJWiFbK08sAq9st6t9fTRTY+aNaU1+HtCBbTYxu35t1IKVXYLnN0bwA8N4pokYnbzi8dKTEQb7LT48GOfsmI+va1KaiAqe2xBOPz1a72wBfvzD450XFG8MRVnVLckVTHWtkvBEv6InKRnPBAyP1MRILPw3HEhJXn86yu4NFpZqDOVMUfPTnx5fnXaZK5tFrgde3mpzYJtN37Lm3D552ePL0y4XbwXNAVREqSsmSTqChCMQQGAMs0XDbMkwXTAtHa4QkOoIHXJXXGDJkLAF1zBTNMwUdVWUWtryogtFV3Mz137zMSaU9cycgcz/5Of0X3X54LhrEFQDAAAAAElFTkSuQmCC

    1234567890

10 characters wide

Hope you like it!

Which looks like this:

Have fun

[jaspervdj]

Apart from the workaround @Tenchi2xh posted, I am not sure if we want to support this.

There are a few different, non-compatible ways to display images in terminals, so I prefer to go with the "lowest common denominator" for now; and displaying a single image as large as possible seems to be a good compromise.

That being said, I'm open to proposals, and if there's a compelling use case, the first thing to do would be to figure out a good syntax to describe the width/height that patat can parse and translate to the different backends.

[gpanders]

Pasting raw escape sequences works for the Kitty graphics protocol as well. Copy the output of kitty +kitten icat $FILENAME directly into the Markdown document, and the image will display inline.

The escape sequence should look something like this:

\x1b_Ga=T,f=100,t=f;<base64 encoded string>\x1b\

[jaspervdj]

Rather than copying the output of kitty +kitten icat into the presentation, you can use eval to do this for you. This uses the new rawInline option added in #158 which I just released in v0.10.2.0.

---
patat:
  eval:
    kitten:
      command: sed 's/^/kitten /' | bash
      replace: true
      fragment: false
      wrap: rawInline
...

See, for example:

```kitten
icat --align left dank-meme.jpg
```

[gpanders]

Rather than copying the output of kitty +kitten icat into the presentation, you can use eval to do this for you. This uses the new rawInline option added in #158 which I just released in v0.10.2.0.

---
patat:
  eval:
    kitten:
      command: sed 's/^/kitten /' | bash
      replace: true
      fragment: false
      wrap: rawInline
...

See, for example:

```kitten
icat --align left dank-meme.jpg

Nice! I was experimenting with my own script that did something similar. Thanks for adding this.