Anleitung Image Mask Bundle (Contao Modul)

Wir entwickeln Lösungen, die Kreativität mit technischer Präzision verbinden.
Mit unserem Contao-Bundle stellen wir ein RockSolid Custom Element (RSCE) bereit, das es ermöglicht, ein Bild mit einer frei wählbaren SVG-Maske optisch perfekt zu kombinieren. Durch die skalierbare Verknüpfung von Bild und Maske lassen sich moderne, responsive Layouts schnell und unkompliziert umsetzen – ganz ohne manuelle Nacharbeiten. Unser Modul unterstützt sowohl Contao 4.13 als auch die aktuelle Contao-5-Version inklusive Twig-Templates und eignet sich damit ideal für zukunftssichere Projekte.

RSCE-Inhaltselement „Image with Mask | Bild mit Maske“
Perfekt eingebunden ins Contao-Backend.
Auswahl von Bild und SVG-Maske
Gestalterische maximale Flexibilität.
Optionale Kopplung der Maskenskalierung
Maske folgt der Bildgröße – z. B. „100 % Breite, automatische Höhe“.
Flexible Layout-Optionen
Aspect-Ratio, Mindesthöhe und eigene CSS-Klassen.
Automatische Sprachumschaltung (DE/EN)
Ideal für mehrsprachige Websites.
Kompatibel mit Contao 4 und 5
Funktioniert mit HTML5- sowie Twig-Templates.

Contao ImageMask Bundle

🇬🇧 English (below) | 🇩🇪 Deutsch (above)

RSCE-Inhaltselement für Bild-Masken mit SVG

(Compatible with Contao 4.13 and 5.x)

Image	Mask	Result

🇩🇪 Deutsch

Beschreibung

Dieses Bundle stellt ein RockSolid Custom Element (RSCE) bereit,
mit dem du ein Bild mit einer SVG-Maske kombinieren kannst.
Die Maske kann mit dem Bild synchron skaliert werden (z. B. „100 % Breite – automatische Höhe“).
Unterstützt Contao 4.13 und Contao 5.x (Twig-Templates).

Funktionen

RSCE-Inhaltselement „Image with Mask | Bild mit Maske“
Auswahl von Bild und SVG-Maske
Option: Maske an Bildskalierung koppeln
Aspect-Ratio / min-height / Custom CSS-Klassen
Automatische Sprachumschaltung (DE/EN)
Kompatibel mit Contao 4 und 5 (Twig & HTML5)

Optional CSS

.ce_imagemask .ce-imagemask__inner {
  width: 100%;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
}

Logging

Logging aktivieren: config/packages/monolog.yaml
Logging-Kanal: imagemask
Logging-Level: debug
Logging-Datei: var/logs/imagemask.log

#contao 5 
$logger = \System::getContainer()->get('monolog.logger.imagemask');
$logger->debug('Debug info', ['data' => $myVar]);

#contao 4
\System::log('My debug message', __METHOD__, TL_GENERAL);

⚙️ Installation

composer require swoopDe/contao-imagemask-bundle

🇬🇧 English

🧩 Description

This bundle provides a RockSolid Custom Element (RSCE) to combine an image with an SVG mask. The mask can be synchronized with the image scaling (e.g. “100% width — automatic height”). Supports Contao 4.13 and Contao 5.x (Twig templates).

Features
RSCE content element “Image Mask”
Select image and SVG mask
Option: sync mask scale/position with the image
Aspect ratio / min-height / custom CSS classes
Automatic language switching (DE/EN)
Works with Contao 4 and 5 (Twig & HTML5)

Optional CSS

.ce_imagemask .ce-imagemask__inner {
  width: 100%;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
}

⚙️ Installation

composer require swoopDe/contao-imagemask-bundle

📝 License

MIT License — (c) Andreas Schreck / swoop.de

🧡 Credits

Developed with love for the Contao community. Tested with Contao 4.13 LTS and 5.6.

250K+ Codezeilen

{
  "type": "module",
  "scripts": {
    "js": "bun run _scripts/js.mjs",
    "scss:prod": "sass files_resources/scss/app.scss --style=compressed | postcss --config postcss.config.cjs -o files/assets/css/app.min.css",
    "scss": "sass files_resources/scss/app.scss files/assets/css/app.min.css --style=compressed --source-map",
    "scss:be": "sass files_resources/scss/be.contao.scss assets/css/be.contao.css --style=compressed --source-map",
    "scss:be:prod": "sass files_resources/scss/be.contao.scss --style=compressed | postcss --config postcss.config.cjs -o assets/css/be.contao.css",
    "postcss": "postcss files/assets/css/app.min.css --use autoprefixer cssnano postcss-import @tailwindcss/postcss -o files/assets/css/app.min.css",
    "svg:copy": "cpy 'files_resources/svg/**/*.{svg,SVG}' '!files_resources/svg/brands/**/*.{svg,SVG}' '!files_resources/svg/technique/**/*.{svg,SVG}' files/assets/svg",
    "svg:modify": "bun run _scripts/modify-svg.mjs",
    "img:copy": "cpy 'files_resources/img/**/*.{png,jpg,jpeg,gif,ico}' files/assets/img",
    "fonts:copy": "cpy 'files_resources/fonts/**/*' 'node_modules/@fortawesome/fontawesome-free/webfonts/*' files/assets/fonts",
    "build": "bun run js && bun run scss && bun run postcss && bun run svg:copy && bun run svg:modify && bun run img:copy && bun run fonts:copy && bun run scss:be",
    "watch": "chokidar 'files_resources/**/*.{scss,js}' -c 'bun run build'"
  }
 }

