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

align image¶

With :align: option, you can make the image float to left or right:

.. image:: https://source.unsplash.com/200x200/daily?cute+puppy
  :align: left
  :height: 200
  :width: 200

https://source.unsplash.com/200x200/daily?cute+puppy

This is a lot of text to go along with a left-aligned image, that is helping make this content feel less linear. It is important to have such a body of text, since the image is meant to be “floated” to the right, which would interfere with the rest of the document otherwise.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sapiente veritatis doloribus accusantium molestiae modi recusandae excepturi facere, corrupti expedita sit.

Hint

You can use :align: right to float image to the right side.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sapiente veritatis doloribus accusantium molestiae modi recusandae excepturi facere, corrupti expedita sit.

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