Support Images

[maaslalani]

Some terminals support image viewing like ITerm2 and Kitty. We could support viewing images in slides. If a terminal doesn't support images we could fallback to converting the image to ASCII and displaying that.

[darylhjd]

I'm interested to see how you tackle this, as I have a project that would like to implement this feature as well.

As far as I know, certain libraries that show images in terminals come as standalone programs, such as pxl or pixterm. Is there a way you could integrate this perhaps?

[dominikb1888]

This would be a great feature. I have been using via on iTerm2 for some time now: https://github.com/atanunq/viu However the binary output is currently not converted.

[marcotrosi]

some inspiration and additions to what the others mentioned ...

https://saitoha.github.io/libsixel/ https://github.com/atanunq/viu https://github.com/ichinaski/pxl https://github.com/eliukblau/pixterm https://savannah.nongnu.org/projects/fbi-improved/ https://github.com/hackerb9/lsix https://github.com/hzeller/timg https://github.com/stefanhaustein/TerminalImageViewer https://github.com/hackerb9/lsix https://www.nongnu.org/fbi-improved/ https://sw.kovidgoyal.net/kitty/kittens/icat/ https://github.com/seebye/ueberzug

[maaslalani]

These image viewers look awesome! I'd really like to have images in slides and using a program like viu to do that seems like a great option.

Maybe we can do some special processing to detect

![Some image](./path/to/img.jpg)

And shell out and generate the image and drop in the correct format when presenting, but I'm not particularly sure how that will work. I like the idea of using viu though.

[dominikb1888]

I understand that glow is rendering the output. there's a discussion going on there https://github.com/charmbracelet/glow/issues/211

[maaslalani]

I understand that glow is rendering the output. there's a discussion going on there https://github.com/charmbracelet/glow/issues/211

Nice! Yea we use glamour (which is a little different than glow) but whatever solution they implement we should be able use in slides since glow and slides both use https://github.com/charmbracelet/glamour

[gerazov]

Great work! :sunglasses:

It seems that lookatme is less active lately and slides seems like the successor :+1:

Image support is something that's very important. I'm sure you're already aware of this, but it posting here as a reference lookatme relies on ueberzug and it works nicely - lookatme.contrib.image_ueberzug

[airtonix]

This would greatly expand our graphing options 👍🏻

[Piotr1215]

Resurrecting this thread, any chance this feature will be added? One last missing piece for awesome presentations :).

Edit: I found a workaround.. kind of. Displaying image works for me when using this

```bash 
chafa ~/Pictures/test.jpg
```

I still need to Ctrl+e but at least the image is displayed.

[elalemanyo]

Resurrecting this thread, any chance this feature will be added? One last missing piece for awesome presentations :).

Edit: I found a workaround.. kind of. Displaying image works for me when using this

```bash 
chafa ~/Pictures/test.jpg

I still need to Ctrl+e but at least the image is displayed.

It works!! Not very friendly but thanks for the idea! 🙂 Why is not working directly with three tildes (~)? 🤔

[xezo360hye]

Any progress or plans here? None of chafa, viu or imgcat work for me in slides (the latter two make it freeze by the way), so the only way to display images is to use jp2a to convert to it ASCII

[stordahl]

Also want to bump this - would love to have image support in slides!

[marcusramberg]

chafa didn't work for me either, even with ctrl-e. Would be a killer feature imo.

[chakrakan]

honestly, if this gets image support, it'll be my go-to driver for presentations 🥺

[maaslalani]

Thank you everyone for your activity on this thread! I definitely want to implement this feature, but I haven't been able to carve out the time to work on it just yet. Image support in slides is one of the most requested features by far, and it's definitely possible to implement. Hopefully, I'll be able to add this feature soon. 🙂

[jficz]

I believe this is the reason why chafa and similar approaches don't work for some people. The standard renderer truncates all the lines to the available terminal width regardless their content which of course breaks both Sixel and the superior Kitty graphics protocol by default.

While I was able to work around this limitation somewhat with Sixels by post-processing the chafa output by just splitting the string to new lines before each # (chafa image.png | sed 's/#/\n#/g'), I was unable to make the Kitty format work even with strings as short as 30 characters.

I couldn't find any obvious reason for it so far though :man_shrugging: (went as far as here which returns a string which, if rendered by Kitty directly, works as expected, but the image doesn't render with the bubbletea's renderer flush())

[jficz]

Being a total Go n00b, I can only theorize about a solution that could be made on slides side - a custom renderer which overrides the standard renderer's flush() to not truncate lines containing (or beginning with) certain APCs (like Sixels or Kitty graphics) but I think that would only solve the Sixel problem, not the Kitty problem.

As for obtaining the image data, if I read the code correctly, it still can't be implemented in Slides unless a very custom pre-processing is made or the upstream template renderers are patched.

[mark-lumbao]

Using chafa with preprocessing feature works on my end. Below is my sample syntax:

# ```
# ~~~chafa image.png
# placeholder text
# ~~~
# ```

