Theme Features¶
Slides & Single Level¶
Displaying Images¶
You can include any image in a slide using the image
directive. Just drop them in the _static
directory in your
project.
Hieroglyph also includes some support for showing an image as the full
slide using the figure
directive. For example, the
Hieroglyph introductory slide deck uses the following markup:
.. figure:: /_static/hieroglyphs.jpg
:class: fill
CC BY-SA http://www.flickr.com/photos/tamburix/2900909093/
The caption (license information above) is styled as an overlay on the image.
Included Styles¶
Hieroglyph includes some classes that for styling slides:
appear
Case the slide to just appear, replacing the previous slide, instead of sliding from the right to left.
fade-in
Causes the slide to quickly fade in and out, instead of sliding from the right to left.
Slides2¶
The slides2
theme was added in Hieroglyph 0.7, and as based on the
Google I/O 2012+ HTML slide templates.
Theme Options¶
The slides2
theme requires presentation metadata in the
conf.py
file. You can specify one or more presenters; presenter
information will be included on the title and end slides
automatically.
slide_theme_options = {
'presenters': [
{
'name': 'The Author',
'twitter': '@author',
'www': 'http://example.com/author',
'github': 'http://github.com/author/example'
},
],
}
In addition to the presenter metadata, the following options may be
specified in slide_theme_options
:
subtitle
Default:
""
The presentation title will be taken from
conf.py
; if you would like to display a sub-title on the title slide, specify it here.use_builds
Default:
true
use_prettify
Default:
true
enable_slide_areas
Default:
true
enable_touch
Default:
true
favicon
Default:
""
Title & End Slides¶
The title and end slides contain presentation metadata and links.
Unlike the other slides, they are generated directly from template
fragments. You can override these by providing a title_slide.html
or end_slide.html
template in the _templates
directory of your
project.
For example, title_slide.html
with a full-bleed background image
might look like this:
<slide class="title-slide segue nobackground fill"
style="background-image: url(_static/insect_trap.jpg)">
<hgroup class="auto-fadein">
<h1 class="white" data-config-title><!-- populated from slide_config.json --></h1>
<h2 data-config-subtitle><!-- populated from slide_config.json --></h2>
<h2 data-config-presenter><!-- populated from slide_config.json --></h2>
</hgroup>
<footer class="source white">
CC BY-NC-SA // www.flickr.com/photos/boobook48/5041751802/
</footer>
</slide>
An end_slide.html
template might look like this:
<slide class="thank-you-slide segue nobackground">
<article class="flexbox vleft auto-fadein">
<h2>Thank You!</h2>
</article>
<p class="auto-fadein" data-config-contact>
<!-- populated from slide_config.json -->
</p>
</slide>
Displaying Images¶
Included Styles¶
Incremental Slides (Builds)¶
In addition to the common incremental slide support, the slides2
theme supports more granular
builds. Items with the class build-item-x
(where x
is a
number) will be incrementally display, in numerical order.
For example, you can show items from bottom to top on a slide:
.. rst-class:: build-item-3
This will be shown third
.. rst-class:: build-item-2
This will be shown second
.. rst-class:: build-item-1
This will be shown first
If multiple items have the same number, they will both be displayed at the same time.
Warning
build-item-*-only
and build-item-*class-*
are experimental
and their behavior may change considerably as we learn more.
Items may also be displayed only at a specific index. That is,
displayed, then hidden again. Appending the suffix -only
to the
build-item-
class activates this behavior.