jdz / frontui
Framework-agnostic front UI helpers (asset versioning, lazy/zoom image tags) for simple Slim/Twig sites
README
Framework-agnostic front UI helpers for simple Slim/Twig sites.
The front-end counterpart to jdz/adminUi:
small, dependency-light Twig helpers shared by sites that ship the
jizy-front.js / jizy-front.css bundle without the Callisto framework
runtime — sites that moved to a plain Slim front.
Contents
| Namespace | Class | Role |
|---|---|---|
JDZ\FrontUi\Twig |
FrontUiExtension |
Registers the asset() and jizyImg() Twig functions |
JDZ\FrontUi\Html |
Image |
Builds a native-lazy, picviewer-ready <img> tag |
JDZ\FrontUi\Html |
Helper |
Sanitises / normalises WYSIWYG content for front display (clean(), cleanDom()); cleanBlocks() / cleanLinks() hooks let a framework subclass inject its own transforms |
JDZ\FrontUi\Html |
Attributes |
Parse / merge HTML tag attribute strings |
Scope
Rendering helpers only. This is the framework-free replacement for the
framework's JizyTwigExtension, which is coupled to the Callisto kernel
(Config, Symfony Asset\Package, the GD/Imagine thumbnail pipeline).
asset(file, versionable = true)— root-absolute URL with an optional cache-busting?v=…query.jizyImg(src, alt, zoom = false, width = 0)—<img loading="lazy">with width/height of the file served (jdz/ui ≥ 1.2);zoomadds thedata-zoomattribute the bundledModalizer.picviewerreads to open a gallery layer;width > 0serves an on-demand cached thumbnail (src= thumb,data-src= original for lozad) — the attributes are then the thumb's.
Without a width, a simple front site serves the original asset with native
lazy-loading — thumbnails are opt-in per call.
Usage
use JDZ\FrontUi\Twig\FrontUiExtension; use Slim\Views\Twig; $twig = Twig::create(__DIR__ . '/templates'); $twig->addExtension(new FrontUiExtension( __DIR__ . '/public', // web root, for image dimensions '160', // asset cache-busting version ));
<link rel="stylesheet" href="{{ asset('assets/css/theme.min.css') }}" /> <figure>{{ jizyImg('media/pages/photo.jpg', 'Légende', true) }}</figure>
use JDZ\FrontUi\Html\Helper; $clean = Helper::clean($redactorContent); // tag whitelist + FR typography $tidy = Helper::cleanDom($clean); // strip inline styles + empty nodes
Requirements
PHP >= 8.2, twig/twig ^3.0.