Custom Module Images

[Forest-Terminal]

Hi I have a custom module with a script that returns an image path. How can i make it so that the image is displayed and so the path is not just put down as text.

[r4chl]

Module code:

"custom/image": {
    "exec": "echo '<img src=\"/home/user/path/to/image.png\"/>'",
    "interval": 0,
    "format": "{}",
    "tooltip": false
}

CSS:

#custom-image {
  padding: 0;
  background-image: url("file:///home/user/path/to/image.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}

[Forest-Terminal]

I don't understand the point of the css as I want to be able to change the image at anytime with the script. So when I changed just the script to return the I am getting this error:

[Forest-Terminal]

Here is the bash script if it helps:

[r4chl]

Thanks for the script, it's helpful! I'm going to look into a potentially hacky way to try to get this working. If possible, would you be able to upload the images you're trying to use, maybe in a .zip or something? Just so I can see if I can figure it out exactly :)

[r4chl]

I'VE GOT IT WORKING! Here's a gif showing it.
Okay, I'm going to try to be as clear as possible, but if you have any questions, I'm more than happy to answer them.

Step 1: Create an image outside of your assets folder (I copied the first bongo cat frame to my main Waybar folder and renamed it to Bongo_Cat_CURRENT).

Step 2: Create this file: $HOME/.config/waybar/bongo-cat-frame.css:

#custom-bongo-cat {
  min-width: 48px;
  min-height: 48px;
  background-image: url("file:///home/forest-terminal/.config/waybar/assets/Bongo_Cat_1.png?ts=1756438839");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

Step 3: Create a .sh file called bongo-cat.sh. I put mine in the Waybar folder.

#!/bin/bash

ASSETS="$HOME/.config/waybar/assets"
NUM_FRAMES=5
CSS="$HOME/.config/waybar/bongo-cat-frame.css"
INDEX_FILE="/tmp/bongo_cat_index"

if [[ ! -f "$INDEX_FILE" ]]; then
  echo 0 > "$INDEX_FILE"
fi

get_next_index() {
  local idx
  idx=$(<"$INDEX_FILE")
  idx=$(( (idx + 1) % NUM_FRAMES ))
  echo "$idx" > "$INDEX_FILE"
  echo "$idx"
}

write_css() {
  local idx="$1"
  local image="Bongo_Cat_${idx}.png"
  local ts=$(date +%s) # Use timestamp to bust the cache
  cat > "$CSS" <<EOF
#custom-bongo-cat {
  min-width: 48px;
  min-height: 48px;
  background-image: url("file://$ASSETS/$image?ts=$ts");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
EOF
}

TMP_FILE=$(mktemp /tmp/waybar_bongo_cat.XXXXXX)
libinput debug-events | grep --line-buffered pressed > "$TMP_FILE" &

while inotifywait -qqe modify "$TMP_FILE"; do
  idx=$(get_next_index)
  write_css "$idx"
  : > "$TMP_FILE"
done

rm "$TMP_FILE"

Step 4: In your main style.css file, add the line: @import url("bongo-cat-frame.css");. If you put your script somewhere outside your Waybar folder, change the location.

Step 5: Add the module to your Waybar config (the . has to be there for the image to appear):

  "custom/bongo-cat": {
    "exec": "echo '.'",
    "interval": 0,
    "format": "{}",
    "tooltip": false
  },

At the top of your Waybar config, make sure you have "reload_style_on_change": true, (where you configure the bar's position, etc).

Step 6: Edit your compositor's config to load the bongo-cat.sh file when your session starts.
~/.config/hypr/hyprland.conf: exec-once = ~/.config/waybar/bongo-cat.sh
~/.config/sway/config: exec ~/.config/waybar/bongo-cat.sh

The bongo-cat.sh script has to be running for the image to cycle when a keypress is executed.

I hope this made sense! I know it's kind of a lot, but Waybar is pretty limited when it comes to images, so this was honestly the least ridiculous method I could come up with lol.

[Forest-Terminal]

I got it working :)... but is there a way to set a background color because I use wal for custom generated color themes and would like to have it be more integrated with the bar.

It looks very out of place right now

[r4chl]

You sure can! Open up your style.css and drop this in:

#custom-bongo-cat {
  background-color: @red;
}

Change @red to whatever you want.

[Forest-Terminal]

Thanks for the help. Here is my final result. 😄

[r4chl]

Aaaaaaaah it looks SO GOOD! I'm really happy we managed to get it working for you!