Search code examples
imagepython-sphinxrestructuredtexttoctree

Image and table of contents side by side in Restructured Text with python-Shinx

I have been using Sphinx to make a nice documentation of my code and I would like to know if it's possible to place an image next to the table of contents (instead of a big white space without anything)

For now, my beginner's index.rst file looks like this :

.. XXXXXX documentation master file, created by
   sphinx-quickstart on Wed Apr 11 13:59:42 2018.
   You can adapt this file completely to your liking, but it should at least
   contain the root `toctree` directive.

Welcome to XXXXXX's documentation!
==================================

.. topic:: the_topic

   .. todo:: write topic

.. toctree::
   :maxdepth: 2
   :caption: Contents:

   Tool1
   Tool2
   Tool3
   Tool4
   Tool5
   Tool6
   Tool7
   Tool8   

.. image:: _static/my_image.png
   :align: center


Indices and tables
==================

* :ref:`genindex`
* :ref:`modindex`
* :ref:`search`

Thanks in advance.

Solution

  • Yes, it's possible. Put your image directive before your toctree directive. Then use a common option, like so:

    .. image:: _static/my_image.png
    :class: align-right

    The Sphinx default style sheet, basic.css, might already exist in your theme and it has a style already set up to float the image to the right. If not, then override your theme's CSS with a local CSS file, or add a new CSS file to your theme, in which you define a new style.

    img.align-right {float: right;}