JakeStanger/ironbar

Fork 0

mirror of https://github.com/JakeStanger/ironbar.git synced 2026-07-11 10:15:20 +01:00

in label text does not print an image. #1845

New issue

Closed

opened 2026-05-22 22:54:55 +01:00 by JakeStanger · 7 comments

JakeStanger commented

2026-05-22 22:54:55 +01:00

Owner

Originally created by @IAMSolaara on GitHub (Apr 4, 2026).
Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/1441

Describe the bug

A string with file://<path> is printed as text instead of image contents

To reproduce
Steps to reproduce the behavior:

Add module label with a label property of file://<path>
Label ends up with the literal text instead of the image

Expected behavior
As per told in the wiki's images page, it should be interpreted as image.

System information:

Distro: Fedora 43
Compositor: Sway
Ironbar version: 0.18.0

Configuration

Config

# yaml-language-server:$schema=./config.schema.json
position: top
height: 32
start:
- type: label
  label: file:///solaaralogoflat.png
- type: workspaces
  favorites:
    - "1"
    - "2"
    - "3"
    - "4"
    - "5"
- type: focused
  icon_size: 16
center:
end:
- type: tray
- type: clock

Styles

@define-color accent_color #20d0fc;

* {
        font-family: DroidSansM Nerd Font;
        color: white;
        background: transparent;
}

.background {
        background: #00000080;
        background-image: linear-gradient(to bottom, rgba(255,255,255,0.25)0%, rgba(0,0,0,0.5)50%, rgba(0,0,0,0.6)50%);
}

.workspaces {
        margin: 4px;
}

.focused {
        background-image: linear-gradient(to bottom, rgba(255,255,255,0.25), rgba(0,0,0,0.025));
        box-shadow: 0px 0px 3px rgba(0,0,0,0.34);
        margin: 4px;
        padding: 4px 8px;
        border-radius: 8px;
        color: rgb(220,220,220);

        /* Important style feature in order to give a glassy look! */
        /* I'm using the top and bottom borders to mimic highlights in highly reflective surfaces, looks good with the glassy-look */
        border-style: none;
        border-bottom-style: solid;
        border-top-style: solid;
        border-bottom-color: rgba(255,255,255,0.15);
        border-top-color: rgba(255,255,255,0.45);
        border-width: 1px;
}

.workspaces .item {
        transition-duration: 100ms;
        all: initial;
        min-width: 0;
        margin-right: 0.2cm;
        margin-left: 0.2cm;
        text-shadow: 0px 0px 4px rgb(135,135,135);
}

.workspaces .item.focused {
        color: @accent_color;
        text-shadow: 0px 0px 6px @accent_color;
        font-style: bold;
}

.workspaces .item:hover {
        transition-duration: 120ms;
        color:@accent_color;
        text-shadow: 0px 0px 8px @accent_color;
}

.workspaces .item.visible {
        color: @accent_color;;
}

.workspaces .item.urgent {
        color: #e78a4e;
        text-shadow: 0px 0px 6px #e78a4e;
}

