Problem
You want to display a list of thumbnail images for selection as shown below:
Solution
You can display a list of images or icons easily with the use of GtkIconView. A GtkIconView is very similar to a GtkTreeView. You store the data in a GtkListStore. Then instead of displaying it using GtkTreeView, we use a GtkIconView. The GtkIconView will display the image in a grid format with a label below each image.
Note that the GtkIconView supports "rubberband selection" of multiple images by dragging the mouse pointer as shown below.
Sample Code
Note: The following image files are required by the sample code below. Please save a copy of the image files and put them in the same directory where you store the sample code.
square_red.jpg | |
square_yellow.jpg | |
square_green.jpg | |
square_blue.jpg | |
square_blue2.jpg | |
square_blue3.jpg |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 34 35 36 37 38 39 40 41 42 43 44 | <?php $window = new GtkWindow(); $window->set_size_request(400, 240); $window->connect_simple('destroy', array('Gtk','main_quit')); $window->add($vbox = new GtkVBox()); // display title $title = new GtkLabel("Display thumbnail images using GtkIconView"); $title->modify_font(new PangoFontDescription("Times New Roman Italic 10")); $title->modify_fg(Gtk::STATE_NORMAL, GdkColor::parse("#0000ff")); $title->set_size_request(-1, 40); $vbox->pack_start($title, 0, 0); $vbox->pack_start(new GtkLabel(), 0, 0); // add a small gap // Set up a scroll window $scrolled_win = new GtkScrolledWindow(); $scrolled_win->set_policy( Gtk::POLICY_AUTOMATIC, Gtk::POLICY_AUTOMATIC); if (defined("GObject::TYPE_STRING")) { $model = new GtkListStore(GdkPixbuf::gtype, GObject::TYPE_STRING); // note 1 } else { $model = new GtkListStore(GdkPixbuf::gtype, Gtk::TYPE_STRING); // note 1 } foreach(array('square_red.jpg', 'square_yellow.jpg', 'square_green.jpg', 'square_blue.jpg', 'square_blue2.jpg', 'square_blue3.jpg') as $img) { $pixbuf = GdkPixbuf::new_from_file($img); // note 2 $model->append(array($pixbuf, $img)); // note 3 } $view = new GtkIconView($model); // note 4 $view->set_pixbuf_column(0); // col 0 of the model $view->set_text_column(1); // col 1 of the model $view->set_selection_mode(Gtk::SELECTION_MULTIPLE); // note 5 $view->set_columns(0); // note 6 $view->set_item_width(120); // note 7 $scrolled_win->add($view); $vbox->pack_start($scrolled_win); $window->show_all(); Gtk::main(); ?> |
Output
As shown above.
Explanation
- Create the list model.
- Load each image using GtkImage::new_from_file (img_file).
- Populate the model.
- Create a new icon view.
- Enable multiple selection.
- GtkIconview::set_columns(): sets the number of columns in the icon view. Here we put 0 to let php-gtk automatically determine the number of columns based on window width. Try changing the window size, you will see that the number of columns will be adjusted automatically.
- GtkIconview::set_item_width(): sets the width of each column.
Related Links
- How to display a 2D array in GtkTreeView - Part 5 - get user selection?
- How to create a simple drag and drop image viewer?
- How to display a list of thumbnail images using GtkIconView - Part 2 - hide text label?
- How to display a list of thumbnail images using GtkIconView - Part 3 - hide text label and add tooltip?
- How to display a list of thumbnail images using GtkIconView - Part 4 - with auto scaling to a max width of 24?
Read more...