Image Slicing

Overview

In Emacs, displaying an image occupies one line regardless of its height. The movement over the image while navigating by lines can be quite frustrating.

Although pixel-scroll and iscroll have improved image movement to some extent.

I hope to move images in the same way as moving text, line by line.

So I created this package to horizontally slice the images referenced in the buffer into multiple images. In Emacs, only a portion of the original image is displayed on each line. Finally, the image can be moved line by line.

During the development process, I found org-sliced-images which was almost the same as my idea. And thanks to him for letting me know about insert-sliced-image in Emacs.

Prerequisites

CLI

Curl: Used to download remote images.

Require Packages

• org-element: Used to parse the buffer to retrieve all links.
• image: Used to create an image object.
• url-util : A utility for handling URL formats.

Install

• clone the project in your own emacs configuration files directory, like:

git clone [email protected]:ginqi7/image-slicing.git ~/.emacs.d/lisp/image-slicing

• add the path to 'load-path'

(add-to-list 'load-path (expand-file-name "~/.emacs.d/lisp/d/lisp/image-slicing"))

Configuration

Here are a few variables that can be used for configuration:

(require 'image-slicing)

Variables

EWW Config

1. cancel the eww defualt image render.

(add-to-list 'shr-external-rendering-functions
             '(img . image-slicing-tag-img))

1. Add image-slicing to eww-after-render-hook

(push #'image-slicing-mode eww-after-render-hook)

Elfeed Config

image-slice can also work with elfeed:

;; add to shr-external-rendering-functions (skip if alread setup for eww)
(add-to-list 'shr-external-rendering-functions
             '(img . image-slicing-tag-img))

;; advice `elfeed-show-entry' to trigger `image-slicing-mode'
(advice-add #'elfeed-show-entry :after #'image-slicing-mode)

Features

• image-slicing-mode: Automatically finds image links in the buffer and renders them as multiline display.
• Asynchronous: Asynchronous download of remote images.
• Multiple Modes: Support multiple modes like org-mode, eww, elfeed.

Supported Link Format

• Org Links
  • [[url][tag]]
  • [[url]]
• Pure Links
  • file:./hello.png
  • http://image.png
• EWW Html Links
  • <img src=''>
  • Support base64 formatted images

Example

Disadvantages

• If there are many remote image links in the buffer, it will generate many temporary image files in the temporary system directory.
• If the URL link is too short, the number of slices of the original image will be small, and the image line height will be large.
• Only one buffer can be rendered at a time.

Todo List

• Adapt nov

Development History

Dec 18, 2024

I find a similar package named org-sliced-images, so I study some code from it to make my code simpler.

In Emacs, we can display a part of an image by using ('display . (list (list 'slice x y dx dy) image)), without needing to actually slice the image using ImageMagick, so I remove the dependency about ImageMagick.

Dec 16, 2024

There have some issues in last version:

1. There is slow when ImageMagick handle remote images.
2. Though I will delete the placeholders when the user removes the overlays, there is still a risk of polluting the users' buffer.

So I use asynchronous processes to run ImageMagick, guaranteeing that it will not freeze Emacs. On the other hand, I removed the placeholder and just placed some overlays on the original URL text.

May 12, 2023

I got the idea to slice the image into many pieces, making Emacs display the pieces line by line.

1. Use the CLI ImageMagick to slice images.
2. Insert some special text like "#_#_@@_#_#" as placeholder, and put an overlay on that placeholder to show image pieces.

Footnotes