Images <img>¶
Exif info¶
We try to fetch Exif data for images.
sli-device: maker and modelsli-datetime: picture time stamp (or fallback to file modification time)sli-gps: point on the map (the HUD map will be automatically displayed in the corner)sli-folder: the folder the file was imported from (not EXIF – it comes from the drop itself, see grouping on import)
However, this is a non-trivial task since the browser protects your photos' privacy. This works for images you drag and drop inside, and images from the web (with a permissive CORS policy). Reading the Exif of local images you merely mention in the document works only with the browser CORS disabled – do that only if you know what you are doing.
Zoomable¶
Zoomable on click / mouse wheel or via a button from the menu. You can zoom either an image or a video. Use arrows to crawl over the picture when zoomed. Even multiple arrows work at once. If you need the arrows to control the video playthrough, use Ctrl+arrows (works for both Firefox and Chrome).
sli-step-points¶
An array of points an image should pass through. The first is the initial image position. Works for the image itself or any contained image.
Point: [left = 0, top = 0, scale = 1, transition_duration = sli-step-transition-duration | sli-transition-duration, duration = sli-step-duration | sli-duration, sli-rotate ]
The first point is a state, not a step – the frame simply appears in it, with no animation, even when
it is zoomed in. (The same goes for entering a frame backwards: you land on its last point at once.)
Want the frame to start unzoomed and only then zoom in? Prepend the neutral point [] and make the
zoom a regular step – that way you also control how long the whole image is held: [[], [100,10,2]].
Alternatively, fill in transition_duration on the first point; there is nothing to transition from,
so that slot means "zoom in from the neutral position when the frame opens".
In this example, the image starts at [100, 10, 2], then zooms out [] (instantly, no delay), then goes slowly (note the delay parameter) to [150,10,3,3]. Next, while using the default transition_duration (note the null -> becomes 1.5), we set duration to 0.5 second for this step only [200,10,4,null,.5].
<article sli-transition-duration=1.5>
<img sli-step-points="[[100,10,2], [], [150,10,3,3], [200,10,4,null,1] , [250,10,5] , [300,10,6] , [350,10,7]]" src="..."/>
</article>
Position 0,0 is at the image centre. Its real dimension is taken into account so the value remains stable while changing the browser size (different displays). We recommend using the property panel (Alt+P) to determine the coordinates – Alt+S adds a point at the image's current position without even opening the panel first. Drag a point onto another one in the panel to reorder them.
Seeing the points without the panel
In editing mode (Alt+E), a frame that carries points shows them as
pills in the top-right corner whenever the property panel is closed – 📸 for sli-step-points,
🎬 for sli-video-points. So it is visible at a glance that a
frame has points at all, and that Alt+S / Alt+V just added one. The pills
are fully interactive without the panel: click one to edit that point (a step-point follows
whatever you zoom/pan to, a video point shows its rules),
double-click to remove it, and use the trailing + to add one. The point being edited, or one
just added, gets a row of its own fields below it – for a step-point the two number inputs
(Alt+I / Alt+U) setting its transition_duration/duration.
Every image in the sections slowly zooms out from the centre. (Images in header and footer are ignored.)
<section sli-step-points="[[0,0,15], [0,0,1,5]]">
<article><img src="..."/></article>
<article><img src="..."/></article>
<article><img src="..."/></article>
</section>
Panoramic images¶
When an image is much longer than the screen, we show it slowly first before resizing it to fit the screen. This delays the <article>'s sli-duration. It starts when the image proportion width / height > sli-panorama-threshold=2.
Preload¶
When you have thousands of images, your browser may choke. Use sli-src instead of src as a preload.
A generator may not even know the file type. Put sli-src directly on an empty <article> and the right element is created from the file extension.
<article sli-src="flower.jpg"></article> <!-- becomes <article><img sli-src="flower.jpg"></article> -->
<article sli-src="clip.mp4"></article> <!-- becomes <article><video sli-src="clip.mp4"></article> -->
Attributes like sli-datetime are inherited from the <article> too, so a generator can put them directly there without knowing whether it will become an <img> or <video>:
Thumbnail preview (sli-thumb)¶
If your originals are large (multi-MB photos over a slow connection), let SlideRshow show a small preview first and swap in the full file only once it has fully downloaded. Set sli-thumb on <main> (or a <section>, or a single <img>/<video>) to a template resolved against that element's sli-src:
{dir}– directory of the original (photos/2024/){file}– full original file name (flower.jpg){name}– file name without extension (flower){ext}– original extension (jpg)
SlideRshow itself never generates the thumbnails. The partner tool slidershow-builder does: its previews subcommand writes a 320 px WebP for every photo and video frame (re-running it only touches what changed and prunes thumbnails of deleted files):
Subfolders are mirrored (photos/2024/a.jpg → thumbs/2024/a.jpg.webp), so for a nested tree set the template per <section> (sli-thumb="thumbs/2024/{file}.webp"). You may of course prepare the thumbnails any other way (ffmpeg, imagemagick) and point the template at them. If a thumbnail is missing or fails to load for a particular file, that file is silently loaded the usual way, no error is shown. A sli-thumb without any {} placeholder is used verbatim, so you may also override it on a single element for an irregular file:
What the stand-in looks like¶
While the full file downloads, the preview occupies the frame exactly like the original would –
it is scaled up to the same size, so a 300 px thumbnail does fill the whole screen. To keep that
from being mistaken for the real photo, it is rendered blurred (filter: blur(12px) on
[sli-thumb-shown]); the blur fades away over 0.3 s the moment the full-quality file is swapped
in. Restyle it in your own CSS if you prefer a sharper stand-in:
For a <video>, the thumbnail becomes the poster instead – the browser replaces it on its own
once the first frame is decodable, and it is not blurred.
The grid/ribbon overview (g/j) uses the thumbnail exclusively and never downloads the full file just to show a preview.
Fallback source (sli-fallback)¶
Some formats do not play in every browser (e.g. HEIC/HEIF photos are decoded by Safari but not by Chrome on Windows). Set sli-fallback – same placeholder syntax and inheritance as sli-thumb – to a pre-converted alternative that is loaded automatically if sli-src fails to load or decode:
Several space-separated templates may be given – useful when a single sli-fallback set high up (e.g. on <main>) has to cover both photos and videos, which convert to different containers/extensions. Each candidate is tried in order; the first that actually loads/decodes wins:
SlideRshow never converts the files itself. slidershow-builder does – HEIC/HEIF → JPEG and videos in codecs browsers do not play (e.g. HEVC) → H.264 MP4, in the same pass that creates the thumbnails:
If none of the candidates loads (or sli-fallback is empty/missing), a toast warns about the unsupported file for the frame currently being viewed (a visible thumbnail, if any, stays on screen).