Below is a sample rendering:

https://github.com/maaslalani/slides/assets/9671486/2abffb40-97e5-4774-afc0-4410d32709da

[fredrikaverpil]

Wow, this is so nice. With wezterm, this worked well for me (setting --format symbols:

Side-notes

What doesn't work is to just leave out the --format setting:

If I run chafa outside of slides, sharp images can be shown without issues (again, using wezterm):

[v4nderstruck]

I did some experiments with it and I got it working with the ITerm Image protocol since I'm runninng wezterm. It is not very well implemented and not very configurable so far. When I have some time, I may fix everything and create a PR but thats probably not so easy since the fix depends on a lot of other projects...

In a Nutshell:

• I use https://github.com/atanunq/viu to get the encoded ITerm Protocol from the image
• Remove any formating in the https://github.com/muesli/reflow for line containing the image
• Make https://github.com/charmbracelet/bubbletea standard_renderer not truncate the line containing the image
• Make https://github.com/charmbracelet/glamour actually use viu to render the image instead of the Text
• Added offset to the slides model.go to account for extra non accounted lines from the image

Here an image embedded using markdown ![Image](./test.png) (relative paths, too)

(I use transparent Terminal with an images as background. Hence, the wallpaper in the background)

[maaslalani]

@v4nderstruck This is awesome! I am happy to accept a PR (muesli and charmbracelet dependencies are always fine) and then perhaps we can make chafa / viu optional / opt in and let choose whichever is installed on the computer by default.

[mfontanini]

Happy to see movement in this issue! Coincidentally I started building a new presentation tool a few weeks back with the main goal of supporting images and I just released the first version. Because the tool implements the rendering itself rather than relying on an external library (like glamour in this case), it's more straightforward to render images and it doesn't require any external tools to do so.

PS: sorry for the shameless plug PS2: this issue was the main motivator for me to create a new tool so I'm happy it seems to finally be coming to an end!

[maaslalani]

@mfontanini Your tool looks super, thanks for sharing!!! Really happy to see that slides inspired you to build presenterm. Good luck with the project! ❤️

PS: your README looks great.

PPS: I'd highly suggest sharing your project on reddit, that's how slides gained a bit of popularity.

[maaslalani]

Also @mfontanini, I'd happily accept a PR adding presenterm to the list of alternatives in the slides README if that's something you're interested in.

[rsteube]

fyi: https://github.com/mattn/go-sixel

https://github.com/maaslalani/slides/compare/main...rsteube:slides:sixel

[nivethan-me]

@maaslalani Thank you for all the hard work, this project looks awesome, i only waiting for some image support to use this for all my lectures, any updates on this issue please?

[maaslalani]

@maaslalani Thank you for all the hard work, this project looks awesome, i only waiting for some image support to use this for all my lectures, any updates on this issue please?

Hey @nivethan-me, no update so far. Haven't found free time to work on this issue yet, unfortunately. PRs are very welcome for image support!

[rodrigomeireles]

Bumping because no other tool is as good as yours but you seem to be missing this very crucial feature. I'd be willing to contribute with some support to get started. @maaslalani