Photo album for CMSimple_XH

The includephp plugin allows CMSimple_XH users to safely include and execute PHP files directly in page content. It is designed for static includes only, executing PHP files placed in a controlled directory plugins/includephp/php/ and inserting their output into the CMS page.

Autobus nr. 57 van het G.E.B.R.U. als lijn 2, op het kruispunt Jan van Scorelstraat en Adriaen van Ostadelaan te UtrechtAutobus nr. 57 van het G.E.B.R.U. als lijn 2, op het kruispunt Jan van Scorelstraat en Adriaen van Ostadelaan te Utrecht
Bestelauto van de Zuid Hollandsche Bierbrouwerij, afd. De Krans (Muntkade 12) te Utrecht, met 2e bierknecht J.H. OttBestelauto van de Zuid Hollandsche Bierbrouwerij, afd. De Krans (Muntkade 12) te Utrecht, met 2e bierknecht J.H. Ott
De in aanbouw zijnde St. Aloysiuskerk (Adriaen van Ostadelaan 2) te Utrecht, met rechts de pastorie (Adriaen van Ostadelaan 4) ca 1923De in aanbouw zijnde St. Aloysiuskerk (Adriaen van Ostadelaan 2) te Utrecht, met rechts de pastorie (Adriaen van Ostadelaan 4) ca 1923
Gezicht op de bierbrouwerij De Krans (Croeselaan 1) te Utrecht.Gezicht op de bierbrouwerij De Krans (Croeselaan 1) te Utrecht.
Gezicht op het Stadhuis 1890Gezicht op het Stadhuis 1890
Groepsportret tijdens een feestelijke gebeurtenis bij bierbrouwerij De Krans (Croeselaan 1) te UtrechtGroepsportret tijdens een feestelijke gebeurtenis bij bierbrouwerij De Krans (Croeselaan 1) te Utrecht
Hendrick de Keijserstraat te Utrecht vanaf de kruising met de Jan van Scorelstraat links het huis Jan van Scorelstraat 51Hendrick de Keijserstraat te Utrecht vanaf de kruising met de Jan van Scorelstraat links het huis Jan van Scorelstraat 51
Jan van Scorelstraat te Utrecht uit het zuidoosten ca 1935Jan van Scorelstraat te Utrecht uit het zuidoosten ca 1935
Jan van Scorelstraat te Utrecht uit het zuidwesten vanaf de HobbemastraatJan van Scorelstraat te Utrecht uit het zuidwesten vanaf de Hobbemastraat
Jan van Scorelstraat te Utrecht uit het zuidwesten vanaf de Pieter Saenredamstraat met het St. Antoniusziekenhuis ca 1920Jan van Scorelstraat te Utrecht uit het zuidwesten vanaf de Pieter Saenredamstraat met het St. Antoniusziekenhuis ca 1920
Jan van Scorelstraat te Utrecht, vanaf de Adriaen van Ostadelaan ca 1925Jan van Scorelstraat te Utrecht, vanaf de Adriaen van Ostadelaan ca 1925
Onderpui met luifel van het pand Vismarkt 4 (Vishandel Wed. A. de Voest) te Utrecht, met enkele vishandelaren.Onderpui met luifel van het pand Vismarkt 4 (Vishandel Wed. A. de Voest) te Utrecht, met enkele vishandelaren.
Oudegracht te Utrecht met op de achtergrond de GaardbrugOudegracht te Utrecht met op de achtergrond de Gaardbrug
Oudegracht te Utrecht, met in het midden de Viebrug en links het Hotel De Duitsche Adelaar (Oudegracht Weerdzijde 86)Oudegracht te Utrecht, met in het midden de Viebrug en links het Hotel De Duitsche Adelaar (Oudegracht Weerdzijde 86)
Pieter Breughelstraat te Utrecht, vanaf de hoek met de Jan van Scorelstraat. Op de achtergrond de St. Aloysiuskerk Pieter Breughelstraat te Utrecht, vanaf de hoek met de Jan van Scorelstraat. Op de achtergrond de St. Aloysiuskerk
Voorgevel van Café De Kroon (Jan van Scorelstraat 77) te Utrecht; op de achtergrond de St. Aloysiuskerk (Adriaen van Ostadelaan 2)Voorgevel van Café De Kroon (Jan van Scorelstraat 77) te Utrecht; op de achtergrond de St. Aloysiuskerk (Adriaen van Ostadelaan 2)
Voorgevels van de huizen Jan van Scorelstraat 33 (links) lager te UtrechtVoorgevels van de huizen Jan van Scorelstraat 33 (links) lager te Utrecht
Winkelpui van Winkel no. 21 van de Lubro Brood en Banketbakkerijen (Jan van Scorelstraat 30) te UtrechtWinkelpui van Winkel no. 21 van de Lubro Brood en Banketbakkerijen (Jan van Scorelstraat 30) te Utrecht
YouTube Playlist EditorYouTube Playlist Editor

Description

This embedable PHP photo album is a fully self-contained, responsive gallery with the following features:

  • Automatic thumbnails: Scans all images in /userfiles/images/, supports PNG, GIF, JPEG, WEBP, and preserves transparent backgrounds. Thumbnails are generated in /userfiles/thumbnails/.
  • Clean filenames: Displayed below thumbnails, extensions removed, underscores and dashes replaced by spaces, original capitalization preserved.
  • Lightbox: Click a thumbnail to enlarge, with the title below the image. Navigate using arrow keys (← →) and close with Esc or the × button.
  • Fade-in/fade-out animation: Smooth opening and closing of the lightbox.
  • Responsive layout: Auto-adjusts to screen size. Grid layout for thumbnails. Container auto-height prevents scrollbars or extra whitespace.
  • Mobile swipe support: Swipe left/right on touch devices to navigate images.
  • Single-file embedable: All CSS, JS, and PHP in one file (photoalbum.php). Namespaced container #photo-album-container prevents conflicts with CMSimple_XH templates.

Setup

  • Upload your images to /userfiles/images/
  • Make sure /userfiles/thumbnails/ is writable (chmod 0777 if necessary)
  • Upload photoalbum.php to a PHP-enabled folder, e.g., /safephp/

Usage in CMSimple_XH

Inline include (recommended)

Place this where you want the photo album to appear:

{{{includephp('photoalbum.php')}}}

This executes the PHP file and embeds the gallery directly in your page. All CSS and JS are included, so the lightbox, swipe, and responsive layout work automatically.

Optional: iframe include

<iframe src="/plugins/includephp/php/photoalbum.php" 
style="width:100%;height:600px;border:none;"></iframe>

Use this if you want the album isolated from other page styles. Note: the iframe height is fixed unless you add dynamic resizing JavaScript.

Extra Tips

  • Adding new images: Upload to /userfiles/images/ and reload the page; thumbnails will be generated automatically.
  • Regenerating thumbnails: Delete all files in /userfiles/thumbnails/ and reload the page.
  • Adjusting thumbnail size: Edit createThumbnail($srcPath,$thumbPath,$maxWidth=400,$maxHeight=300) in photoalbum.php.

Summary

With a single include, you have a fully functional, responsive, swipeable, transparent photo album embedded in CMSimple_XH.

Keyword list: CMSimple_XH, CMS plugin, IncludePHP, Photo album for CMSimple_XH, album shortcode, image gallery, image slideshow, lightbox gallery, photo album plugin, photo gallery