Additional context
I have confirmed the image is a valid PNG.
I have tried different paths (absolute like file:///home/evermore/.../solaaralogopath.png, relatives like file:///./solaaralogopath.png or file://./solaaralogopath.png) but to no avail.
Am I using the wiki wrong? At this point I'm unsure myself

Screenshots

Originally created by @IAMSolaara on GitHub (Apr 4, 2026). Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/1441 **Describe the bug**  A string with `file://<path>` is printed as text instead of image contents **To reproduce** Steps to reproduce the behavior: 1. Add module `label` with a label property of `file://<path>` 2. Label ends up with the literal text instead of the image **Expected behavior** As per told in the wiki's [images](https://github.com/JakeStanger/ironbar/wiki/images) page, it should be interpreted as image. **System information:** - Distro: Fedora 43 - Compositor: Sway - Ironbar version: 0.18.0 **Configuration**  <details><summary>Config</summary> ```yaml # yaml-language-server:$schema=./config.schema.json position: top height: 32 start: - type: label label: file:///solaaralogoflat.png - type: workspaces favorites: - "1" - "2" - "3" - "4" - "5" - type: focused icon_size: 16 center: end: - type: tray - type: clock ``` </details> <details><summary>Styles</summary> ```css @define-color accent_color #20d0fc; * { font-family: DroidSansM Nerd Font; color: white; background: transparent; } .background { background: #00000080; background-image: linear-gradient(to bottom, rgba(255,255,255,0.25)0%, rgba(0,0,0,0.5)50%, rgba(0,0,0,0.6)50%); } .workspaces { margin: 4px; } .focused { background-image: linear-gradient(to bottom, rgba(255,255,255,0.25), rgba(0,0,0,0.025)); box-shadow: 0px 0px 3px rgba(0,0,0,0.34); margin: 4px; padding: 4px 8px; border-radius: 8px; color: rgb(220,220,220); /* Important style feature in order to give a glassy look! */ /* I'm using the top and bottom borders to mimic highlights in highly reflective surfaces, looks good with the glassy-look */ border-style: none; border-bottom-style: solid; border-top-style: solid; border-bottom-color: rgba(255,255,255,0.15); border-top-color: rgba(255,255,255,0.45); border-width: 1px; } .workspaces .item { transition-duration: 100ms; all: initial; min-width: 0; margin-right: 0.2cm; margin-left: 0.2cm; text-shadow: 0px 0px 4px rgb(135,135,135); } .workspaces .item.focused { color: @accent_color; text-shadow: 0px 0px 6px @accent_color; font-style: bold; } .workspaces .item:hover { transition-duration: 120ms; color:@accent_color; text-shadow: 0px 0px 8px @accent_color; } .workspaces .item.visible { color: @accent_color;; } .workspaces .item.urgent { color: #e78a4e; text-shadow: 0px 0px 6px #e78a4e; } ``` </details> **Additional context** I have confirmed the image is a valid PNG. I have tried different paths (absolute like `file:///home/evermore/.../solaaralogopath.png`, relatives like `file:///./solaaralogopath.png` or `file://./solaaralogopath.png`) but to no avail. Am I using the wiki wrong? At this point I'm unsure myself **Screenshots**  <img width="445" height="64" alt="Image" src="https://github.com/user-attachments/assets/0f87ed50-e071-44c5-b313-907d623696af" />

JakeStanger

2026-05-22 22:54:55 +01:00

closed this issue
added the
A:Core

P:Low

A:UX/UI

T:Bug
labels

JakeStanger commented

2026-05-22 22:54:56 +01:00

Author

Owner

@JakeStanger commented on GitHub (Apr 13, 2026):

This works for me on the latest commit. Are you able to try that and check if it's still an issue please?

@JakeStanger commented on GitHub (Apr 13, 2026): This works for me on the latest commit. Are you able to try that and check if it's still an issue please?

JakeStanger commented

2026-05-22 22:54:56 +01:00

Author

Owner

@IAMSolaara commented on GitHub (Apr 14, 2026):

Hello, I've tried the same thing building from commit 25cceb0ec4 and I still get the same issue.

@IAMSolaara commented on GitHub (Apr 14, 2026): Hello, I've tried the same thing building from commit 25cceb0ec448befdca527468c2fb83bc9dac0b5d and I still get the same issue.

JakeStanger commented

2026-05-22 22:54:56 +01:00

Author

Owner

@IAMSolaara commented on GitHub (Apr 14, 2026):

To build them I did a git clone of this repo, checked out master and did cargo build --release for master, checked out v0.18.0 and did cargo build --release.

I have some logs if they're helpful:

ironbar-master.log obtained by doing ironbar-release-master --debug 2>&1 > ironbar-master.log.

ironbar-v0.18.0.log obtained by doing ironbar-release-v0.18.0 --debug 2>&1 > ironbar-v0.18.0.log.

@IAMSolaara commented on GitHub (Apr 14, 2026): To build them I did a git clone of this repo, checked out master and did `cargo build --release` for master, checked out v0.18.0 and did `cargo build --release`. I have some logs if they're helpful: [ironbar-master.log](https://github.com/user-attachments/files/26707943/ironbar-master.log) obtained by doing `ironbar-release-master --debug 2>&1 > ironbar-master.log`. [ironbar-v0.18.0.log](https://github.com/user-attachments/files/26707984/ironbar-v0.18.0.log) obtained by doing `ironbar-release-v0.18.0 --debug 2>&1 > ironbar-v0.18.0.log`.

JakeStanger commented

2026-05-22 22:54:56 +01:00

Author

Owner

@JakeStanger commented on GitHub (Apr 14, 2026):

Ah, I somehow missed initially you were using the label module - images aren't supported by any of that module's configuration options. The image format is usually for e.g icons and options are labelled as such in a module's config table.

You'll want to use the custom module for displaying images directly:

- type: custom
  bar:
    - type: image
      src: 'file:///solaaralogoflat.png' # dynamic strings are supported

@JakeStanger commented on GitHub (Apr 14, 2026): Ah, I somehow missed initially you were using the `label` module - images aren't supported by any of that module's configuration options. The image format is usually for e.g icons and options are labelled as such in a module's config table. You'll want to use the custom module for displaying images directly: ```yaml - type: custom bar: - type: image src: 'file:///solaaralogoflat.png' # dynamic strings are supported ```

JakeStanger commented

2026-05-22 22:54:56 +01:00

Author

Owner

@IAMSolaara commented on GitHub (Apr 14, 2026):

Aaah, I see. That does in fact work as expected.

As a mildly related info, for relative paths (like file://./solaaralogoflat.png) how does it resolve those? Does it use the PWD the ironbar process had when it got started?

@IAMSolaara commented on GitHub (Apr 14, 2026): Aaah, I see. That does in fact work as expected. As a mildly related info, for relative paths (like file://./solaaralogoflat.png) how does it resolve those? Does it use the PWD the ironbar process had when it got started?

JakeStanger commented

2026-05-22 22:54:56 +01:00

Author

Owner

@JakeStanger commented on GitHub (Apr 14, 2026):

Does it use the PWD the ironbar process had when it got started?

Yep.

Worth noting tilde expansion ~ for $HOME is not currently supported for images, but is easy to add so I'll probably do that soon (#1451 as reference)

@JakeStanger commented on GitHub (Apr 14, 2026): > Does it use the PWD the ironbar process had when it got started? Yep. Worth noting tilde expansion `~` for $HOME is *not* currently supported for images, but is easy to add so I'll probably do that soon (#1451 as reference)

JakeStanger commented

2026-05-22 22:54:56 +01:00

Author

Owner

@IAMSolaara commented on GitHub (Apr 14, 2026):

Great. Thanks :)

@IAMSolaara commented on GitHub (Apr 14, 2026): Great. Thanks :)