Adding narration to a slide show

TL;DR: What FLOS-software do you know that allows adding narration to your photos? I don’t mean classic desktop publishing or making movies from the pictures, but something in between. I was thinking about using reveal.js but it is not very much suited to pure photography slide shows with interleaved text (e.g. sometimes between 2 photos, sometimes as an overlay etc.). However, if this is the most suitable solution I will dig deeper into it. On the other hand there is adobe slate, which is more an article like form but interesting as well. I search for something where the pictures are in the focus, and everything else steps back a little. It should be responsive enough to make for a good full screen presentation but is not tied to the slide format (I mean something like slate is interesting for me too). But it should not need a server.


When I was young, below 10, back in the 80’s, some people of our family, mainly my uncle and my father, made a slide show from time to time. My uncle told about his visits to the US (this was a big deal back then, at least for me), when he was visiting his emigrated daughter, showed how they live, the nature, the cities, and told little anecdotes. My father used to show pictures of his visits to Ireland (he loved that country, even without having any formal English education at all he made friends there), and he had as well many anecdotes to tell. Somehow these shows influenced me a lot. I loved them for several reasons, the stories, the interesting foreign regions and, as well, the technical side of the slide projection. Nowadays, I love visiting “professional” multimedia presentations from people that travel, or about nature etc. We even have a festival for such shows (http://www.weitsicht-darmstadt.de/).

Preparing a simple slide show on the computer is not difficult anymore. To meet the requirements of those shows of my family back in the 80’s I would guess libreoffice or even a simple image viewer is enough. But I think a lot about possibilities to add narration to my pictures in a different, more permanent way. E.g. in an article-like way or as slide show with interleaved text either as overlay or as extra slides. But something where the photos are in the focus, and what is visually appealing. See the first paragraph for a better description.

From reveal.js I like that it can be exported to PDF and that it is responsive enough to work even on a phone. However, it misses special features to present photography, e.g. to set a fix aspect ratio of the presentation such that the photos will not be cropped or the possibility for flexible photo alignment (maybe I just didn’t find them). Before digging deeper into reveal.js, I ask here to find out if there are more specialized solutions that I have missed so far.

And, more general, how do you present your photos together with narration?

1 Like

Honestly, I’m answering quickly but intend to come back to this in more detail.

Off the top of my head there are a couple of ways I would approach this right now and they’re all some form of presentation methods.

Reveal.js is a great first choice and the one I would probably go with or start hacking at to get that I want. Really the larger problem you’ll have to solve is what it does to images when viewed at very different resolutions.

Inkscape + Sozi might be another fun option.

Pure HTML is another very safe bet. (Though it will require the largest amount of work).

I’d say that overall HTML will offer the greatest portability, and technical capability that you’ll probably need.

I think you’re on the right path with reveal.js, it is a pretty flexible solution. You could add an audio clip for each slide, then use JavaScript to start playing the audio when the transition happens. You could also store the narration as text in the speaker notes feature in case you don’t want the pre-recorded narration.

Since reveal.js is free software and uses the common HTML 5, CSS, and js, you van do it all very easily.

What about something like Imagination? Granted, it won’t cover all resolutions or platforms necessarily, but if you know who your audience is you can compensate accordingly.

Thanks for your suggestions so far :smiley:.

If I understand correctly, Imagination is targeted towards a movie file as output. For two reasons this is not what I am searching for: I want some flexibility and responsiveness on one hand and a maximum in delivered image quality, at least if single images are extracted. The quality of movie formats, given a certain maximum size limit, is always much worse than delivering stills. Furthermore, the viewer should be able to go through the photos at his speed and even forth and back. Nevertheless, I’ll add a bookmark, since this could be useful for another purpose than my present one.

Reveal.js seems really close to what I am searching for. I need something that runs without a server, this seems possible, however, only for a subset of features. But maybe these are enough. I am still not confident that it allows to include images in a way that works for presenting photography. Background images will be cropped to the target resolution, which already bothers me with some adobe slate articles I have read (e.g. cropped heads, cropped below the chin :confounded:). And I am not sure if it is possible to add images full screen without making them a background. I’ll try to find out how it could work. Furthermore I am not sure if text handling would work well. First, can I use my own font files, without relying on certain fonts being installed by the viewer? And, second, can I prevent accidents such as the one here? When I view this page (the second one in the presentation) full screen on my 1920×1080 display, the quote on the lower left is cropped. Such things shall never happen.

I’ll try to find out more on this. If you have more suggestions or want to share how you are presenting photos + story, it would be really appreciated :smiley:.

There’s a couple of things that you will need to keep in mind…

  1. You’ll be able to embed any font file you want for portability (if file size is not a problem).
  2. Scaling images is a function of what you want to show and what is most important to you.

You’re basically running into the same exact problem that responsive web design is attempting to (and in many cases has) solved. It will likely require some concessions on your part for viewing the image.

Here’s an example deck I put together with a square image set to the main options used in css background-size (cover, contain, and others). In reveal.js/slid.es parlance it’s called Original, Fit, and Stretch:

http://slides.com/patrickdavid/deck

You can actually modify the background image position and size with percentages if you want to focus on a particular part of an image. I’m happy to go through this a little later to help out (including how to embed your fonts into your presentation deck as base64 data or just follow this old post of mine).

If you’re using Linux or OS X, use python -m SimpleHTTPServer to start a web server.

Reveal.js brings instructions for using a “built-in” or “dedicated” web server (based on node.js/grunt http server): GitHub - hakimel/reveal.js: The HTML Presentation Framework. However, maybe I should add a few words on the actual application I have in mind. I want to be able to hand over a usb key, CD, zip file etc. The receiver should only have to load the index.html with a suitable (means recent enough) browser and be able to watch the show, independent of OS or additional software.

At the moment I plan to hand over a “show” about a business trip I did a couple of years ago with a colleague. The colleague is leaving soon and I never gave him photos of our adventures/sightseeing that we did in the spare time. First I thought of a photo book, but it is not so many photos since it was a short conference we visited with not much spare time. I think what I could achieve with reveal.js would somehow suit well, and it is not overdone (what a photo bokk somehow would be). Just the photos is not enough, they need some glue.

Thanks, @patdavid, for doing my homework :smile:. I should have done this research myself that you are presenting, but it seems like I should really try using reveal.js. Therefore, extra thanks again and again! I will check what I can achieve with reveal.js, and with embedded fonts, either as file in a directory or base-64 encoded, but it will take a couple of days. Unfortunately I’m very busy these days.

1 Like

This is exactly how reveal.js will work. You only need the webserver for speaker notes, external markdown and multiplexing/sync.

Now this thread is totally making me want to go build a photo story… :smiley:

1 Like

The last days I spent several hours with reveal.js to try to implement slide show basics that would be necessary to add text in a suitable form. I come to the conclusion that, on one hand, reveal.js is a very capable tool, but, on the other hand, fundamental features are missing for photo presentation. I document my findings here. I am not asking for help to solve my problems since these are so many that it could require a major rewrite of reveal.js, but I may be wrong about this one. However, If you know that I am wrong on single aspects, it would be nice if you could tell me nonetheless.

  • My plan was to add the images as background. @patdavid has already shown how you can use background images reasonable for a photo presentation. However, to add text as overlay, you would need a coordinate system relative to the background image. This is not possible, since the background and the foreground are mostly independent. Especially, absolute positioning of text on the canvas is almost impossible. You can shift your text around, but scaling of the browser window will shift the text relative to the background. I did not find a way around, and there are a lot of bug reports and questions about this topic with their answers being not very promising. A simple shift of the presentation title to not overlap with the background image’s subject is already hard to achieve.
  • I would require overlaid text to properly scale with the browser window size. This was possible by setting the configuration options minScale: 0.0 and maxScale: 10000, with 10000 as a rough approximation of infinity. This works for normal text and headlines etc., but it easily breaks if you add some inline CSS, even if it has nothing to do with font size.
  • There are no predefined possibilities to arrange several images on a slide (e.g. 2 images side by side). It requires a deep CSS knowledge and a deep understanding of reveal.js to implement something like that.
  • Having images in the background is not the optimal solution. But having images filling the screen in the front, together with overlaid text, seems even more complicated. But I see more perspective for this approach. You could then even have a photo in the background overlaid by several images in the foreground.

As far as I can tell, a reasonable photo presentation would require a more static behaviour, more PDF-like, with absolute positioning of elements (means relative to the slide size, but independent on the browser window size), but supplemented by the features of reveal.js. Be warned, with reveal.js you are approaching an extremely steep learning curve to get very simple things done. For me, having only little CSS and JavaScript experience, this reveals as extremely difficult. Especially a lack of documentation and an “official” place to discuss about the tool make it more difficult.

Some of the issues mentioned actually caused me to go down a rabbit hole and reacquaint myself with FlexBox.

This little project also looks promising.

You are basically running into the same problem that we’ve been (slowly) trying to solve regarding responsive design. Just replace your “photo representation” with “any website” and you’ll see what I mean. It’s not an easy problem to solve.

We have to design fallbacks for all the possible myriad of devices and screen sizes that may be out in the wild such that our sites are still usable and (hopefully) look good. If I could count the hours I spent designing the main site and staying responsive I’d go nuts. :wink: (On the other hand, try viewing https://pixls.us on just about any device and it should be usable and might look ok…).

I had a quick go at fiddling with reveal and using only css it should be possible to get mostly what you want.

But that’s part of the problem, I think.

When I’m doing design these days with images like this, it helps to think of it more as regions of interest for text/annotation (vs. perfect placement). www.gimp.org header image is an example of this. The text/header flows around a rough area of the image - not perfect placement, but good for just about any resolution someone might be looking at it with.

  • If you need pixel-perfect placement of elements relative to an image at all possible scales/resolutions - then you may need to fall back to static size (non-responsive) rendering (something like a PDF or just overlaying words on an image in GIMP or something).
  • If you can envision using rough regions of text placement, we might be able to make some quick small modifications to your reveal.js deck to accommodate what you want. Sort of break your canvas area up into thirds or so and try to fit things from there.

If you want to share a couple of images and what you have in mind, I’d be happy to spend some time fiddling with you on this (no hurry or rush - entirely at your convenience).

Two other options worth pointing out:

  1. Straight HTML page to include a narrative and images. This means you can focus on the narrative/story in the main body text and allow the images to possibly fill the screen or take prominence on their own without having to worry about text overlay placements.

  2. Scribus to create a magazine-style PDF layout where you can get as fancy as you’d like with a static canvas size.

Honestly, if text has to absolutely be in a certain position across the board, you really are better off making slides in something like Scribus or Inkscape (or GIMP as mentioned above) and then doing as @patdavid suggests with HTML. You can use the <audio> tag to implement your narration and call some pretty basic JavaScript or jQuery to handle playback and slide function.

That’s why I like the simple sliders like the one I linked to above. Although powerful and undeniably polished, reveal.js just seems bulky to me. I would never really use the GUI as I much prefer coding it myself. And if I’m going to pay $6-12 a month, it may as well be for a server of my own. A simple, public slideshow can easily be hosted for free on GitHub pages and if privacy is a must, I would pay them for it. Not that I think reveal.js doesn’t deserve the support, mind you.:yum:

@patdavid I would be interested in seeing what you came up with, as I’m playing around with it myself. However, my toddler simply does not allow me to focus on things beyond a cursory exploration and I’m simply not certain how far I’ll be able to get in a reasonable time frame.

Pat and Morgin, a quick answer now and, probably, a longer and more detailed answer later, because I need some time to check the suggestions.

I just wanted to briefly mention some general thoughts. I thought that what I have in mind would be a pretty common task. Therefore, I thought that there would be software available targeted to my problem. But it seems that I am wrong, that kind of photo slide show seems to be something very specific. It seems that people tend to do either photo books or presentations that are performed on stage, but nothing in between. Adobe slate being an exception, but a proprietary one.

I used inkscape and, more recently, scribus as basis for photo book design. What comes out is either a PDF or a hand full of pixel images, no problem for printing or archiving. On the other hand, I did “stage” presentations in LaTeX beamer and in PowerPoint and what comes out is either something not working without the “spoken audio track” or at least something rather static/technical, and, again, a PDF document. With full resolution images, this can be a 100 MB PDF or worse. What I had in mind is something that takes the best of both worlds, combined with a browser based approach that can leave full resolution images as single files that are dynamically loaded. Of course, the overall file size of the project would not change, but the flexibility would be increased tremendously. One could e.g. view the images without text, what hard to achieve in PDF, it would load much faster etc. And the little animations such as sliding or fading out do, at least for me, transport more of a classical photo book feeling than a pdf would. In pdf it may be possible with the scripting extensions, but they are not understood by FLOSS pdf viewers.

Many thanks, @patdavid, for your offer. This is very generous, and maybe I come back to this. I know you are a true web design master (judging from pixls.us and the gimp website). However, I guess you have better things to do than helping out with my weird ideas that may not work in the end.

But, what I had in mind is something seeming not too complicated seen from the outside. Something inspired by a classical photo book design, full screen image and some lines of text in one of the corners as an overlay, with the option to slide out the text to reveal the undisturbed image. Combined with the option of pure text slides in between three photos. And the option to do some basic grid designs, e.g. two pictures side by side or a three and four picture grid. And a title that can be placed on the title photo at an absolute position in the picture coordinate system. And the possibility to add little text notes somewhere in this coordinate system on normal (not title) pictures. Maybe the possibility to have white or black frames around the pictures. All of that with a constant aspect ratio of the usable area, e.g. 2:3, to prevent that the size relations between images change dependent on the display aspect ratio.

@MLC: I don’t want to add audio, just what I described above, only a subset of what reveal.js does and, being a TeX/LaTeX user for about 15 years that even did a little TeX programming, I prefer to “code” these things as well. Therefore, reveal.js sounds reasonable interesting. But HTML+CSS+SASS+JS is really complicated, TeX, even as programming language, is indeed simple in comparison :wink:

And, @MLC, I know the toddler “constraint”, when not at work I have a 2 years old around, actually having his “why?” phase :smiley:.

I will see if I can come up with some images to play with and my humble tries in reveal.js, but it may take some days.

Perhaps popcorn.js can be of some assistance. http://popcornjs.org

1 Like

Popcorn.js is definitely worth a bookmark. However, from what I understand from the popcorn.js web site it is about integration of video and web services. What I am searching for is something that would work totally offline and no video is required. The steps in the “show” should advance at a user’s decision, as it would be in a gallery. Or do I miss something about popcorn.js?

You should be able to hook into your own video/images with popcorn.js, but like anyother JavaScript, you’ll need a web server in front of it.

The NPR William Carlos Williams poem example is a nice demo of hooking audio into the DOM. You could easily replace the highlighted lines with showing images/text

Why do I need a web server for JavaScript? As long as every data I want to access is local I don’t need it, do I? reveal.js runs without web connection.

This is not my problem. I do not want audio at all, only written text as overlay over some images and some text in between two images. I guess I have to put together kind of a demo of what I have in mind. I will try to come up with something the next days (I hope that my spare time permits).

Most modern browsers do not load JavaScript that is referenced locally by default, since this is the way virii spread.