Directory2Block Slideshow
This module creates a responsive slideshow block that displays images and multi-page PDFs directly from any directory on your Drupal site. It requires no complex configuration and automatically updates when files are added or removed from the specified folder.
This module was developed with the assistance of AI tools for scaffolding and prototyping, directed, reviewed, tested, and actively maintained by the author. Community feedback, code reviews, and issue queue contributions are warmly welcomed.
Directory2Block Slideshow provides a lightweight, self-running, and responsive slideshow block that reads and displays graphics, photos, and multi-page PDFs directly from any directory on your Drupal site.
No complex Views displays, no custom Media entities, and no file field configuration required. Simply specify a folder path or stream wrapper (like public://gallery), and the module immediately scans the directory and presents an interactive, touch-friendly carousel.
Why Directory2Block Slideshow?
Most carousel solutions in the Drupal ecosystem (such as Views Slideshow or Slick Carousel) are powerful but heavyweight. They require you to create Media bundles, configure file upload fields, set up image styles, and build multi-step Views queries just to show a rotation of images.
Directory2Block Slideshow solves this with zero-configuration simplicity:
- Point the block to any directory stream wrapper (
public://photos,public://GraphiC-svg,private://...) or relative server path. - Add, update, or remove files in the folder via SFTP, Drush, or file managers, and the slideshow updates automatically.
- Completely contained with zero external JS library or CDN dependencies.
If you only want this block on a single page, use Layout Manager to insert the block.
Key Features
- Direct Directory Reading: Displays all matching media files from any directory on your server.
- Multi-Format Support:
- Vector: Scalable Vector Graphics (
.svg). - Raster Images:
.png,.jpg,.jpeg, and.webp. - PDF Documents:
.pdfdocuments with automated multi-page slide extraction.
- Vector: Scalable Vector Graphics (
- Automated Multi-Page PDF Decomposition:
- Each page of a multi-page PDF is automatically extracted on the server into an individual high-resolution slide (e.g. Report (Page 1 of 4), Report (Page 2 of 4)).
- High-performance caching: pages are converted at 150 DPI with anti-aliasing via native Ghostscript (or PHP Imagick fallback) and re-rendered only when the PDF timestamp changes.
- Zero External Dependencies: Pure vanilla JavaScript and CSS. No jQuery plugins, Slick.js, Owl Carousel, or external CDNs required.
- Touch & Mobile Ready: Full touch swipe gesture navigation on mobile phones and tablets.
- Accessible (WAI-ARIA): Clean semantic HTML5 markup, ARIA carousel semantics, keyboard arrow key navigation, and support for
@media (prefers-reduced-motion: reduce). - Highly Configurable Block Settings:
- Media directory path.
- Allowed file extension filter.
- Maximum pages per PDF safeguard.
- Slide interval speed (milliseconds).
- Smooth transitions (Fade or Slide).
- Container maximum height constraint (
550px,70vh, ornone). - Pause on mouse hover.
- Toggle previous/next arrow buttons, dot indicators, and slide title captions.
Common Use Cases
- Technical & Scientific Plots: Autoplaying galleries of vector SVGs or scientific charts without compression artifacts.
- Slide Decks & Technical Papers: Displaying multi-page PDF whitepapers, presentation decks, or newsletters page-by-page.
- Photo Galleries & Portfolios: Pointing to a folder of product photos, art portfolios, or project screenshots.
- Header / Hero Banners: Rotating marketing graphics and announcements in any block region.
Requirements
- Drupal: Core 10.x, 11.x, or 12.x.
- PHP: 8.1 or higher.
Optional (for PDF slide rendering):
- Ghostscript (
/usr/bin/gs) (Recommended): High-speed native vector rasterizer with 4-bit anti-aliasing. - PHP
imagickextension: Used automatically as a fallback if Ghostscript is not installed.
(Note: If only displaying SVGs, PNGs, JPGs, or WebP images, neither Ghostscript nor Imagick is required.)
Installation & Quickstart
- Install via Composer:
composer require drupal/directory2block_slideshow drush en directory2block_slideshow -y - Put your images, SVGs, or PDFs in
sites/default/files/my-slides/(or any public directory). - Go to Structure > Block layout (
/admin/structure/block) or open Layout Builder. - Click Place block, select Directory2Block Slideshow, enter
public://my-slides, and save!
Maintainers
- James Rome (jamesrome)
Depends on
Dependencies of the latest stable release
No dependencies recorded for this project.
Required by
Tracked projects that depend on this one
No tracked projects depend on this one yet.