Vorgaben

Lasst uns das ohne JavaScript lösen. Wir verwenden SVG Masken. Das bringt uns folgende Vorteile:

• Kunde muss die Bilder vorher nicht bearbeiten
• Wir sind dynamisch, wenn später mal andere “Shapes” gewünscht sein werden
• Hintergrund-Farben können flexibel geändert werden
• Im responsive Design können wir verschiedene “Shapes” verwenden

Image als Base64 ins SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="800" viewBox="0 0 1100 800">
  <defs>
    <mask id="mask1">
      <polygon points="0,0 300,100 1100,50 1100,750 300,800 0,700 0,0" fill="#FFFFFF" />
    </mask>
  </defs>
  <image mask="url(#mask1)" href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2ODApLCBxdWFsaXR5ID0gNzUK......" />
</svg>

Drupal Code

function mytheme_preprocess_responsive_image(&$variables) {
  $responsive_image_style = ResponsiveImageStyle::load($variables['responsive_image_style_id']);
  if (!$responsive_image_style) {
    return;
  }
  foreach ($responsive_image_style->getKeyedImageStyleMappings() as $keyedImageStyleMapping) {
    foreach ($keyedImageStyleMapping as $multiplier) {
      if ($multiplier['image_mapping_type'] === 'image_style') {
        if ($image_style = ImageStyle::load($multiplier['image_mapping'])) {
          $derivative_uri = $image_style->buildUri($variables['uri']);
          if (!file_exists($derivative_uri)) {
            $image_style->createDerivative($variables['uri'], $derivative_uri);
          }
        }
      }
    }
  }

  $map = new ThemeResponsiveSvgMaskMapping();
  /** @var \Drupal\Core\Template\Attribute $source */
  foreach ($variables['sources'] as $source) {
    if ($source->hasAttribute('srcset') && $def = $map->getDefinition($source->storage()['media']->value(), $variables['responsive_image_style_id'])) {
      $id = Html::getUniqueId('mask');
      $imagefile = trim(parse_url($source->storage()['srcset']->value(), PHP_URL_PATH), '/');
      if (!file_exists($imagefile)) {
        continue;
      }
      $svgfile = $imagefile . $def['suffix'] . '.svg';
      if (!file_exists($svgfile) || filemtime($svgfile) < filemtime($imagefile)) {
        $image = base64_encode(file_get_contents($imagefile));
        $svg = '<svg xmlns="http://www.w3.org/2000/svg" width="' . $def['width'] . '" height="' . $def['height'] . '" viewBox="0 0 ' . $def['width'] . ' ' . $def['height'] . '">';
        $svg .= '<defs><mask id="' . $id . '"><polygon points="' . $def['mask'] . '" fill="#FFFFFF" /></mask></defs>';
        $svg .= '<image mask="url(#' . $id . ')" href="data:image/jpeg;base64,' . $image . '" />';
        $svg .= '</svg>';
        file_put_contents($svgfile, $svg);
      }
      $source->setAttribute('srcset', '/' . $svgfile);
      $source->setAttribute('type', 'image/svg+xml');
    }
  }
}