PHPackages micschk/silverstripe-asset\_icons - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. micschk/silverstripe-asset\_icons Abandoned → [restruct/silverstripe-asset\_icons](/?search=restruct%2Fsilverstripe-asset_icons)Silverstripe-vendormodule micschk/silverstripe-asset\_icons ================================= Fix-up assets with filetype icons and better filenames 2.3.1(2mo ago)22091[1 issues](https://github.com/restruct/silverstripe-asset_icons/issues)MITPHP Since Sep 23Pushed 2mo ago2 watchersCompare [ Source](https://github.com/restruct/silverstripe-asset_icons)[ Packagist](https://packagist.org/packages/micschk/silverstripe-asset_icons)[ Docs](https://github.com/restruct/silverstripe-asset_icons/)[ RSS](/packages/micschk-silverstripe-asset-icons/feed)WikiDiscussions main Synced 2mo ago READMEChangelogDependencies (3)Versions (7)Used By (0) SilverStripe Asset Icons ======================== [](#silverstripe-asset-icons) Replaces the default document thumbnails in SilverStripe's Asset Admin with **category-colored SVG icons** and **rendered preview thumbnails**. Works in AssetAdmin (grid & list view, edit panel) and UploadField modals. Handles any file extension automatically. [![](docs/asset-admin-icons.png)](docs/asset-admin-icons.png) Requirements ------------ [](#requirements) - SilverStripe 5 (`silverstripe/asset-admin: ~2.0`) - `restruct/silverstripe-simpler` (provides DOMNodesInserted events) - `restruct/xpdf-static` (bundled PDF renderer, no system dependencies) How it works ------------ [](#how-it-works) ### Category icons [](#category-icons) 1. **CSS** immediately applies category icons using SilverStripe's built-in classes (`gallery-item--document`, `gallery-item--archive`, etc.) — **no flash of default icons** 2. **JavaScript** reads React fiber data and sets `data-ext` attributes for more specific icons (e.g., PDF instead of generic document) 3. **SCSS** maps ~170 file extensions to 18 categories, each with a colored SVG icon 4. **External SVGs** are loaded on-demand and cached by the browser (76KB CSS + ~31KB SVGs) Regular images don't need icons — SilverStripe generates thumbnails for those. This module targets document-category files only. ### Rendered preview thumbnails [](#rendered-preview-thumbnails) For file types that can be rendered to images (PDFs, SVGs, EPS, etc.), the module generates **actual PNG preview thumbnails** instead of showing a generic category icon. Previews appear in tile view, table view, and the edit panel. Previews are generated on-demand the first time a file appears in Asset Admin and stored as file variants in the AssetStore. A small file-type badge (e.g. "PDF") is shown on the thumbnail so users can distinguish previews from actual images. **How it works under the hood:** - `RenderablePreviewExtension` (on `File`) generates PNG variants using CLI renderers (xpdf for PDFs, Ghostscript for EPS/PS/AI, rsvg-convert for SVGs) - `RenderableThumbnailGenerator` overrides the GraphQL-specific `ThumbnailGenerator` service via Injector, so the `thumbnail` field returns the preview URL for non-image files - Since React's `GalleryItem` only applies `backgroundImage` for image-category files, the JS applies the preview as an inline style for non-image files that have a `thumbnail` value **Enable in your project config:** ``` Restruct\SilverStripe\AssetIcons\Renderable\RenderablePreviewExtension: enable_renderable_previews: true ``` **Configuration options:** ``` Restruct\SilverStripe\AssetIcons\Renderable\RenderablePreviewExtension: enable_renderable_previews: true preview_width: 800 # target width for rendered PNG preview_height: 800 # target height for rendered PNG max_renders_per_request: 5 # prevents timeouts on first load renderers: # extension => renderer class pdf: Restruct\SilverStripe\AssetIcons\Renderable\XpdfRenderer eps: Restruct\SilverStripe\AssetIcons\Renderable\GhostscriptRenderer svg: Restruct\SilverStripe\AssetIcons\Renderable\SvgRenderer ``` **Supported formats and their requirements:** FormatRendererRequirementPDFXpdfRendererBundled via `restruct/xpdf-static` — no system depsEPS, PS, AIGhostscriptRendererSystem `gs` (Ghostscript)SVG, SVGZSvgRendererSystem `rsvg-convert` (librsvg)**Using previews in templates:** The rendered preview is available as a `DBFile` on any `File` object, supporting all standard image manipulation methods: ``` $MyPDFFile.RenderedPreview $MyPDFFile.RenderedPreview.ScaleWidth(300) $MyPDFFile.RenderedPreview.FitMax(400, 300) $MyPDFFile.RenderedPreview.ScaleWidth(200) ``` Returns `null` for images (use SilverStripe's native manipulation), unsupported formats, or when previews are disabled. > **Note on preview dimensions:** PDF and EPS renderers are DPI-based (default 150 DPI) and ignore the `preview_width`/`preview_height` config — the base preview is rendered at the document's native page size (e.g. ~1240×1753px for A4). The SVG renderer uses `preview_width`/`preview_height` as bounds. **Known limitations:** - Preview variants are stored as `.png` files (via SilverStripe's ExtRewrite variant naming), supporting full image manipulation. Upgrading from 2.2.x will regenerate previews on first access. - Not tested with protected/draft files (the module assumes staging is removed). Categories ---------- [](#categories) CategoryColorExtensions**pdf**Redpdf**document**Bluedoc, docx, docm, dotx, odt, ott, rtf, txt, md, pages, wpd, wps**spreadsheet**Greenxls, xlsx, xlsm, xltx, ods, ots, csv, tsv, numbers**presentation**Orangeppt, pptx, pptm, potx, odp, otp, key**archive**Goldzip, 7z, rar, tar, gz, tgz, bz2, xz, cab, jar, war, deb, rpm**audio**Purplemp3, wav, aac, flac, ogg, opus, m4a, wma, aiff, aif, mid, midi**video**Magentamp4, avi, mov, mkv, webm, flv, wmv, mpg, mpeg, m4v, 3gp, ogv, vob**code**Tealjs, jsx, ts, tsx, php, py, rb, java, c, cpp, cs, go, rs, swift, sh, bat, ...**markup**Slatehtml, htm, xml, json, yaml, yml, toml, ini, cfg, css, scss, sass, less**vector**Indigoai, eps, svg**image**Cyanpsd, raw, cr2, cr3, nef, dng, tif, tiff, bmp, tga, xcf, indd, sketch**cad**Dark Greendwg, dxf, vsd, vsdx, vdx, vst, skp, blend, 3ds, fbx, obj, stl, step, stp, iges**database**Dark Bluesql, db, sqlite, sqlite3, mdb, accdb, dbf, odb**font**Dark Purplettf, otf, woff, woff2, eot, pfb, pfm**system**Dark Grayexe, dll, bin, iso, dmg, app, msi, sys, apk, ipa**ebook**Brownepub, mobi, azw, azw3, cbz, cbr, djvu**plc**Industriale80, lsc, zap15\_1, awl, gxw, acd, s7p, ap17-20, zap18-20, scl, udt, aml, tia, ...Adding extensions ----------------- [](#adding-extensions) Edit `client/src/styles/asset-icons.scss`: ``` $ext-categories: ( // ... existing entries ... myext: document, // map to existing category ); ``` Then rebuild: `npm run build` Adding categories ----------------- [](#adding-categories) 1. Create an SVG in `client/icons/` (use an existing one as template) 2. Add to `$category-icons` map in the SCSS 3. Map extensions to the new category in `$ext-categories` 4. Rebuild: `npm run build` Build ----- [](#build) ``` cd silverstripe-asset_icons npm install npm run build # production build ``` After building, run `composer vendor-expose` to re-expose client assets. File structure -------------- [](#file-structure) ``` client/ icons/ # 18 category SVG source files icons-source.svg # Master Inkscape file with all icons src/ js/ # Vanilla JS source (React fiber → data-ext + preview) styles/ # SCSS source dist/ icons/ # External SVG files (loaded on-demand, cached) js/ # Copied JS styles/ # Compiled CSS (~77KB) src/ Dev/ # IconsPreviewController (visit /admin/asset-icons-preview) Renderable/ # Rendered preview system RenderablePreviewExtension.php # File extension: generates & stores variants RenderableThumbnailGenerator.php # Injector override for GraphQL thumbnails RendererInterface.php # Contract for CLI renderers XpdfRenderer.php # PDF → PNG (bundled binary) GhostscriptRenderer.php # EPS/PS/AI → PNG (system gs) SvgRenderer.php # SVG → PNG (system rsvg-convert) ``` Credits ------- [](#credits) - Pictograms: [Bootstrap Icons](https://icons.getbootstrap.com/) (MIT) ### Health Score 40 — FairBetter than 88% of packages Maintenance76 Regular maintenance activity Popularity15 Limited adoption so far Community9 Small or concentrated contributor base Maturity51 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~251 days Recently: every ~6 days Total 6 Last Release 70d ago Major Versions 1.0.0 → 2.0.02026-02-06 ### Community Maintainers ![](https://www.gravatar.com/avatar/4d3680d6353e5f171543435b89965ba2588186ad7ec0ec97cbf572704fec2a4f?d=identicon)[micschk](/maintainers/micschk) --- Top Contributors [![micschk](https://avatars.githubusercontent.com/u/1005986?v=4)](https://github.com/micschk "micschk (6 commits)") --- Tags silverstripe ### Embed Badge ![Health badge](/badges/micschk-silverstripe-asset-icons/health.svg) ``` [![Health](https://phpackages.com/badges/micschk-silverstripe-asset-icons/health.svg)](https://phpackages.com/packages/micschk-silverstripe-asset-icons) ``` ### Alternatives [silverstripe/blog A fresh take on blogging in Silverstripe set out to tackle the issue of a cluttered Site Tree. 104739.2k31](/packages/silverstripe-blog)[jonom/focuspoint Smarter automatic image cropping for Silverstripe 108645.6k49](/packages/jonom-focuspoint)[colymba/gridfield-bulk-editing-tools Silverstripe CMS GridField component to upload images/files and edit records in bulk 94677.2k39](/packages/colymba-gridfield-bulk-editing-tools)[silvershop/core Provides an ecommerce product catalog, shopping cart, and order management system 11340.0k42](/packages/silvershop-core)[bummzack/sortablefile An extension for SilverStripe that adds sorting to UploadField. 70622.7k55](/packages/bummzack-sortablefile)[silverstripe/subsites Run multiple sites from a single SilverStripe install. 65392.9k20](/packages/silverstripe-subsites) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)