Examples - Snap Inline Images



The snap-layouts system supports standard markdown inline image syntax to position images on any slide.

For example, the following slide markdown demonstrates the use of a mixture of regular slide content, plus multiple snap-layout tags to position two images and associated plain-text headings on the slide:

---

## Regular<br>Slide Content

@snap[north-west]
Delicious
@snapend

@snap[west sidebar]
![PLATE](assets/img/fruit-plate.jpg)
@snapend

@snap[north-east]
Ice Cream
@snapend

@snap[east sidebar]
![ICECREAM](assets/img/fruit-icecream.jpg)
@snapend

This markdown snippet renders as follows:

SNAP-HTML-CONTENT

One important take-away from this example is how custom css has been used to constrain the images within the east and west portions of the slide canvas.

Constraining the image width was achieved by activating a sample custom css class - called sidebar - when declaring the opening @snap tag:

@snap[west sidebar]
![](assets/img/fruit-plate.jpg)
@snapend

For this example, the sidebar custom class was simply defined as follows:

.sidebar img {
  width: 25%;
}

This example demonstrates how you too can activate one or more custom css classes to target and manipulate any content you include between snap-layout tags on your slides.