This repository has been archived on 2024-06-06. You can view files and clone it, but cannot push or open issues or pull requests.
vitrine/content/home/shortcodes/slide.md
2022-01-05 23:28:57 +01:00

3.7 KiB

+++ weight = 34 +++

Slide

Use this shortcode when you need to customize slide attributes like id, class, background color and transition.


{{< slide class="hello" >}}

Slide

Add the shortcode above the slide's content, below the ---.

---

{{</* slide class="hello" */>}}

## Hello, world!

---

{{< slide transition="zoom" transition-speed="fast" >}}

Custom slide 1

Did you notice? This slide has a fast zoom transition.

---

{{</* slide transition="zoom" transition-speed="fast" */>}}

## Custom slide 1

---

{{< slide background-color="#FF4081" >}}

Custom slide 2

This slide has a different background color.

---

{{</* slide background-color="#FF4081" */>}}

## Custom slide 2

---

{{< slide background-image="/images/alex-litvin-790876-unsplash.jpg" background-color="#000000" >}}

Custom slide 3

This slide has a background image.

---

{{</* slide background-image="/images/alex-litvin-790876-unsplash.jpg" */>}}

---

(credit Alex Litvin)


{{< slide id="custom-slide" >}}

💡 Tip: Setting a slide's id attribute makes it easy to link to from other parts of the presentation.

---

{{</* slide id="custom-slide" */>}}

## Custom slide

---

[Try the link](#custom-slide)

Try the link


Slide attribute possibilities from the Reveal.js docs:

  • autoslide
  • state
  • background
  • background-color
  • background-image
  • background-size
  • background-position
  • background-repeat

  • background-video
  • background-video-loop
  • background-video-muted
  • background-interactive
  • background-iframe
  • background-transition
  • transition (can have different in and out transitions)
  • transition-speed
  • notes (can also use the note shortcode)
  • timing

{{% section %}}

Slide templates

Store sets of common slide attributes in front matter variables and apply them to slides with the template attribute.


navigate down to learn more
🔽

Create templates in config.toml, _index.md or the current page's front matter. Put them under the templates key with a meaningful name:

[reveal_hugo.templates.hotpink]
class = "hotpink"
background = "#FF4081"

{{< slide template="hotpink" >}}

Apply the template using the template attribute of the slide shortcode:

{{</* slide template="hotpink" */>}}

# I'm a hot pink slide!

If a template exists in multiple configurations, it's properties will be merged. If a property is declared multiple times, the order of precedence is:

  • page
  • section (_index.md)
  • site (config.toml)

{{% /section %}}


{{% section %}}

{{< slide content="home.reusable" >}}


{{< slide content="common.nested.reusable" >}}

{{% /section %}}


{{% section %}}

Slide-specific CSS

Add more variety to your presentation by applying slide-specific CSS.


navigate down to learn more
🔽

First, use the slide shortcode to give the slide a class:

---

{{</* slide class="side-by-side" */>}}

# 📈

# 📊

---

Next, use a layout extension partial like reveal-hugo/head.html to add CSS selectors:

<style>
.reveal section.side-by-side h1 {
  position: absolute;
}
.reveal section.side-by-side h1:first-of-type {
  left: 25%;
}
.reveal section.side-by-side h1:nth-of-type(2) {
  right: 25%;
}
</style>

{{< slide class="side-by-side" >}}

📈

📊

{{% /section %}}