emacs lisp, add width to image thumbnails (2026-06)

By Xah Lee. Date: . Last updated: .

add width to image thumbnails

;; -*- coding: utf-8; lexical-binding: t; -*-

;; 2026-06-21

;; go thru all html files in my website,
;; for each, open it
;; search for tags like this
;; <img src="kinesis/Kinesis_top_view_194406-s289x217.jpg" alt="thumbnail" />
;; add a width and height attribute

(setq xoutbuff (get-buffer-create "*thumb output*"))

(with-current-buffer xoutbuff (goto-char (point-max))
                  (insert "\n============\n"))

(defun xah-fix-add-thumbnail-width-file (zfilepath zoutbuffer)
  "open zfilepath
search for tags like this
<img src=\"kinesis/Kinesis_top_view_194406-s289x217.jpg\" alt=\"thumbnail\" />
;; add a width and height attribute
Created: 2026-06-21
Version: 2026-06-22"
  (interactive)
  (let (xend xpath-beg xpath-end
             xhref-value ximgpath
             xwidth xheight xfileChanged-p)

    (with-temp-buffer
      (insert-file-contents zfilepath)
      (goto-char (point-min))
      ;; find string like this
      ;; <img src="kinesis/Kinesis_top_view_194406-s289x217.jpg" alt="thumbnail" />
      (while (re-search-forward "<img src=\"\\([^\"]+\\)\" alt=\"thumbnail\" />" nil t)
        (princ "\n---------\n" zoutbuffer)
        (princ zfilepath zoutbuffer)
        (terpri zoutbuffer)
        (setq xend (match-end 0))
        (setq xpath-beg (match-beginning 1))
        (setq xpath-end (match-end 1))
        (setq xhref-value (buffer-substring-no-properties xpath-beg xpath-end))
        (setq ximgpath (expand-file-name xhref-value (file-name-directory zfilepath)))

        ;; (if (string-match "\.svg$" xhref-value)
        ;;     (progn
        ;;       (princ (buffer-substring-no-properties (pos-bol) (pos-eol)) zoutbuffer)
        ;;       (terpri zoutbuffer))
        ;;   (progn
        ;;     (seq-setq (xwidth xheight) (xah-get-image-size ximgpath))
        ;;     (goto-char xend)
        ;;     (backward-char 3)
        ;;     (insert (format " width=\"%s\" height=\"%s\"" xwidth xheight))
        ;;     (princ (buffer-substring-no-properties (pos-bol) (pos-eol)) zoutbuffer)
        ;;     (terpri zoutbuffer)
        ;;     (setq xfileChanged-p t)))

        (progn
          (seq-setq (xwidth xheight) (xah-get-image-size ximgpath))
          (goto-char xend)
          (backward-char 3)
          (insert (format " width=\"%s\" height=\"%s\"" xwidth xheight))
          (princ (buffer-substring-no-properties (pos-bol) (pos-eol)) zoutbuffer)
          (terpri zoutbuffer)
          (setq xfileChanged-p t))
        ;;

        )
      (when xfileChanged-p
        (princ (format "write %s" zfilepath) zoutbuffer)
        (terpri zoutbuffer)
        (write-region (point-min) (point-max) zfilepath))
      ;;
      )))

