# How to create a text box with images in python

**URL:** <https://discourse.slicer.org/t/how-to-create-a-text-box-with-images-in-python/21153>\
**Category:** Development\
**Created:** [December 20, 2021, 7:15pm UTC](https://discourse.slicer.org/t/how-to-create-a-text-box-with-images-in-python/21153 "2021-12-20T19:15:29Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![tsims](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/tsims/32/11853_2.png) [@tsims](https://discourse.slicer.org/u/tsims)\
**Post date:** [December 20, 2021, 7:15pm UTC](https://discourse.slicer.org/t/how-to-create-a-text-box-with-images-in-python/21153/1 "2021-12-20T19:15:29Z")

</div>

Hi everyone,

as part of a slicer extension I am working on I was hoping to create a section where I could place demonstration images and text to serve as sort of tutorial to people using the modules, something like the “Acknowledgement” section, but wasn’t sure which QT widget I should be using to achieve that result? Any advice would be appreciated!

The effect that I want is similar to this image:  
 ![SlicerAcknowledgement](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/3X/3/e/3e88ece51b9e187dd69d4a410de4eb442ac8ff9c.png)

---

<div class="post-metadata">

**Author:** ![lassoan](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/lassoan/32/13_2.png) [@lassoan](https://discourse.slicer.org/u/lassoan)\
**Post date:** [December 21, 2021, 3:01pm UTC](https://discourse.slicer.org/t/how-to-create-a-text-box-with-images-in-python/21153/2 "2021-12-21T15:01:17Z")

</div>

The simplest is to use QTextEdit:

```python
html="""
<p>This is an image:</p>
<p><img src="file:Markups-copy-paste.png" width="100"></p>
<p>Another image:</p>
<p><img src="file:ClippingFanMask.png" width="100"></p>
<p>And some more text.</p>
"""

resourceFolder = "c:/tmp/20211221/"

resourceFiles = [
    "Markups-copy-paste.png",
    "ClippingFanMask.png"
]

textEdit = qt.QTextEdit()
textEdit.readOnly=True
textEdit.setHtml(html)
textDocument = textEdit.document
for resourceFile in resourceFiles:
    resourceFilePath = resourceFolder+resourceFile
    uri = qt.QUrl().fromLocalFile(resourceFile)
    image = qt.QImage()
    image.load(resourceFilePath)
    textDocument.addResource(qt.QTextDocument.ImageResource, uri, image)

textEdit.show()

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/3X/0/1/017b5f77dd53a22df0fa8de39d633d268946c1c6.png)

For rendering complex tables, videos, using dynamic content (Javascript), etc. you can use the heavyweight [`slicer.qSlicerWebWidget()`](https://apidocs.slicer.org/master/classqSlicerWebWidget.html), which is a thin wrapper over QWebEngineView.