Gif

The "Gif" component allows you to easily add a Gif, like those provided by Giphy, in almost any slide of your presentation.

Table of contents

Showcase

Hey

My gif

Installation

This component is part of the "Gif" template. Therefore, if you would like to use it, install the related slide as described in its installation chapter.

If you are using our Starter Kit this template is included. You don't need to install it so therefore you should skip the "Installation" chapter.

Usage

The "Gif" slide's Web Component could be integrated using the tag <deckgo-gif/>.

<deckgo-gif src="https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif" alt="My gif" fullscreen="true"> <h1 slot="header">Hey</h1> <h2 slot="footer">It's a cool gif</h2> </deckgo-slide-gif>

Slots

The slots header and footer are both optional. header and footer would be displayed over the gif.

Attributes

This component offers the following options which could be set using attributes:

AttributeTypeDefaultDescription
srcstringThe source url, the src, of the Gif. Could be an embeddable external url or a local one.
altstringAnd alt information could be provided for accessibility reason.
fullscreennumberfalseIf set to true, the gif width and height will be related to the slide width and height respectively will be fullscreen.

Theming

The following theming options will affect this component if set on its host or parent.

CSS4 variableDefaultNote
--widthThe width of the gif
--heightThe height of the gif
--backgroundThe background of the header and footer over the gif
--colorThe color of the header and footer over the gif
--paddingThe padding of the header and footer over the gif
--zIndex2The z-index of the slide
--border-radiusA radius for the border of the gif container

Note

Of course, as other images added to a presentation build with DeckDeckGo, gifs are lazy loaded too.