Developer 

Overriding templates 

plugin.tx_crgalerie.view {
    templateRootPaths.20 = EXT:my_sitepackage/Resources/Private/Crgalerie/Templates/
    partialRootPaths.20 = EXT:my_sitepackage/Resources/Private/Crgalerie/Partials/
}
Copied!

The template of a gallery is Partials/Galerie/Bilder.html, of the overview Templates/Uebersicht/List.html.

Variables of a gallery: galerie (gallery object), bilder (list with datei, titel, beschreibung, credit), showDescription (0–3), darstellung, anzahlStart, sizes, sizesTitel, cssEinbinden, elementUid, titelEbene (2–6). In the overview: galerien (with titel, erstesBild, anzahlBilder) and kachelstil.

ViewHelpers 

Namespace Conrat\Crgalerie\ViewHelpers.

<crg:bildQuellen datei="{…}" as="quellen">
Provides src, srcset, breite, hoehe, grossUrl, grossBreite, grossHoehe and verhaeltnis. Arguments: breiten (thumbnail widths, default {0: 400, 1: 800, 2: 1200}; src is the middle one) and gross (longest side of the lightbox variant, default 2560; 0 = no own variant).
{crg:zeilenSizes(verhaeltnis: …, zeilenhoehe: 260, zeilenhoeheMobil: 120)}
sizes for one image in the layout "Mosaic in rows" from its aspect ratio and the row heights (pixel values).

Markup contract for own gallery templates 

galerie.js (lightbox and "Show all") and the CSS rely on these hooks – keep them when overriding Bilder.html:

  • <f:render partial="Galerie/Assets" arguments="{cssEinbinden: cssEinbinden}" /> includes CSS, PhotoSwipe and galerie.js (lightbox: 0 omits lightbox CSS and script, as in the overview).
  • data-crg-galerie on the container of a gallery (one lightbox per container).
  • data-crg-text-dialog, -close, -zoom, -previous, -next, -error on the container: translated lightbox texts.
  • .crg__liste with data-crg-anzahl-start="{anzahlStart}", containing one .crg__bild per image.
  • .crg__titel in the container: its text names the lightbox dialog.
  • a.crg__link with href="{quellen.grossUrl}", data-pswp-width and data-pswp-height; data-cropped="true" if the thumbnail is cropped.
  • [data-crg-lightboxtext] (with hidden) in the same .crg__figur – shown as caption in the lightbox.
  • [data-crg-mehr] (with hidden) as the "Show all X photos" button.
  • Images after anzahlStart delivered with hidden, plus the <noscript> stylesheet galerie-noscript.css. Do not use a <style> element: TYPO3's Content Security Policy blocks it.

Development and tests 

composer install
.Build/bin/phpstan analyse -c Build/phpstan.neon
typo3DatabaseDriver=pdo_sqlite .Build/bin/phpunit -c Build/phpunit/FunctionalTests.xml
Copied!

The functional tests need ImageMagick or GraphicsMagick. Contributions are welcome, see CONTRIBUTING.md in the repository.