How to preview images - Revision history

Xaizek: /* Other options */ Improve wording of the note.

2025-04-10T11:55:54Z

Other options: Improve wording of the note.

Xaizek: /* Other options */ Update on 24-bit colors and add to the list of tools

2025-04-10T11:54:53Z

Other options: Update on 24-bit colors and add to the list of tools

190.47.145.62: Add project vifmimg to the list

2023-08-24T23:09:00Z

Add project vifmimg to the list

Zodiac: Added kitty. Linked to a github issue where the configuration of kitty is discussed.

2023-07-12T08:48:51Z

Added kitty. Linked to a github issue where the configuration of kitty is discussed.

Xaizek: /* Überzug */ Not that original project isn't maintained

2023-02-25T17:59:58Z

Überzug: Not that original project isn't maintained

Xaizek: Source tags updates and HOWTO category

2021-08-31T11:43:07Z

Source tags updates and HOWTO category

Qsmodo: The shell script is now POSIX compliant and thus not dependent on Bash. All-uppercase variables are conventionally reserved for environment variables.

2021-05-24T17:52:31Z

The shell script is now POSIX compliant and thus not dependent on Bash. All-uppercase variables are conventionally reserved for environment variables.

Xaizek: Add tools that interpolate

2020-09-29T14:23:54Z

Add tools that interpolate

Xaizek: Add information about using Sixel

2020-09-29T12:12:54Z

Add information about using Sixel

Xaizek: Reorganize general structure and apply some minor updates

2020-09-29T12:03:53Z

Reorganize general structure and apply some minor updates

@@ Line 157: / Line 157: @@
 In case everything else doesn't work well and you're fine sacrificing quality, there are numerous other tools which approximate images using characters.
