Images and videos¶

Here are the examples of images and videos in Shibuya sphinx theme.

Images¶

image directive¶

A simple image with image directive:

.. image:: https://source.unsplash.com/daily?dog

figure with captions¶

The figure directive will wrap the image with <figure> tag, content if figure directive will be converted to <figcaption>.

Image with a caption¶

.. figure:: https://source.unsplash.com/daily?dog
   :width: 800
   :align: center

   This is the ``caption``, *it can* contain **other markups**.
   The photo is generated by Unsplash_ API.

Containers¶

We offer several container classes to decorate images:

.. container:: image-1

    .. image:: https://source.unsplash.com/daily?dog

.. container:: image-2

    .. image:: https://source.unsplash.com/daily?dog

Light and Dark¶

You can utilize the light-only and dark-only classes to specify which media to display in light or dark mode. For instance, in the example below, it will show a dog in light mode and a cat in dark mode.

light and dark mode images¶

.. figure:: https://source.unsplash.com/daily?dog
   :figclass: light-only
   :width: 800
   :align: center

.. figure:: https://source.unsplash.com/daily?cat
   :figclass: dark-only
   :width: 800
   :align: center