In my app I want some kind of profile picture a user can have. At first wanted to use libadwaita's Avatar widget, but it cannot load images from a file, which is a feature that I need. So I thought I would just implement a normal Gtk.Image
and set its border-radius
to 50%
. However, GTK seems to ignore my CSS rules. The image is displayed but without the border radius.
Here is my code:
# in my class MainWindow(Adw.ApplicationWindow)
css_provider = Gtk.CssProvider()
css_provider.load_from_path("style.css")
Gtk.StyleContext.add_provider_for_display(
Gdk.Display.get_default(),
css_provider,
Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
)
img = Gtk.Image.new_from_file("some_image.jpg")
img.set_pixel_size(100)
self.some_box.append(img)
code of my style.css:
image { /* I also tried 'GtkImage' and a custom class */
border: 4px solid #000;
}
EDIT: Solved it using a Gtk.Frame as a wrapper. Set the image as its child.
I just tested this in ruby-gtk, the image here is the result:
The CSS I was using is exactly this:
image {
border: 50px solid black;
border-radius: 50%;
}
And that should at the least show a circle.
Do you apply the CSS? GtkImage is deprecated.
It may also help if you adapt your code a little bit so others can quickly copy/paste it. For me it was easier to just put it into an autogenerate I use for ruby-gtk3, rather than put in the missing pieces for python-gtk.
Edit: actually I just noticed you refer to gtk4. gtk4 is odd.
On gtk3 it works though.