Merge pull request #33 from FriendsOfREDAXO/patch-cukabeka-sizes-alpha

lgtm, ungetestet Patch cukabeka sizes alpha
FriendsOfREDAXO · Aug 9, 2024 · f581bb9 · f581bb9
2 parents ec814c2 + 65481af
commit f581bb9
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -8,6 +8,61 @@ Addon das einen neuen Effekt namens SRCSET hinzufügt (basierend auf dem resize-
 * Ordner umbenennen in `media_srcset`.
 * In den AddOns-Ordner legen: `/redaxo/src/addons`.
 
+## Hintergrund und Funktionsweise
+
+### Erklärung der `srcset`-Attribute für optimale Bilddarstellung
+
+Wenn du Bilder auf deiner Website einfügst und sicherstellen möchtest, dass sie sowohl auf Desktop- als auch auf Mobilgeräten optimal angezeigt werden, ohne tausende neue MediaManager-Typen anzulegen, kannst du mit diesem Addon automatisiert die `srcset`- und `sizes`-Attribute in HTML verwenden. 
+
+#### Beispiel für einen `srcset`-Eingabe-String im Addon:
+
+```
+470 470w, 940 470w 2x, 1410 470w 3x
+```
+Dieser String wird im MM-Typ angegeben. 
+
+### Was bedeutet dieser `srcset`-String?
+
+1. **470 470w**
+   - **470**: Die Breite des Bildes in Pixeln (470px).
+   - **470w**: Diese Größe ist für Bildschirme mit normaler (1x) Auflösung gedacht. Das Bild wird in 470px Breite angezeigt.
+
+2. **940 470w 2x**
+   - **940**: Die Breite des Bildes in Pixeln (940px), das für Bildschirme mit doppelter (2x) Auflösung gedacht ist.
+   - **470w**: Das Bild wird im Layout 470px breit angezeigt, aber für hochauflösende (Retina) Displays verwendet.
+
+3. **1410 470w 3x**
+   - **1410**: Die Breite des Bildes in Pixeln (1410px), das für Bildschirme mit dreifacher (3x) Auflösung gedacht ist.
+   - **470w**: Das Bild wird im Layout 470px breit angezeigt, aber für hochauflösende Displays verwendet.
+
+### Welche Auswirkungen hat das?
+
+1. **Desktop-Bildschirme:**
+   - **Normale Displays (1x)**: Das Bild wird in seiner Basisgröße von 470px angezeigt.
+   - **Retina Displays (2x)**: Der Browser verwendet das Bild mit 940px Breite, aber zeigt es auf dem Bildschirm in 470px Breite an. Dies sorgt für eine schärfere Darstellung auf hochauflösenden Displays.
+   - **Displays mit 3x-Auflösung**: Der Browser verwendet das Bild mit 1410px Breite, aber zeigt es auf dem Bildschirm in 470px Breite an, um maximale Klarheit auf sehr hochauflösenden Displays zu gewährleisten.
+
+2. **Mobile Geräte:**
+   - Die gleiche Logik wie auf Desktops wird angewendet. Der Browser wählt das am besten passende Bild basierend auf der Bildschirmauflösung aus, um sicherzustellen, dass das Bild klar und scharf aussieht, egal wie groß oder klein der Bildschirm ist.
+
+### Einfluss auf das `sizes`-Attribut
+
+Das `sizes`-Attribut gibt an, wie groß das Bild in verschiedenen Layouts angezeigt wird. Hier ein einfaches Beispiel:
+
+```html
+<img src="/path/to/default.jpg" 
+     srcset="/path/to/image-470.jpg 470w, 
+             /path/to/image-940.jpg 940w 2x, 
+             /path/to/image-1410.jpg 1410w 3x" 
+     sizes="(max-width: 600px) 100vw, 470px" 
+     alt="Beispielbild">
+```
+
+- **`(max-width: 600px) 100vw`**: Wenn der Bildschirm maximal 600px breit ist (z.B. auf Mobilgeräten), wird das Bild die volle Breite des Bildschirms einnehmen (100vw).
+- **`470px`**: Für größere Bildschirme wird das Bild auf 470px Breite angezeigt.
+
+Mit den richtigen `srcset`- und `sizes`-Attributen sorgt das Addon automatisch dafür, dass deine Bilder auf allen Geräten und Auflösungen scharf ausgespielt wird. Der `srcset`-String gibt dem Browser verschiedene Bildgrößen zur Auswahl, abhängig von der Bildschirmauflösung und Größe. Das `sizes`-Attribut hilft dem Browser zu entscheiden, welche Bildgröße am besten für die aktuelle Anzeige geeignet ist, basierend auf festen Pixelwerten.
+
 ## Verwendung
 
 Im Feld SRCSET-Attribut die entsprechenden SRCSET-Angaben einfügen, allerdings statt eines Dateinamens die

diff --git a/lib/srcset.php b/lib/srcset.php
@@ -466,66 +466,80 @@ public static function getSrcSet(string $fileName, string $mediaType): string
      * @return string
      */
     public static function getTag(string $fileName, string $mediaType, array $attributes = null, int $tagType = self::IMG, array $additionalSources = null): string
-    {
-        $srcset = self::getSrcSet($fileName, $mediaType);
-        $media = \rex_media::get($fileName);
-        $mediaPath = \rex_path::addonCache('media_manager', $mediaType . '/' . $fileName);
+{
+    $srcset = self::getSrcSet($fileName, $mediaType);
+    $media = \rex_media::get($fileName);
+    $mediaPath = \rex_path::addonCache('media_manager', $mediaType . '/' . $fileName);
 
-        // generate managed media object/media cache if not available
-        if (!file_exists($mediaPath)) {
-            \rex_media_manager::create($mediaType, $fileName);
-        }
+    // generate managed media object/media cache if not available
+    if (!file_exists($mediaPath)) {
+        \rex_media_manager::create($mediaType, $fileName);
+    }
 
-        $mediaSrc = \rex_media_manager::getUrl($mediaType, $fileName);
-        $imageSize = getimagesize(\rex_path::addonCache('media_manager', $mediaType . '/' . $fileName));
+    $mediaSrc = \rex_media_manager::getUrl($mediaType, $fileName);
+    $imageSize = getimagesize(\rex_path::addonCache('media_manager', $mediaType . '/' . $fileName));
 
-        if (!$attributes) {
-            $attributes = [];
-        }
+    if (!$attributes) {
+        $attributes = [];
+    }
 
-        $attributes['src'] = $mediaSrc;
-        $attributes['srcset'] = $srcset;
-        $attributes['width'] = $imageSize[0];
-        $attributes['height'] = $imageSize[1];
+    $attributes['src'] = $mediaSrc;
+    $attributes['srcset'] = $srcset;
+    $attributes['width'] = $imageSize[0];
+    $attributes['height'] = $imageSize[1];
 
-        if (empty($attributes['alt'])) {
-            $attributes['alt'] = $media->getValue('title');
-        }
+    if (empty($attributes['alt'])) {
+        $attributes['alt'] = $media->getValue('title');
+    }
 
-        if ($tagType === self::PICTURE) {
-            unset($attributes['srcset']);
+    // Extract sizes from srcset
+    $sizes = [];
+    preg_match_all('/(\d+)w/', $srcset, $matches);
+    if (!empty($matches[1])) {
+        foreach ($matches[1] as $size) {
+            $sizes[] = "(max-width: {$size}px) {$size}px";
         }
+    }
+
+    // Add sizes attribute if not already set
+    if (!isset($attributes['sizes'])) {
+        // Set sizes attribute dynamically based on the extracted sizes
+        $attributes['sizes'] = implode(', ', $sizes) . ', ' . $attributes['width'] . 'px';
+    }
 
-        $attributesString = implode(' ', array_map(
-            static function ($value, $key) {
-                return $key . '="' . $value . '"';
-            },
-            $attributes,
-            array_keys($attributes)
-        ));
-
-        switch ($tagType) {
-            case self::IMG:
-                return '<img ' . $attributesString . '/>';
-            case self::PICTURE:
-                $output = '<picture>';
-
-                if($additionalSources)
+    if ($tagType === self::PICTURE) {
+        unset($attributes['srcset']);
+    }
+
+    $attributesString = implode(' ', array_map(
+        static function ($value, $key) {
+            return $key . '="' . $value . '"';
+        },
+        $attributes,
+        array_keys($attributes)
+    ));
+
+    switch ($tagType) {
+        case self::IMG:
+            return '<img ' . $attributesString . '/>';
+        case self::PICTURE:
+            $output = '<picture>';
+
+            if($additionalSources)
+            {
+                foreach ($additionalSources as $additionalSource)
                 {
-                    foreach ($additionalSources as $additionalSource)
-                    {
-                        $output .= $additionalSource;
-                    }
+                    $output .= $additionalSource;
                 }
+            }
 
-                $output .= '<source srcset="' . $srcset . '" type="' . $media->getType() . '">';
-                $output .= '<img ' . $attributesString . '/>';
-                $output .= '</picture>';
+            $output .= '<source srcset="' . $srcset . '" type="' . $media->getType() . '">';
+            $output .= '<img ' . $attributesString . '/>';
+            $output .= '</picture>';
 
-                return $output;
-        }
+            return $output;
     }
-
+}
     /**
      * helper to get an img-Tag
      * @param string $fileName
@@ -563,4 +577,3 @@ public static function getPictureTag(string $fileName, string $mediaType, array
         return self::getTag($fileName, $mediaType, $attributes, self::PICTURE, $additionalSources);
     }
 }
-