CODEWITHSUNDEEP
c++gtk3linux-mint
Edgar Gomez
Edgar Gomez

Reputation: 164

How to add an image to a button with GTK

I am trying to add an image to a button with label, but the image doesn't show and the broken image doesn't display either.

stop_button = gtk_button_new_with_label("stop");
image = gtk_image_new_from_file ("/home/cendit/Escritorio/index.jpeg");
gtk_button_set_image (GTK_BUTTON(stop_button),image);

I tried a different path "file:///home/cendit/Escritorio/index.jpeg" but it was not successful.

Upvotes: 4

Views: 11717

Answers (3)

ebassi
ebassi

Reputation: 8805

Images inside buttons are not visible by default, as we transitioned from GTK+ 2.x to 3.x. Sadly, the API hasn't been cleaned up to reflect this change, so it's a bit of a trap.

If you want to display a button with only an image inside it, you can use:

GtkWidget *image = gtk_image_new_from_file ("...");
GtkWidget *button = gtk_button_new ();

gtk_button_set_image (GTK_BUTTON (button), image);

On the other hand, if you want to have a button with both text and an image inside it, you can use:

GtkWidget *image = gtk_image_new_from_file ("...");
GtkWidget *button = gtk_button_new_with_label ("...");

gtk_button_set_always_show_image (GTK_BUTTON (button), TRUE);
gtk_button_set_image (GTK_BUTTON (button), image);

See the documentation of Gtk.Button.set_image for further information.

Upvotes: 9

user1768761
user1768761

Reputation: 115

In GTK+3, if the image is too big (more than 21 px for me), the label is aligned to the bottom of the image. One way to bring it back to the center is to manually set up the button layout. This will ignore the gtk-button-images setting, and always show the image, but that setting is deprecated anyways.

GtkWidget *button = gtk_button_new();
  
GtkWidget *blbox = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 0);
gtk_widget_set_halign(blbox, GTK_ALIGN_CENTER);

GtkWidget *image = gtk_image_new_from_file("path-to-your-image");
gtk_box_pack_start(GTK_BOX(blbox), image, false, true, 0);

GtkWidget *blabel = gtk_label_new("Hello World!");
gtk_box_pack_start(GTK_BOX(blbox), blabel, false, true, 0);

gtk_container_add(GTK_CONTAINER(button), blbox);

In my GTK+ version there is an easier workaround: find the label inside the button and set it's valign property (from baseline) to center:

GtkWidget *button = gtk_button_new_with_label("Hello World!");
GtkWidget *image = gtk_image_new_from_file("path-to-your-image");
gtk_button_set_image(GTK_BUTTON(button), image);
gtk_button_set_always_show_image(GTK_BUTTON(button), true);

GtkWidget *bl = gtk_test_find_label(button, "*");
if ( bl != nullptr )
  gtk_widget_set_valign(bl, GTK_ALIGN_CENTER);

Upvotes: 0

Edgar Gomez
Edgar Gomez

Reputation: 164

This is what yo need to do

GtkImage *imagen_pantalla_completa;
GtkWidget *pantalla_completa;

pantalla_completa = gtk_button_new_with_label("");                                                  
imagen_pantalla_completa = (GtkImage *)gtk_image_new_from_file("/home/user..."); 
gtk_button_set_image (GTK_BUTTON(pantalla_completa),(GtkWidget *)imagen_pantalla_completa);

You need to add this to display the image

GtkSettings *default_settings = gtk_settings_get_default();
g_object_set(default_settings, "gtk-button-images", TRUE, NULL);

Upvotes: 1

Related Questions