# This job runs in the deploy stage.
deploy-job:
  image: $IMAGE_DEPLOY_ONLY
  stage: deploy  # It only runs when *both* jobs in the test stage complete successfully.
  environment:
    name: production
  only:
    - main  # nur in main branch ausführen!
  #  variables:
  #    GIT_STRATEGY: none  # Git-Checkout für diese Stage verhindern, [none,fetch,clone]
  before_script:
    - mkdir -p ~/.ssh
    - echo $SSH_PRIVATE_KEY_AS_BASE_64 | base64 -d > ~/.ssh/$FILENAME_SSH
    - chmod 600 ~/.ssh/$FILENAME_SSH
    - eval $(ssh-agent -s)
    - ssh-add ~/.ssh/$FILENAME_SSH
    # Erstelle die SSH Konfigurationsdatei
    #ServerAliveInterval 60\n  ServerAliveCountMax 2\n  ExitOnForwardFailure yes
    #ServerAliveInterval 60 → Sendet jede 60 Sekunden ein Keep-Alive-Signal.
    #ServerAliveCountMax 2 → Trennt die Verbindung, wenn 2 Keep-Alive-Signale ausbleiben.
    #ExitOnForwardFailure yes → Verhindert das Offenlassen von hängenden SSH-Verbindungen.
    - echo -e "Host $SSH_CONFIG_HOST\nHostName $SSH_CONFIG_HOSTNAME\nUser $SSH_CONFIG_USER\nPort $SSH_CONFIG_PORT\nIdentityFile ~/.ssh/$FILENAME_SSH\nIdentitiesOnly yes\nStrictHostKeyChecking no\nServerAliveInterval 60\nServerAliveCountMax 2\nExitOnForwardFailure yes" > ~/.ssh/config
    - chmod 644 ~/.ssh/config
    # Verhindert SSH-Warnungen
    - echo $SSH_CONFIG_HOSTNAME  $SSH_CONFIG_HOST >> /etc/hosts
    - cat /etc/hosts
    - echo $SSH_CONFIG_HOST
    - ssh-keyscan  $SSH_CONFIG_HOST > ~/.ssh/known_hosts
    - chmod 644 ~/.ssh/known_hosts
    - cat ~/.ssh/known_hosts
    #Erstelle unter _dep/from_gitlab_to_live eine neue .deploy.env Datei
    - echo "PHP_VERSION=$PHP_VERSION" > ./_dep/from_gitlab_to_live/.deploy.env
    - echo "PHP_CMD=/usr/bin/php$PHP_VERSION" >> ./_dep/from_gitlab_to_live/.deploy.env
    # Achtung WEB_PATH_LOCAL wird zusammengesetzt
    - echo "WEB_PATH_LOCAL=/builds/$CI_PROJECT_PATH/" >> ./_dep/from_gitlab_to_live/.deploy.env
    - echo "WEB_PATH_REMOTE=$DEPLOYER_WEB_PATH_REMOTE" >> ./_dep/from_gitlab_to_live/.deploy.env
    - echo "CHOWN_USER=$DEPLOYER_CHOWN_USER" >> ./_dep/from_gitlab_to_live/.deploy.env
    - echo "CHOWN_GROUP=$DEPLOYER_CHOWN_GROUP" >> ./_dep/from_gitlab_to_live/.deploy.env
    - echo "HOST_SSH_CONFIG=$SSH_CONFIG_HOST" >> ./_dep/from_gitlab_to_live/.deploy.env
    - echo "RSYNC_FILTER_FILE=$DEPLOYER_RSYNC_FILTER_FILE" >> ./_dep/from_gitlab_to_live/.deploy.env
    - echo "RSYNC_FILTER_FOR_BUILD_FILE=$DEPLOYER_RSYNC_FILTER_FOR_BUILD_FILE" >> ./_dep/from_gitlab_to_live/.deploy.env

const parseColor = (color) => {
    const normalized = color.trim().toLowerCase();

    if (normalized === 'white') {
        return { r: 255, g: 255, b: 255 };
    }

    const hex3 = /^#([0-9a-f]{3})$/i.exec(normalized);
    if (hex3) {
        const r = parseInt(hex3[1][0] + hex3[1][0], 16);
        const g = parseInt(hex3[1][1] + hex3[1][1], 16);
        const b = parseInt(hex3[1][2] + hex3[1][2], 16);
        return { r, g, b };
    }

    const hex6 = /^#([0-9a-f]{6})$/i.exec(normalized);
    if (hex6) {
        const r = parseInt(hex6[1].substring(0, 2), 16);
        const g = parseInt(hex6[1].substring(2, 4), 16);
        const b = parseInt(hex6[1].substring(4, 6), 16);
        return { r, g, b };
    }

    const rgbMatch = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/.exec(normalized);
    if (rgbMatch) {
        return {
            r: parseInt(rgbMatch[1], 10),
            g: parseInt(rgbMatch[2], 10),
            b: parseInt(rgbMatch[3], 10)
        };
    }

    const rgbaMatch = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d*\.?\d+)\s*\)$/.exec(normalized);
    if (rgbaMatch && parseFloat(rgbaMatch[4]) >= 1) {
        return {
            r: parseInt(rgbaMatch[1], 10),
            g: parseInt(rgbaMatch[2], 10),
            b: parseInt(rgbaMatch[3], 10)
        };
    }

    return null;
};