-{{NOTE|text=Vifm prior to v0.12 doesn't support 24-bit colors, so undefine <code>$COLORTERM</code> when using some of these tools (e.g., by prepending <code>env -u COLORTERM</code>).}}
+{{NOTE|text=Vifm before v0.12 didn't support 24-bit colors, so undefine <code>$COLORTERM</code> when using some of these tools (e.g., by prepending <code>env -u COLORTERM</code>) if your version is older than that.}}
 Non-exhaustive list of such tools:

@@ Line 157: / Line 157: @@
 In case everything else doesn't work well and you're fine sacrificing quality, there are numerous other tools which approximate images using characters.
-{{NOTE|text=As of v0.11 Vifm doesn't support 24-bit colors, so undefine <code>$COLORTERM</code> when using some of these tools (e.g., by prepending <code>env -u COLORTERM</code>).}}
+{{NOTE|text=Vifm prior to v0.12 doesn't support 24-bit colors, so undefine <code>$COLORTERM</code> when using some of these tools (e.g., by prepending <code>env -u COLORTERM</code>).}}
-Some of those tools:
+Non-exhaustive list of such tools:
 * [https://github.com/larsjsol/shellpic shellpic]
 * [https://github.com/rr-/termi termi]
 * [https://github.com/stefanhaustein/TerminalImageViewer TerminalImageViewer]
 * [https://github.com/atanunq/viu viu]
 [[Category:HOWTO]]

← Older revision		Revision as of 23:09, 24 August 2023
Line 6:		Line 6:

	{{NOTE\|text=Because terminals were built to display text rather than images, making them display images can be problematic. Some solutions work better in some environments than others, but none of them is perfect.}}		{{NOTE\|text=Because terminals were built to display text rather than images, making them display images can be problematic. Some solutions work better in some environments than others, but none of them is perfect.}}
		+
		+	== Vifmimg ==
		+
		+	For a painless image preview integration visit the project [https://github.com/thimc/vifmimg vifmimg on Github].

	== Überzug ==		== Überzug ==

@@ Line 144: / Line 144: @@
 * [https://github.com/vifm/vifm/issues/82 Issue #82 on GitHub] for similar description and some discussion of some issues.
 * [https://github.com/vifm/vifm/issues/102 Issue #102 on GitHub] for report on image clearing issues.
 == Other options ==

@@ Line 11: / Line 11: @@
 For an instruction on how to use [https://github.com/seebye/ueberzug Überzug], which is likely to work better than <code>w3m</code>, see [https://www.youtube.com/watch?v=qgxsduCO1pE this video].
 The video is based on [https://www.reddit.com/r/linux/comments/aviu08/ueberzug_v1810_released/ehfj0s4/ this thread].
 == iTerm2 ==

@@ Line 37: / Line 37: @@
 after correcting several parameters at the top.
-<source lang="sh">
+<syntaxhighlight lang="sh">
 #!/bin/sh
+#
@@ Line 77: / Line 77: @@
 printf '0;1;%s;%s;%s;%s;;;;;%s\n4;\n3;' "$x" "$y" "$width" "$height" "$file" |
      "$w3mimgdisplay"
-</source>
+</syntaxhighlight>
 . Update vifmrc with preview command like the following:
-<source lang="bash">
+<syntaxhighlight lang="bash">
 fileviewer *.bmp,*.jpg,*.jpeg,*.png,*.gif,*.xpm
           \ imgt %px %py %pw %ph %c
-</source>
+</syntaxhighlight>
 Replace "imgt" with path to preview script or just update name if
@@ Line 110: / Line 110: @@
 script for clearing image leftovers (below), development version of vifm and changed <code>:fileviewer</code> command like this:
-<source lang="bash">
+<syntaxhighlight lang="bash">
 fileviewer *.bmp,*.jpg,*.jpeg,*.png,*.gif,*.xpm
           \ imgt %px %py %pw %ph %c
           \ %pc
           \ imgc %px %py %pw %ph
-</source>
+</syntaxhighlight>
 Where <code>imgc</code> is a script that clears background of the terminal (it's configuration is at the top):
-<source lang="bash">
+<syntaxhighlight lang="bash">
 #!/bin/bash
@@ Line 134: / Line 134: @@
 erase="6;$x;$y;$(( FONTW*COLUMNS ));$(( FONTH*LINES ))\n3;"
 echo -e "$erase" | $W3MIMGDISPLAY
-</source>
+</syntaxhighlight>
 This is the case at least for <code>urxvt</code>.
@@ Line 155: / Line 155: @@
 * [https://github.com/stefanhaustein/TerminalImageViewer TerminalImageViewer]
 * [https://github.com/atanunq/viu viu]

@@ Line 37: / Line 37: @@
 after correcting several parameters at the top.
-<source lang="bash">
+<source lang="sh">
-#!/bin/bash
+#!/bin/sh
+#
 # Based on script by z3bra -- 2014-01-21
-W3MIMGDISPLAY="/usr/libexec/w3m/w3mimgdisplay"
+w3mimgdisplay='/usr/libexec/w3m/w3mimgdisplay'
-FONTH=15 # Size of one terminal row
+fonth=15 # Size of one terminal row    in pixels
-FONTW=7 # Size of one terminal column
+fontw=8  # Size of one terminal column in pixels
-X=$1
+x=$1
-Y=$2
+y=$2
-COLUMNS=$3
+cols=$3
-LINES=$4
+lines=$4
-FILENAME=$5
+file=$5
-read width height <<< `echo "5;$FILENAME" | $W3MIMGDISPLAY`
+widthheight=$(printf '5;%s' "$file" | "$w3mimgdisplay")
-if [ -z "$width" -o -z "$height" ]; then
+width=${widthheight% *}
-     echo 'Error: Failed to obtain image size.'
+height=${widthheight#* }
      exit 1
 fi
-x=$((FONTW * X))
+x=$((fontw * x))
-y=$((FONTH * Y))
+y=$((fonth * y))
+max_width=$((fontw * cols))
-max_width=$((FONTW * COLUMNS))
+max_height=$((fonth * lines))
 if [ "$width" -gt "$max_width" ]; then
@@ Line 73: / Line 75: @@
 fi
-w3m_command="0;1;$x;$y;$width;$height;;;;;$FILENAME\n4;\n3;"
+printf '0;1;%s;%s;%s;%s;;;;;%s\n4;\n3;' "$x" "$y" "$width" "$height" "$file" |
+    "$w3mimgdisplay"
 </source>

@@ Line 5: / Line 5: @@
 * <code>%ph</code> height of preview area.
-Note that because terminals were built to display text rather than images, making them display images can be problematic.  Some solutions work better in some environments than in others and none of them is perfect.
+{{NOTE|text=Because terminals were built to display text rather than images, making them display images can be problematic.  Some solutions work better in some environments than others, but none of them is perfect.}}
 == Überzug ==
@@ Line 141: / Line 141: @@
 * [https://github.com/vifm/vifm/issues/82 Issue #82 on GitHub] for similar description and some discussion of some issues.
 * [https://github.com/vifm/vifm/issues/102 Issue #102 on GitHub] for report on image clearing issues.

← Older revision		Revision as of 12:12, 29 September 2020
Line 15:		Line 15:

	See [https://github.com/vifm/vifm/issues/299 issue #299 on GitHub] for a command for OS X in iTerm2.		See [https://github.com/vifm/vifm/issues/299 issue #299 on GitHub] for a command for OS X in iTerm2.
		+
		+	== Sixel graphics ==
		+
		+	If you're using a terminal which has good support of [https://en.wikipedia.org/wiki/Sixel Sixel] (i.e., it clears it properly) along with Vifm v0.10.1+ (for <code>%pd</code> macro), see [https://github.com/vifm/vifm/issues/419#issuecomment-485918513 issue #419 on GitHub] for sample configuration.

	== w3m ==		== w3m ==

@@ Line 1: / Line 1: @@
-Starting with 0.8 vifm provides four macros describing preview area that can be used along with external applications to preview images in a terminal, they are:
+Vifm v0.8 onward provides four macros describing preview area that can be used along with external applications to preview images in a terminal, they are:
 * <code>%px</code> x coordinate of top-left corner of preview area;
 * <code>%py</code> y coordinate of top-left corner of preview area;
@@ Line 5: / Line 5: @@
 * <code>%ph</code> height of preview area.
-Below is a description and an example of making this work using <code>w3m</code> on GNU/Linux.
+Note that because terminals were built to display text rather than images, making them display images can be problematic.  Some solutions work better in some environments than in others and none of them is perfect.
-Mind that the support is lacking and you might have trouble making this work in many terminals. <code>xterm</code> without double-buffering tends to work bettern than others.
-See the last section for a way of making it work on OS X with iTerm2.
+== Überzug ==
 For an instruction on how to use [https://github.com/seebye/ueberzug Überzug], which is likely to work better than <code>w3m</code>, see [https://www.youtube.com/watch?v=qgxsduCO1pE this video].
 The video is based on [https://www.reddit.com/r/linux/comments/aviu08/ueberzug_v1810_released/ehfj0s4/ this thread].
 === Prerequisites ===
@@ Line 74: / Line 83: @@
 Replace "imgt" with path to preview script or just update name if
 script is available in your <code>$PATH</code> (which is the case if you put it
-under <code>~/.vifm/scripts</code>).
+under <code>$VIFM/scripts</code>).
 === Notes ===
@@ Line 128: / Line 137: @@
 * [https://github.com/vifm/vifm/issues/82 Issue #82 on GitHub] for similar description and some discussion of some issues.
 * [https://github.com/vifm/vifm/issues/102 Issue #102 on GitHub] for report on image clearing issues.