Directory2Block Slideshow

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: .pdf documents with automated multi-page slide extraction.
• 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, or none).
  • Pause on mouse hover.
  • Toggle previous/next arrow buttons, dot indicators, and slide title captions.

Common Use Cases

1. Technical & Scientific Plots: Autoplaying galleries of vector SVGs or scientific charts without compression artifacts.
2. Slide Decks & Technical Papers: Displaying multi-page PDF whitepapers, presentation decks, or newsletters page-by-page.
3. Photo Galleries & Portfolios: Pointing to a folder of product photos, art portfolios, or project screenshots.
4. Header / Hero Banners: Rotating marketing graphics and announcements in any block region.

What's New in 1.0.5

Release 1.0.5 introduces an interactive, high-fidelity Vector Pan & Zoom Inspector designed specifically for scalable vector graphics (.svg), technical charts, architectural diagrams, and schematics.

Key Features & Enhancements

• Interactive Fullscreen Vector Inspector:
  • SVG slides automatically display an unobtrusive [Zoom] button in the upper-right corner. Non-SVG raster images (.png, .jpg, .webp) and PDF slides continue to display normally.
  • Clicking the button opens an accessible, full-viewport lightbox overlay (role="dialog", aria-modal="true").
• Cursor Focal-Point Mouse Wheel Zooming:
  • Uses mathematical focal-point tracking so the canvas zooms directly into the exact coordinates beneath the mouse cursor without disorienting drift.
  • Magnification scale ranges smoothly from 50% up to 1200%.
• Fluid Panning & Mobile Touch Support:
  • Desktop: Click-and-drag panning with reactive grab/grabbing cursor states.
  • Mobile & Tablets: Full touch support with single-finger dragging and dual-finger pinch-to-zoom gestures.
  • Double-Click: Toggles quickly between magnified (250%) and standard 1:1 (100%) views.
• Floating Toolbar Controls:
  • Integrated header toolbar with Zoom In (+), Zoom Out (-), 1:1 Reset, Zoom Level percentage badge, and Close (×).
• Full Keyboard Accessibility:
  • Esc closes the inspector and restores focus to the triggering slide.
  • + / = zooms in; - / _ zooms out; 0 resets to 1:1.
  • Arrow keys (Left, Right, Up, Down) pan across the magnified canvas.
• Slideshow Autoplay Synchronization:
  • Autoplay timers automatically pause while the inspector is open and resume when closed.
• Configurable Block Setting:
  • Added an "Enable Vector Zoom for SVG graphics" checkbox in the block configuration (enabled by default). Pre-existing block instances automatically default to enabled without requiring manual reconfiguration.
• Zero External Dependencies:
  • Built entirely with lightweight vanilla JavaScript and CSS (<35 KB). No third-party canvas or pan-zoom libraries required.

What's New in 1.0.6

Release 1.0.6 improves the Vector Pan & Zoom Inspector to ensure transparent SVG graphics (such as scientific plots, charts, and architectural diagrams) remain completely legible.

Fixes & Enhancements

• White Canvas Backing Sheet (Default): Transparent SVG slides now float on an elevated white canvas backing with padding, preventing dark text, axis numbers, and black linework from disappearing against the dark theater overlay.
• Canvas Background Toggle: Added a toolbar button and keyboard shortcut (B) to cycle canvas styles between White (default), Dark, and Transparent Checkerboard.
• Standards & QA: 100% clean passes on PHPCS (Drupal & DrupalPractice), ESLint, Stylelint, and CSpell.

Updating to 1.0.6

On shared hosting servers, PHP has a default memory limit (often 512 MB).
Composer downloads and searches through the entire Drupal.org package catalog to check version compatibility, which requires 1 GB to 2 GB of RAM.
Without this flag: PHP could run out of memory and silently freeze.
With this flag: It temporarily removes the memory ceiling so the update finishes cleanly in seconds without freezing.

To update an existing installation using Composer:

php -d memory_limit=-1 $(which composer) update drupal/directory2block_slideshow --with-dependencies
drush cr

What's New in 1.0.7

Release 1.0.7 delivers infinite vector sharpness to the Vector Pan & Zoom Inspector, eliminating the blur and fuzziness caused by browser GPU texture scaling on zoomed SVGs.

Key Improvements

• Native Inline SVG Rendering: SVGs are now fetched and parsed directly into first-class <svg> DOM elements rather than static <img> raster snapshots.
• Dynamic Vector Dimension Scaling: Eliminates pixelated GPU texture stretching by scaling SVG layout dimensions directly from the graphic's internal viewBox. Vector lines, strokes, and text characters are re-evaluated and drawn with sub-pixel mathematical precision at any zoom level (even 600%–1200%+).
• Silky Smooth Panning: Click-and-drag panning uses hardware-accelerated 2D translations, keeping movement buttery smooth at 60/120 FPS.
• Standards & QA: 100% clean passes on PHPCS (Drupal & DrupalPractice), ESLint, Stylelint, and CSpell.

Updating to 1.0.7

To update an existing installation using Composer:

php -d memory_limit=-1 $(which composer) update drupal/directory2block_slideshow --with-dependencies
drush cr

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 imagick extension: 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

1. Install via Composer:
   

   composer require drupal/directory2block_slideshow
   drush en directory2block_slideshow -y

2. Put your images, SVGs, or PDFs in sites/default/files/my-slides/ (or any public directory).
3. Go to Structure > Block layout (/admin/structure/block) or open Layout Builder.
4. Click Place block, select Directory2Block Slideshow, enter public://my-slides, and save!

Maintainers

• James Rome (jamesrome)