Image grid in reStructuredText / Sphinx

Question

I'm using Sphinx to create documentation for a Python project I'm working on. I have three images I would like to display in a 1x3 grid (i.e. all on the same line), and I'm trying to figure out how to do this in reStructuredText. Right now I have

.. image:: _images/report_title.png

.. image:: _images/report_slide1.png

.. image:: _images/report_slide2.png

I thought about trying to build one of the reST tables around them on a single line, but that seemed a little ridiculous. How can I grid these images?

Solution 1

You can specify the width option for each of your images (see the reStructuredText image directive documentation) to be approximately one third or less of the width of the page.

Try, for example

.. image:: _images/report_title.png
   :width: 30%
.. image:: _images/report_slide1.png
   :width: 30%
.. image:: _images/report_slide2.png
   :width: 30%

The lengths allowed in the width (and height) options are discussed here (they essentially correspond to the length units in CSS documents).

Solution 2

The alternate answer is to use directives as aliases to the image.

.. |logo| image:: ../iamges/wiki_logo_openalea.png
   :width: 20pt
   :height: 20pt

Then use the alias inside a table:

 +---------+-----------+
 | |logo|  +  |logo2|  +
 +---------+-----------+

Solution 3

For the aliasing, I had better luck with:

.. |logo1| image:: logo1.png    
   :scale: 100%
   :align: middle
.. |logo2| image:: logo2.png
   :scale: 50%
   :align: top

+---------+---------+
| |logo1| | |logo2| |
+---------+---------+

Comments

[jeremiahbuddha]

Thanks Chris. This was my workaround, but it's really surprising that there doesn't seem to be a way to grid images in reST, it's such a basic feature.

[Chris]

This is exactly the same as what you would do in HTML or LaTeX isn't it? In this case it makes perfect sense that this is the way to do it and means that there isn't one more mark up recipe to learn.

[sorin]

Tried this but seems not to work, render as hyperlink and not as image.