CODEWITHSUNDEEP
imagepython-sphinxrestructuredtexttoctree
Micawber
Micawber

Reputation: 707

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.

Upvotes: 3

Views: 2181

Answers (2)

asrjarratt
asrjarratt

Reputation: 314

Another option is to use the table directive. See http://docutils.sourceforge.net/docs/ref/rst/directives.html#table for all the table directive options.

.. table::
   :align: center
   :widths: auto

   +--------------------------------------+--------------------------+
   | .. image:: _static/my_image.png      | .. toctree::             |
   |                                      |    :maxdepth: 2          |
   |                                      |    :caption: Contents:   |
   |                                      |                          |
   |                                      |    Tool1                 |
   |                                      |    Tool2                 |
   |                                      |    Tool3                 |
   |                                      |    Tool4                 |
   |                                      |    Tool5                 |
   |                                      |    Tool6                 |
   |                                      |    Tool7                 |
   |                                      |    Tool8                 |
   +--------------------------------------+--------------------------+

Upvotes: 3

Steve Piercy
Steve Piercy

Reputation: 15045

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;}

Upvotes: 3

Related Questions