Auto-creating a Reveal JS slideshow from a folder of images

Late yesterday, I thought I was going to have to make an image slideshow for one of the kid’s sports. I didn’t want to make it in PPT or Keynote, but I also didn’t want to spend any significant time making it.1

Luckily, I’d previously looked into getting file names from directories with PHP (scandir) as part of a project to build an index to our Sensus Access usage data.

A tweak or two and I had a Reveal JS slideshow maker that creates a slide for every image in a directory. You can see the demo here.

The whole thing took maybe 10 minutes to figure out.2 It’s a bit like the handy man story that way. I’ve put my time in previously, and probably more importantly, my mindset is that I shouldn’t have to do repetitive things like this. Maybe a significant aspect of digital fluency is the ability to identify (and refuse to do) boring, repetitive work better left to computers.

How it works

$files = scandir('imgs');//go to the directory named imgs that's in the same directory as this script
foreach ($files as $key => $file) {//for all the files
	if(strlen($file)>4){//for all the files that have names longer than 4, so it doesn't get any . or .. files 
		echo "<section data-transition='zoom' data-transition-speed='fast' data-background-image='imgs/{$file}' data-background-size='contain'></section>";//write the reveal js html
	}
	
}
				}

The javascript in Reveal JS to loop it and auto-advance every 3.5 seconds. Hash lets people link to an individual slide via the URL.

Reveal.initialize({
	hash: true,
	autoSlide: 3500,
        loop: true,

});

The whole thing knit together looks like this.

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>reveal.js</title>

		<link rel="stylesheet" href="dist/reset.css">
		<link rel="stylesheet" href="dist/reveal.css">
		<link rel="stylesheet" href="dist/theme/black.css">

		<!-- Theme used for syntax highlighted code -->
		<link rel="stylesheet" href="plugin/highlight/monokai.css">
	</head>
	<body>
		<div class="reveal">
			<div class="slides">
				<section data-transition="zoom" data-transition-speed="fast"><h1>2022 TES Seniors</h1></section>	
				<?php 
					$files = scandir('imgs');
					foreach ($files as $key => $file) {
						if(strlen($file)>4){
							echo "<section data-transition='zoom' data-transition-speed='fast' data-background-image='imgs/{$file}' data-background-size='contain'></section>";
						}
						
					}

				?>
			</div>
		</div>

		<script src="dist/reveal.js"></script>		
		<script>
			// More info about initialization & config:
			// - https://revealjs.com/initialization/
			// - https://revealjs.com/config/
			Reveal.initialize({
				hash: true,
				 autoSlide: 3500,
  				 loop: true,

			});
		</script>
	</body>
</html>


1 I’m tired. Don’t judge me.

2 now about 5 minutes to write up

3 thoughts on “Auto-creating a Reveal JS slideshow from a folder of images

  1. Nice!

    I do love the single-page-no-framework-dependency minimalism of view-source:http://jonudell.info/stan_gow/ but it is brutally minimal, no features at all, just marches through a set of images. Thanks for the intro to reveal.js! It ticks the no-framework-dependency box while delivering tons of features and a plugin mechanism to boot.

    I’m a huge fan of that kind of software. Another fave in this category: https://www.kryogenix.org/code/browser/sorttable/

    1. Sort Table is a good recommendation. I’d been using Data Tables for that kind of functionality but it is tied into jquery.

      Reveal js is kind of fun if you want to odd stuff and really fun if you want to push things. I did a presentation with Kin Lane that used the (now broken) Spotify API to insert song snippets.

Comments are closed.