(mapc
 (lambda (x)
   (xah-fix-add-thumbnail-width-file x xoutbuff))
 '(
   ;;

"c:/Users/xah/web/xahlee_info/kbd/Alice_Layout.html"
"c:/Users/xah/web/xahlee_info/kbd/Apple_MacBook_touchbar_2016.html"
"c:/Users/xah/web/xahlee_info/kbd/Beats_Solo3_Headphones.html"
"c:/Users/xah/web/xahlee_info/kbd/CM_Storm_NovaTouch_keyboard.html"
"c:/Users/xah/web/xahlee_info/kbd/Elgato_Stream_Deck_keypad.html"

"c:/Users/xah/web/xahlee_info/UnixResource_dir/complang.html"
"c:/Users/xah/web/xahlee_info/UnixResource_dir/freebooks.html"

"c:/Users/xah/web/xahlee_info/UnixResource_dir/lambda_logo.html"
"c:/Users/xah/web/xahlee_info/UnixResource_dir/writ/language_to_hate.html"
"c:/Users/xah/web/xahlee_info/UnixResource_dir/writ/logo_lisp.html"
"c:/Users/xah/web/xahlee_info/comp/FSF_free_beer_free_speech.html"
"c:/Users/xah/web/xahlee_info/comp/blog_past_2013-03.html"
"c:/Users/xah/web/xahlee_info/comp/blog_past_2021-05.html"
"c:/Users/xah/web/xahlee_info/comp/blog_past_2022-10.html"
"c:/Users/xah/web/xahlee_info/comp/blog_past_2024-01.html"
"c:/Users/xah/web/xahlee_info/comp/comp_index.html"
"c:/Users/xah/web/xahlee_info/comp/comp_lang_tutorials_index.html"
"c:/Users/xah/web/xahlee_info/comp/unicode_APL_symbols.html"
"c:/Users/xah/web/xahlee_info/comp/why_bash_sucks.html"

"c:/Users/xah/web/xahlee_info/emacs/emacs/ErgoEmacs_logo.html"
"c:/Users/xah/web/xahlee_info/emacs/emacs/blog_past_2021-01.html"
"c:/Users/xah/web/xahlee_info/emacs/emacs/emacs_logo.html"
"c:/Users/xah/web/xahlee_info/emacs/emacs/gnu_logo_latte_art.html"
"c:/Users/xah/web/xahlee_info/emacs/emacs/lisp_logo.html"
"c:/Users/xah/web/xahlee_info/emacs/emacs/qi_logo.html"
"c:/Users/xah/web/xahlee_info/emacs/emacs/yinyang_lisp_logo.html"
"c:/Users/xah/web/xahlee_info/emacs/misc/emacs_logo_Halloween_pumpkin.html"
"c:/Users/xah/web/xahlee_info/emacs/misc/xah-fly-keys_batman_keyboard_layouts.html"
"c:/Users/xah/web/xahlee_info/haskell/haskell.html"
"c:/Users/xah/web/xahlee_info/index.html"
"c:/Users/xah/web/xahlee_info/js/blog_past_2013-03.html"
"c:/Users/xah/web/xahlee_info/kbd/IBM_2741_printing_terminal.html"
"c:/Users/xah/web/xahlee_info/kbd/alt_tab_no_good.html"
"c:/Users/xah/web/xahlee_info/kbd/banish_key_chords.html"
"c:/Users/xah/web/xahlee_info/kbd/banish_shift_key.html"
"c:/Users/xah/web/xahlee_info/kbd/best_number_key_layout.html"
"c:/Users/xah/web/xahlee_info/kbd/best_palm_rest.html"
"c:/Users/xah/web/xahlee_info/kbd/best_way_to_insert_brackets.html"
"c:/Users/xah/web/xahlee_info/kbd/blank_keycaps_vs_labeled_keys.html"
"c:/Users/xah/web/xahlee_info/kbd/char_frequency_counter.html"
"c:/Users/xah/web/xahlee_info/kbd/colemak_layout.html"
"c:/Users/xah/web/xahlee_info/kbd/computer_operation_efficiency.html"
"c:/Users/xah/web/xahlee_info/kbd/creating_apl_keyboard_layout.html"
"c:/Users/xah/web/xahlee_info/kbd/diy_keyboards_index.html"
"c:/Users/xah/web/xahlee_info/kbd/dvorak_and_all_keyboard_layouts.html"
"c:/Users/xah/web/xahlee_info/kbd/dvorak_vs_colemak_vs_workman.html"
"c:/Users/xah/web/xahlee_info/kbd/efficiency_of_keybinding_emacs_vs_vim.html"
"c:/Users/xah/web/xahlee_info/kbd/ergodox_keyboard.html"
"c:/Users/xah/web/xahlee_info/kbd/ergodox_keyboard_layouts.html"
"c:/Users/xah/web/xahlee_info/kbd/function_key_vs_key_chord.html"
"c:/Users/xah/web/xahlee_info/kbd/history_of_vi_keys.html"
"c:/Users/xah/web/xahlee_info/kbd/how_many_keyboard_shortcuts.html"
"c:/Users/xah/web/xahlee_info/kbd/how_many_keystrokes_programers_type_a_day.html"
"c:/Users/xah/web/xahlee_info/kbd/how_to_press_control_key.html"
"c:/Users/xah/web/xahlee_info/kbd/ibm_5100_keyboard.html"
"c:/Users/xah/web/xahlee_info/kbd/keybinding_index.html"
"c:/Users/xah/web/xahlee_info/kbd/keyboard_Kinesis_thumb_keys_layout.html"
"c:/Users/xah/web/xahlee_info/kbd/keyboard_blog_archive_2019-12.html"
"c:/Users/xah/web/xahlee_info/kbd/keyboard_blog_archive_2020-03.html"
"c:/Users/xah/web/xahlee_info/kbd/keyboard_blog_archive_2021-06.html"
"c:/Users/xah/web/xahlee_info/kbd/keyboard_blog_archive_2022-01.html"
"c:/Users/xah/web/xahlee_info/kbd/keyboard_dvorak_layout.html"
"c:/Users/xah/web/xahlee_info/kbd/keyboard_effect_of_mechanical_key_switches.html"
"c:/Users/xah/web/xahlee_info/kbd/keyboard_enter_key_symbol.html"
"c:/Users/xah/web/xahlee_info/kbd/keyboard_forearm_pronation.html"
"c:/Users/xah/web/xahlee_info/kbd/keyboard_hardware_and_key_choices.html"
"c:/Users/xah/web/xahlee_info/kbd/keyboard_key_label_significance.html"
"c:/Users/xah/web/xahlee_info/kbd/keyboard_keycap_gallery.html"
"c:/Users/xah/web/xahlee_info/kbd/keyboard_keycap_printing.html"
"c:/Users/xah/web/xahlee_info/kbd/keyboard_keycap_shops.html"
"c:/Users/xah/web/xahlee_info/kbd/keyboard_keycaps.html"
"c:/Users/xah/web/xahlee_info/kbd/keyboard_layout_inverted_number_row.html"
"c:/Users/xah/web/xahlee_info/kbd/keyboard_layout_keybinding.html"
"c:/Users/xah/web/xahlee_info/kbd/keyboard_remap_copy_cut_paste_undo.html"
"c:/Users/xah/web/xahlee_info/kbd/keyboard_review_gallery.html"
"c:/Users/xah/web/xahlee_info/kbd/keyboard_special_buttons.html"
"c:/Users/xah/web/xahlee_info/kbd/keycap_profiles.html"
"c:/Users/xah/web/xahlee_info/kbd/keycaps_index.html"
"c:/Users/xah/web/xahlee_info/kbd/linux_vs_windows_vs_mac_best_keybinding.html"
"c:/Users/xah/web/xahlee_info/kbd/maltron_vs_dvorak_layout.html"
"c:/Users/xah/web/xahlee_info/kbd/math_symbol_input_system.html"
"c:/Users/xah/web/xahlee_info/kbd/mcm_model_70_comp.html"
"c:/Users/xah/web/xahlee_info/kbd/modernization_hotkey_notation.html"
"c:/Users/xah/web/xahlee_info/kbd/modifier_keys_importance.html"
"c:/Users/xah/web/xahlee_info/kbd/most_efficient_keyboard_layout.html"
"c:/Users/xah/web/xahlee_info/kbd/mousing_tips.html"
"c:/Users/xah/web/xahlee_info/kbd/multi_purpose_keys.html"
"c:/Users/xah/web/xahlee_info/kbd/muscle_memory_vs_mnemonics.html"
"c:/Users/xah/web/xahlee_info/kbd/programer_keyboarding_advice.html"
"c:/Users/xah/web/xahlee_info/kbd/proper_posture.html"
"c:/Users/xah/web/xahlee_info/kbd/qwerty_layout_history.html"
"c:/Users/xah/web/xahlee_info/kbd/repeatable_vs_non-repeatable_keys_commands.html"
"c:/Users/xah/web/xahlee_info/kbd/rsi_hand_exercise.html"
"c:/Users/xah/web/xahlee_info/kbd/semicolon_vs_apostrophe_frequency_in_computer_languages.html"
"c:/Users/xah/web/xahlee_info/kbd/touch-typing_and_split_keyboard.html"
"c:/Users/xah/web/xahlee_info/kbd/typing_rsi.html"
"c:/Users/xah/web/xahlee_info/kbd/vi_hjkl_vs_inverted_t_ijkl_arrow_keys.html"
"c:/Users/xah/web/xahlee_info/kbd/vi_keybinding_design_mode_activation_key.html"
"c:/Users/xah/web/xahlee_info/kbd/wasd_key.html"
"c:/Users/xah/web/xahlee_info/kbd/xah_shorthand_system.html"
"c:/Users/xah/web/xahlee_info/logo_design/index.html"
"c:/Users/xah/web/xahlee_info/math/math_index.html"
"c:/Users/xah/web/xahlee_info/mswin/Windows_keybinding.html"
"c:/Users/xah/web/xahlee_info/mswin/windows_key_index.html"

;; about 800 more

   ;;
   ))

(pop-to-buffer xoutbuff)

emacs lisp. add width height to html image thumbnail markup