.. index::
   pair: Sphinx ; Figure
   ! figure
   ! Figure


.. _sphinx_figure:

=================
figure
=================



.. contents::
   :depth: 3

Description
===========

::

    .. figure:: ../images/wiki_logo_openalea.png
        :width: 200px
        :align: center
        :height: 100px
        :alt: alternate text
        :figclass: align-center

        figure are like images but with a caption

        and whatever else you wish to add

        .. code-block:: python

            import image


gives

.. figure:: ../images/wiki_logo_openalea.png
    :width: 200px
    :align: center
    :height: 100px
    :alt: alternate text
    :figclass: align-center

    figure are like images but with a caption

    and whatever else youwish to add

    .. code-block:: python

        import image



Size in points (PDF constraints)
=================================

.. seealso::

   - http://docs.opencv.org/doc/tutorials/introduction/how_to_write_a_tutorial/how_to_write_a_tutorial.html


.. code-block:: rst

  .. tabularcolumns:: m{100pt} m{300pt}
  .. cssclass:: toctableopencv
  =============== ======================================================
   |MatBasicIma|  **Title:** :ref:`matTheBasicImageContainer`
                  *Compatibility:* > OpenCV 2.0
                  *Author:* |Author_BernatG|
                  You will learn how to store images in the memory and how to print out their content to the console.
  =============== ======================================================
  .. |MatBasicIma| image:: images/matTheBasicImageStructure.jpg
                   :height: 90pt
                   :width:  90pt


We use the **point measurement** system because we are also creating PDFs. 

PDFs are printable documents, where there is no such thing that pixels (px), 
just points (pt). 

And while generally space is no problem for web pages (we have monitors with 
huge resolutions) the size of the paper (A4 or letter) is constant and will be 
for a long time in the future. 

Therefore, size constrains come in play more like for the PDF, than the 
generated HTML code.



Geoserver example
=================


.. seealso::

   - http://docs.geoserver.org/trunk/en/docguide/sphinx.html#images



Add images to your documentation when *possible*.  

Images, such as screenshots, are a very helpful way of making 
**documentation understandable**.  

When making screenshots, try to crop out unnecessary content (browser window, 
desktop, etc).

Avoid scaling the images, as the Sphinx theme automatically resizes large images.


It is also helpful to include a caption underneath the image.

.. figure:: pagelogo_geoserver.png
   :align: center

   *The GeoServer logo as shown on the homepage.*

This image is generated by the following code::

   .. figure:: pagelogo_geoserver.png
      :align: center

      *The GeoServer logo as shown on the homepage.*

In this example, the image file exists in the same directory as the source page.
If this is not the case, you can insert path information in the above command.