Images

How to Use Images

Use the .. image:: directive with additional parameters.

Use .. figure:: if you want to add a caption to your image. You can use the same parameters in figure that are defined for image.

The additional parameters must be indented one level (add 3 spaces to indent).

Recommended parameters for images:

  • :class: with-shadow

Alternatively, a border can be defined:

  • :class: with-border

Optional parameters for images:

  • :alt: : alt text
  • :target: link target
  • :width: : width of image, use for example px (e.g. :width: 100px
  • :scale: : scale images, e.g. :scale: 65

Additional parameters can be found on the docutils page reStructuredText Directives

Examples

Example 2: Image With Caption

Left floating image

This is the image caption

1
2
3
4
5
6
7
   .. figure:: ../images/a4.jpg
      :alt: some image
      :target: https://typo3.org
      :class: with-shadow
      :width: 100px

      This is the image caption
line 5:
width of image

Example 3: Image With Fixed Width

Left floating image
1
2
3
4
5
.. image:: ../images/a4.jpg
   :alt: some image
   :target: https://typo3.org
   :class: with-shadow
   :width: 100px
line 5:
width of image

Example 4: Image with float-left

Left floating image

Some text … (will be displayed on the right of the image).

.. image:: ../images/a4.jpg
   :alt: Left floating image
   :target: https://typo3.org
   :class: with-shadow float-left

Some text ... (will be displayed on the right of the image)

.. rst-class::  clear-both

Hint

When using float-left, make sure the text is suitable for wrapping around images. Here, we use .. rst-class:: clear-both to reset the floating and start on the left again.

Example 5: Image with border

../_images/a4.jpg