Emacs: HTML Image Path to Img Tag

By Xah Lee. Date: . Last updated: .

Emacs lisp command that changes a image path into a HTML image link.

Problem

You have this under cursor:

/home/xah/web/cat.jpg

you want it to be this:

<img src="cat.jpg" alt="cat" width="600" height="400" />

Solution

Get Image Dimensions

First, here's the code for getting the image width and height.

(defun xah-get-image-dimensions (Filepath)
  "Returns a vector [width height] of a image's dimension.
The elements are integer datatype.
Support png jpg svg gif and any image type emacs supports.
if not supported image type, calls `xah-get-image-dimensions-imk'.

URL `http://xahlee.info/emacs/emacs/elisp_image_tag.html'
Version: 2017-01-11 2021-09-01 2023-09-13"
  (if (image-type-available-p (intern-soft (file-name-extension Filepath)))
      (let (ximg)
        (clear-image-cache Filepath)
        (setq ximg (image-size (create-image (file-truename Filepath)) t))
        (vector (car ximg) (cdr ximg)))
    (xah-get-image-dimensions-imk Filepath)))

(defvar xah-imagemagick-path
  (if (eq system-type 'windows-nt) "magick.exe" "magick")
  "Full file path or program name of ImageMagick program.
On mac/linux, this is usually “magick”, on Windows it's usually “magick.exe”.")

(defun xah-get-image-dimensions-imk (Filepath)
  "Returns a image file's width and height as a vector.
Each element is a integer.
This function requires the shell command: magick identify.
See also: `xah-get-image-dimensions'.

URL `http://xahlee.info/emacs/emacs/elisp_image_tag.html'
Version: 2015-05-12 2021-09-01 2023-01-26 2023-09-12"
  (let ((xwidthHeight
         (split-string
          (shell-command-to-string
           (concat xah-imagemagick-path " identify -format \"%w %h\" " Filepath)))))
    (vector
     (string-to-number (elt xwidthHeight 0))
     (string-to-number (elt xwidthHeight 1)))))

Image Path to HTML Image Link

latest code at Emacs: Xah HTML Mode (xah-html-mode.el) 

(defun xah-html-image-linkify ()
  "Replace image file path under cursor to HTML img inline link.
Example:
 img/my_cats.jpg
become

 <img src=\"img/my_cats.jpg\" alt=\"my cats\" width=\"470\" height=\"456\" />

If `univers-argument' is called before, don't width and height attribute.

Returns the string used in the alt attribute.

URL `http://xahlee.info/emacs/emacs/elisp_image_tag.html'
Version 2018-06-14 2021-01-12"
  (interactive)
  (let ( $p1 $p2 $imgPath $hrefValue $altText $imgWH $width $height)
    (save-excursion
      ;; get image file path begin end pos
      (let ($p0)
        (setq $p0 (point))
        ;; chars that are likely to be delimiters of full path, e.g. space, tabs, brakets.
        (skip-chars-backward "^  \"\t\n'|()[]{}<>〔〕“”〈〉《》【】〖〗〘〙«»‹›·。\\`")
        (setq $p1 (point))
        (goto-char $p0)
        (skip-chars-forward "^  \"\t\n'|()[]{}<>〔〕“”〈〉《》【】〖〗〘〙«»‹›·。\\'")
        (setq $p2 (point))
        (goto-char $p0)))
    (setq $imgPath
          (if (fboundp 'xahsite-web-path-to-filepath)
              (xahsite-web-path-to-filepath
               (xah-html-local-url-to-file-path
                (buffer-substring-no-properties $p1 $p2 )))
            (buffer-substring-no-properties $p1 $p2 )))
    (when (not (file-exists-p $imgPath))
      (user-error "file not exist at %s"  $imgPath))
    (setq $hrefValue
          (file-relative-name
           $imgPath
           (file-name-directory (or (buffer-file-name) default-directory))))
    (setq $altText
          (replace-regexp-in-string
             "_" " "
             (replace-regexp-in-string
              "\\.[A-Za-z]\\{3,4\\}$" "" (file-name-nondirectory $imgPath) t t) t t))
    (if current-prefix-arg
        (progn
          (delete-region $p1 $p2)
          (insert
           (concat
            "<img src=\""
            $hrefValue
            "\"" " " "alt=\"" $altText "\"" " />")))
      (progn
        (setq $imgWH (xah-get-image-dimensions $imgPath))
        (setq $width (number-to-string (elt $imgWH 0)))
        (setq $height (number-to-string (elt $imgWH 1)))

        (delete-region $p1 $p2)
        (insert
         (if (or (equal $width "0") (equal $height "0"))
             (concat
              "<img src=\""
              $hrefValue
              "\"" " " "alt=\"" $altText "\"" " />")
           (concat
            "<img src=\""
            $hrefValue
            "\"" " " "alt=\"" $altText "\""
            " width=\"" $width "\""
            " height=\"" $height "\" />")))))
    $altText
    ))

HTML