revealjs-media-list
v1.0.2
Published
Add images and videos with captions and sources to your presentation
Readme
Media List for Reveal.js
A simple plugin for Reveal.js that allows you to add images and videos with captions and sources to your presentation. The plugin will automatically create a list of medias at the end of the presentation. All you need to do is add the images to your slides and the plugin will take care of the rest.
Installation
To install the plugin, the mediaList.js and mediaList.css files need to be added to the presentation. The plugin can be installed via NPM, JSDelivr CDN, or manually.
NPM (Recommended)
1. Install the plugin.
npm install revealjs-media-list2. Add the source files to the presentation and initialize the plugin.
In the HEAD
<head>
...
<link rel="stylesheet" href="dist/reveal.css" />
<link rel="stylesheet" href="dist/theme/black.css" />
<!-- START: The plugin -->
<link
rel="stylesheet"
href="node_modules/revealjs-media-list/mediaList/mediaList.css"
/>
<script src="node_modules/revealjs-media-list/mediaList/mediaList.js"></script>
<!-- END: The plugin -->
...
</head>Note: Add the plugin to the list of plugins and configure it as described in the Usage section.
JSDelivr CND (Easiest)
1. Add the source files to the presentation and initialize the plugin.
In the HEAD
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/revealjs-media-list@latest/mediaList/mediaList.css"
/>
<script src="https://cdn.jsdelivr.net/npm/revealjs-media-list@latest/mediaList/mediaList.js"></script>Note: Add the plugin to the list of plugins and configure it as described in the Usage section.
Manual
1. Copy the mediaList/mediaList.js and mediaList/mediaList.css files to the plugin/mediaList/mediaList folder of your reveal.js presentation.
mkdir -p <path-to-revealjs>/plugin/mediaList/
cp mediaList/mediaList.css <path-to-revealjs>/plugin/mediaList/
cp mediaList/mediaList.js <path-to-revealjs>/plugin/mediaList/2. Add the source files to the presentation and initialize the plugin.
In the HEAD
<head>
...
<link rel="stylesheet" href="plugin/mediaList/mediaList.css" />
<script src="plugin/mediaList/mediaList.js"></script>
...
</head>Note: Add the plugin to the list of plugins and configure it as described in the Usage section.
Usage
After installing the plugin, you need to add the plugin to the list of plugins and configure it.
- Add the plugin to the list of plugins (
RevealMediaList). - Add the configuration for the plugin (
mediaIllustrations).
1. Add the plugin to the list of plugins
<body>
...
<script>
Reveal.initialize({
hash: true,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealMediaList],
});
</script>
</body>2. Add the configuration for the plugin
<body>
...
<script>
Reveal.initialize({
hash: true,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealMediaList],
mediaIllustrations: {
title: 'List of Medias', // Change the title of the final slide
fontSizeList: '1rem', // Change the font size for the list
fontSizeCaption: '0.8rem', // Change the font size for the caption
captionColor: '#555', // Change the color of the caption under the image
imageCaptionName: 'Image', // Change the name of the image caption
videoCaptionName: 'Video', // Change the name of the video caption
},
});
</script>
</body>3. Add your first image to the presentation.
Now you can add as many images and videos as you want to your presentation. The plugin will automatically create a list of medias at the end of the presentation.
Add an image with a source
<img
src="path/to/image.jpg"
data-text="Caption for the image"
data-source="www.example.com"
/>Image without a source
<img src="path/to/image.jpg" data-text="Image is tagged as (own source)" />Duplicate images
Use data-id to mark images as duplicates. The plugin will on the one hand only show the image once in the list of medias and on the other hand use the same image id for the caption of the image.
<img
src="path/to/image.jpg"
data-text="Caption for the image"
data-source="www.example.com"
data-id="duplicate"
/>
<img
src="path/to/image.jpg"
data-text="Caption for the image"
data-source="www.example.com"
data-id="duplicate"
/>Add a video
<video data-text="Big Buck Bunny" data-source="https://example.com">
<source
data-src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
type="video/mp4"
/>
Your browser does not support the video tag.
</video>Demo
Go to the demo page.
Local
Clone the repository, switch to the demo folder and run the Reveal.js server.
git clone https://github.com/skyface753/RevealJS-Media-List.git
cd RevealJS-Media-List/demo
npm install
npm startOpen your browser and go to http://localhost:8000.