Insert images basics


As explained on the previous page, you need to copy-paste some code into a file called Put this file into your current folder, and import the class ImageScintilla:

from ImageScintilla import ImageScintilla

To make your editor, don’t instantiate the QsciScintilla class – as you would usually do – but instantiate ImageScintilla instead:

self.__editor = ImageScintilla()

Once your editor is created, you can configure it as usual. For example:


The last preparation you should do is telling the editor which font it should use for the calculations:


These internal calculations are important. The code from Matic Kukovec makes sure that the images get inserted in the correct row (line) and column, and they move properly when you scroll up and down.


Insert images

Adding an image to your editor is very simple:

self.__editor.addImage(image, position, size)
  • Parameter image is a string indicating the path to the image. If the image resides in the same folder as your current .py file, you can simply enter the name of the image (including its extension!).
  • Parameter position should be a tuple(int, int) representing the COLUMN and LINE offset for the image position. Both column and line start counting from zero. The top left-corner of the image will be fixated onto the top-left corner of the character specified by the tuple.
    Please note that (for now) you have to consider the width of the left margin when passing the column parameter. For example: if your margin is six characters wide and the column parameter is 3, then the image will be painted in the margin.
  • Parameter size should also be a tuple(int, int), but this one represents the width and height of the displayed image, in pixels. If you pass None for this parameter, the original image size will be used.
    You get the best image quality if you don’t change the original size. Any stretching will be noticable, because the painted image doesn’t get a special treatment like anti-aliasing, …

The function addImage(..) returns an index. This index is the ID of the inserted image. You can use it later on to delete the image:


On the next page we will consider an example.