Zeta-Puppis.com

I already know that this post will be useful just to me, because I know that some­day I’ll forgot how to do this and I’ll be look­ing for a solu­tion. So here’s how to insert an image in a Tree­View ListView using python.

Tech­ni­cally, a ListView widget doesn’t exists, but it is a Tree­View with a List­Store model asso­ci­ated in place of a TreeModel. And this “howto” uses a ListView as exam­ple as it is easier to set up, but the con­cept remains the same for all the kind of TreeViews.

First thing: a Tree­View (ehm, ListView) in gtk is made up by Tree­View­Columns and Cell­Ren­der­erers of var­i­ous type, accord­ing to what you want to dis­play. But the first thing to do is to import the needed pygtk’s modules.

import pygtk
pygtk.require("2.0")
import gtk
import gobject

Then we must set up a model for our ListView and asso­ciate it to the newly cre­ated Tree­View object, before than build­ing it with columns:

treeview = gtk.TreeView()
model = gtk.ListStore(
    gobject.TYPE_STRING, # a column will contain a string
    gtk.gdk.Pixbuf) # and another column will contain our image

treeview.set_model(model)

After we done this, we must create the columns and the cells. A cell, under the gtk point of view, is every single place in the Tree­View where a value can be inserted, that is every inter­sec­tion of a row with a column. While the column are cre­ated using nearly always the same fun­tion (gtk.TreeViewColumn()), the cells aren’t. They have a dif­fer­ent func­tion accord­ing to the type of data you intend to show.

In our exam­ple we’ll use two func­tions: gtk.CellRendererText() and gtk.CellRendererPixbuf(). The former is used to render text items, while the latter for “images”.

So, after we cre­ated the model, we must create the columns and asso­ciate the cells to them. This is done by using the fol­low­ing code (in this exam­ple we’ll create a text column):

cell_text = gtk.CellRendererText()
col_text = gtk.TreeViewColumn("A text column", cell_text, text = 0)
treeview.append_column(col_text)

In this way we cre­ated a text-​rendered column. The impor­tant part of the exam­ple is on the second line, when we set the text attribute with text = 0. Doing this we said to gtk to render a text column on the first column (0, not 1, because the num­ber­ing starts from 0). Now it’s time to show how to show an image, instead. This is done in a very sim­i­lar way:

cell_img = gtk.CellRendererPixbuf()
col_img = gtk.TreeViewColumn("An image!", cell_img, pixbuf = 1)
treeview.append_column(col_img)

The only dif­fer­ent thing is that, this time, we spec­i­fied a pixbuf attribute in place of a text one.

Now that we cre­ated our tree­view, we must add rows to it:

item = model.append(None)
model.set_value(item, 0, "Hey, I'm text!")
model.set_value(item, 1, gtk.gdk.pixbuf_new_from_file("/path/to/image.jpg")

The impor­tant thing to remem­ber is that we must pass a gtk.gdk.Pixbuf object as image. That’s all :)