Note
This version of the guide covers the new PHP-based rendering of Documentation with the TYPO3 Documentation theme.
If the project you are looking at has a file Documentation/guides.xml it is using the new rendering.
Otherwise, consider to migrate the Documentation or head over to the legacy version of this guide: How to document, Sphinx based.
Images
Automatic screenshot generation
See the README in the t3docs-screenshots for more information on automating screenshot generation.
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 4 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 (for example:width: 100px
:scale:
: scale images, for example:scale: 65
Additional parameters can be found on the docutils page reStructuredText Directives
Examples
Example 1: Scaled image with shadow and link target
.. image:: /_Images/a4.jpg
:alt: some image
:target: https://typo3.org
:class: with-shadow
:scale: 50
- line 1:
- image directive with path
- line 2:
- alt-Text
- line 3:
- link target
- line 4:
- use a shadow on the image
Example 3: Image with fixed width
.. 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
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-
to reset the floating and start on the left again.