478. How to display a list of thumbnail images using GtkIconView - Part 4 - with auto scaling to a max width of 24?

Problem

This is in response to Andrea's post titled "How to resize images?"

You have displayed a list of thumbnail images for selection using the technique as outlined in How to display a list of thumbnail images using GtkIconView?

Howver, as the images are of different width, you would like to auto scale each image to a maximum width.

In this example, the original images are all of width=49. You will see that all of them have been scaled to a width of 24 as shown below:

How to display a list of thumbnail images using GtkIconView - Part 4 - with auto scaling to a max width of 24?


Solution


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   
 33   
 34   
 35   
 36   
 38   
 39   
 40   
 41   
 42   
 43   
 45   
 46   
 47   
 48   
 49   
 50   
 51   
 52   
 53   
 54   
 55   
<?php
define('MAX_IMG_WIDTH', 24); // note 1

$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\n".
"Part 4 - with auto-scaling to a max width of 24");
$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);
} else {
    $model = new GtkListStore(GdkPixbuf::gtype, Gtk::TYPE_STRING);
}

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);
    $width = $pixbuf->get_width(); // note 2
    $height = $pixbuf->get_height(); // note 2
    if ($width>MAX_IMG_WIDTH) { // note 3
        $new_width = MAX_IMG_WIDTH;
        $new_height = MAX_IMG_WIDTH * $height / $width; // note 4
        $pixbuf = $pixbuf->scale_simple($new_width, $new_height, Gdk::INTERP_HYPER); // note 5
    }
    $model->append(array($pixbuf, $img)); // note 6
}

$view = new GtkIconView($model);
$view->set_pixbuf_column(0);
$view->set_text_column(1);
$view->set_selection_mode(Gtk::SELECTION_MULTIPLE);
$view->set_columns(0);
$view->set_item_width(120);

$scrolled_win->add($view);
$vbox->pack_start($scrolled_win);
$window->show_all();
Gtk::main();
?>

Output

As shown above.

 

Explanation

  1. Specify the maximum width.
  2. Get the width and height of the original image.
  3. Check if the width is greater than the maximum width.
  4. Calculate the new height.
  5. Scale it!
  6. Set the image.

Related Links

Add comment

Security code
Refresh