friendsofredaxo / media_srcset

Media-SrcSet implementiert SRCSET-Funktionalität.

media_srcset

Addon das einen neuen Effekt namens SRCSET hinzufügt (basierend auf dem resize-Effekt) und zusätzlich die Angabe eines SRCSET-Attributs ermöglicht.Rewrite URLs von YRewrite werden unterstützt.

Installation

• Release herunterladen und entpacken.
• Ordner umbenennen in media_srcset.
• In den AddOns-Ordner legen: /redaxo/src/addons.

Verwendung

Im Feld SRCSET-Attribut die entsprechenden SRCSET-Angaben einfügen, allerdings statt eines Dateinamens die gewünschte Breite einfügen:

z.B. 400 480w, 800 480w 2x, 700 768w

Die einzelnen SRCSET-Attribute lassen sich dann innerhalb des Templates über den Profilnamen einfügen:

Image-Tag

Eingabe:

<img src="index.php?rex_media_type=ImgTypeName&rex_media_file=ImageFileName"
    srcset="rex_media_type=ImgTypeName" />

oder

echo '<img src="'.rex_media_manager::getUrl('ImgTypeName', 'ImageFileName').'" srcset="rex_media_type=muh" />';

oder

echo rex_media_srcset::getImgTag('ImageFileName', 'ImgTypeName');

Generierte Ausgabe:

<img src="index.php?rex_media_type=ImgTypeName&rex_media_file=ImageFileName"
    srcset="index.php?rex_media_type=ImgTypeName__400&rex_media_file=ImageFileName 480w
            index.php?rex_media_type=ImgTypeName__700&rex_media_file=ImageFileName 768w
            index.php?rex_media_type=ImgTypeName__800&rex_media_file=ImageFileName 960w
    ">

Picture-Tag

Eingabe:

<picture>
    <source media="(min-width: 56.25em)" srcset="rex_media_type=ImgTypeName">
    <source srcset="rex_media_type=ImgTypeName">
    <img src="index.php?rex_media_type=ImgTypeName&rex_media_file=ImageFileName" alt="">
</picture>

oder

echo rex_media_srcset::getPictureTag('ImageFileName', 'ImgTypeName', ['(min-width: 56.25em)' => 'ImgTypeName']);

Generierte Ausgabe:

<picture>
    <source media="(min-width: 56.25em)"
        srcset="index.php?rex_media_type=ImgTypeName__400&rex_media_file=ImageFileName 480w
                index.php?rex_media_type=ImgTypeName__700&rex_media_file=ImageFileName 768w
                index.php?rex_media_type=ImgTypeName__800&rex_media_file=ImageFileName 960w
        ">
    <source
        srcset="index.php?rex_media_type=ImgTypeName__400&rex_media_file=ImageFileName 480w
                index.php?rex_media_type=ImgTypeName__700&rex_media_file=ImageFileName 768w
                index.php?rex_media_type=ImgTypeName__800&rex_media_file=ImageFileName 960w
        ">
    <img src="index.php?rex_media_type=ImgTypeName&rex_media_file=ImageFileName" alt="">
</picture>

srcset.js

Das SRCSET Attribut kann auch als data-srcset Attribut eingebunden werden. Dann lädt der Browser zunächst das Standardbild (im SRC-Attribut). Wird das Script aus

assets/addons/media_srcset/srcset.js

eingebunden, wird beim Laden der Seite sowie nach einem Resize eine Routine ausgeführt, die die Anzeigebreite jedes Elements checkt und ggf. eine neue Datei dazu lädt. So lässt sich im SRCSET Attribute eine Breite nicht abhängig vom Viewport sondern von der tatsächlich angezeigten Breite des Elements nutzen. Bitte beachten, dass das Bild dann als CSS-Eigenschaft

width : 100%;
height: auto;

erhalten muss.

Eingabe:

<script type="text/javascript" src="assets/addons/media_srcset/srcset.js"></script>

<img width="500" src="index.php?rex_media_type=ImgTypeName&rex_media_file=ImageFileName"
    data-srcset="rex_media_type=ImgTypeName">

Ausgabe:

<img src="index.php?rex_media_type=ImgTypeName__700&rex_media_file=ImageFileName"
    data-srcset="index.php?rex_media_type=ImgTypeName__400&rex_media_file=ImageFileName 480w
                 index.php?rex_media_type=ImgTypeName__700&rex_media_file=ImageFileName 768w
                 index.php?rex_media_type=ImgTypeName__800&rex_media_file=ImageFileName 960w
    ">

Eingabe:

<img width="200" … >

Ausgabe:

<img src="index.php?rex_media_type=ImgTypeName__400&rex_media_file=ImageFileName" … >

Eingabe:

<img width="1200" … >

Ausgabe:

<img src="index.php?rex_media_type=ImgTypeName__960&rex_media_file=ImageFileName" … >

Credits

• GitHub page

media_srcset's Issues

Release herunterladen und entpacken.

Aus der Readme

Release herunterladen und entpacken.

https://github.com/FriendsOfREDAXO/media_manager_srcset/releases

Es sind aktuell keine Releases vorhanden.

Trenner "__" haben probleme mit MediaManager

Hi,
scheinbar gibt es Probleme mit den Unterstrichen (Bsp: "__600") ab dem MediaManager 2.5.3 (oder evtl schon früher). Wenn man die Unterstriche gegen "-" austauscht, können die ImageTypes mit derm angewendeten Effekt auch wieder erzeugt bzw. einzeln per URL aufgerufen werden ...

test:
lokal / MAMP
php 7.0.12
rex 5.5.1
FireFox 58.0.2 (MacOSX)

Fehlerhafte Bilder URLs

Bei mir werden die SRCSET Bild URLs falsch generiert. YRewrite ist aktiv.
Es werden die Bilder wie folgt ausgegeben:

<img src="index.php?rex_media_type=tinymce&rex_media_file=logo.png" srcset="/unterordner/images/tinymce__400/index.php?rex_media_type=tinymce&logo.png 480w, /unterordner/images/tinymce__700/index.php?rex_media_type=tinymce&logo.png 768w, /unterordner/images/tinymce__800/index.php?rex_media_type=tinymce&logo.png 960w" />

/unterordner/images/tinymce__400/index.php?rex_media_type=tinymce&logo.png
müsste so aussehen:
/unterordner/mediatypes/tinymce__400/logo.png

Die URLs stimmen so nicht.

Redaxo: 5.5.1 im Unterordner

Fehlermeldungen

Bei mir hagelt es Fehler:

Notice: Undefined offset: 0 in /Applications/MAMP/htdocs/rex5basic4/redaxo/src/addons/media_manager/plugins/srcset/lib/srcset.php on line 192
Warning: Cannot modify header information - headers already sent by (output started at /Applications/MAMP/htdocs/rex5basic4/redaxo/src/core/lib/error_handler.php:118) in /Applications/MAMP/htdocs/rex5basic4/redaxo/src/core/lib/response.php on line 214
Warning: Cannot modify header information - headers already sent by (output started at /Applications/MAMP/htdocs/rex5basic4/redaxo/src/core/lib/error_handler.php:118) in /Applications/MAMP/htdocs/rex5basic4/redaxo/src/core/lib/response.php on line 223
Warning: Cannot modify header information - headers already sent by (output started at /Applications/MAMP/htdocs/rex5basic4/redaxo/src/core/lib/error_handler.php:118) in /Applications/MAMP/htdocs/rex5basic4/redaxo/src/core/lib/response.php on line 311
Warning: Cannot modify header information - headers already sent by (output started at /Applications/MAMP/htdocs/rex5basic4/redaxo/src/core/lib/error_handler.php:118) in /Applications/MAMP/htdocs/rex5basic4/redaxo/src/core/lib/response.php on line 185
Warning: Cannot modify header information - headers already sent by (output started at /Applications/MAMP/htdocs/rex5basic4/redaxo/src/core/lib/error_handler.php:118) in /Applications/MAMP/htdocs/rex5basic4/redaxo/src/core/lib/response.php on line 188

Umstellung von Plugin nach AddOn

Diskussion im Slack: Plugins lassen sich nicht im Installer veröffentlichen, was ein merklicher Nachteil gegenüber AddOns ist. Plugins wurden ursprünglich dafür vorgesehen, dass AddOn-Autor:innen zusätzliche Funktionalität bereitstellen können. Sie sollten also Bestandteil eines AddOns sein, und nicht von extern bereitgestellt werden.

Technisch sind Plugins nahezu baugleich mit AddOns, deshalb kann jedes bestehende Plugin sehr einfach in ein AddOn umgewandelt und im Installer veröffentlicht werden.

not_enlarge wird nicht beachtet

Auch wenns Sinn macht die gewünschte Breite wie notiert auszuliefern, not_enlarge sollte nicht ignoriert werden, wenn es gesetzt ist, da es teilweise bei schlechter Quelldatei durchaus zu JPG Artefaktmatsch kommen kann, wenn zu kleine Bilder überskaliert werden.

Wir sollten die not_enlarge Methoden vom Original resize-effekt übernehmen.

Argument #1 ($width) must be of type int

Hallo wenn im Addon media_srcset das Feld: Standardbreite (media_manager_effect_resize_width) leer bleiben, erfolgt folgender Fehle:

**TypeError:** imagecreatetruecolor(): Argument #1 ($width) must be of type int, string given
**File:** redaxo/src/addons/media_manager/lib/effects/effect_resize.php
**Line:** 57

 "REDAXO 5.13.1, PHP 8.0.12, MariaDB 10.4.22" 
|                     media_manager | 2.12.1     |
|         media_manager_autorewrite | 2.0.1      |
|                      media_srcset | 2.0.4      |
|                         mediapool | 2.11.1     |

Effektname

Ist auch Bild skalieren .. jetzt stehen 2 mal die gleichen Bezeichnungen zur Auswahl

media_manager_autorewrite nutzen

Hi,

bitte wenn möglich (Wunsch kam im Slack für srcset Unterstützung) folgendes machen:

• Addon Unterstützung für https://github.com/FriendsOfREDAXO/media_manager_autorewrite

if(rex_addon::get('media_manager_autorewrite')->isAvailable()) {
    echo mm_auto::rewrite('dateiname.jpg', 'imagetype');
}

Dann würde sich nämlich mein rewriter um die Ausgabe kümmern.

Error: open_basedir restriction

file_exists() [function.file-exists]: open_basedir restriction in effect. File(/) is not within the allowed path(s): (/var/www/vhosts/domain.de/:/tmp/)

ErrorException in rex_effect_srcset

Bekomme plötzlich den hier:

ErrorException (E_ERROR)
Class rex_effect_srcset contains 1 abstract method and must therefore be declared abstract or implement the remaining methods (rex_effect_abstract::execute)
 
Stack frames (1)
0
ErrorException 
…/redaxo/src/addons/media_manager/lib/effects/effect_srcset.php69

Eingabe via /images/mediaType/mediaFile.jpg

Wie müsste man das srcset-Attribut notieren, damit das Plugins den Output korrekt erstellt.

Ist es derzeit überhaupt möglich?

srcset an anderen Stellen einbinden

srcset wäre (als data-srcset) zum Beispiel für Fancybox interessant.
Eine Idee wäre rex_media zu erweitern
rex_media::get($file)->getSrcset(imgType)

Helper Funktion

Ich weiß nicht ob das auch für andere relevant wäre, aber ich mag diesen halb <img/> halb PHP mix nicht so ganz, deswegen habe ich mir eine kleine Funktion gebastelt...
Diese kann dann so z.B. aufgerufen werden:
::getImgTag(REX_MEDIA[1], 'content_image', ['class' => 'lazy img-fluid w-100 h-100 position-absolute object-fit-cover', 'alt' => 'Alt overwrite'])

public static function getImgTag(string $fileName, string $mediaType, array $attributes = null) {
    $srcsets = static::getSrcSetByMediaType($mediaType);
    $srcsetsFlattened = static::flattenSrcSetArray($srcsets);
    $srcset = join(', ', $srcsetsFlattened);
    $srcset = str_replace(['{rex_media_file}','%7Brex_media_file%7D'], $fileName, $srcset);
    $media = \rex_media::get($fileName);
    $mediaSrc = \rex_media_manager::getUrl($mediaType, $fileName);
    $imageSize = getimagesize(\rex_path::addonCache('media_manager', $mediaType.'/'.$fileName));

    if(!$attributes) {
        $attributes = [];
    }

    $attributes['src'] = $mediaSrc;
    $attributes['srcset'] = $srcset;
    $attributes['width'] = $imageSize[0];
    $attributes['height'] = $imageSize[1];

    if(empty($attributes['alt'])) {
        $attributes['alt'] = $media->getValue('title');
    }

    $attributesString = implode(' ', array_map(
        function ($v, $k) {
            return $k.'="'.$v.'"';
        },
        $attributes,
        array_keys($attributes)
    ));

    echo '<img '.$attributesString.'/>';
}

Falls interesse besteht kann ich eien PR öffnen oder jemand übernimmt das einfach.

sizes Attribut

Hat es einen Grund, dass ich kein sizes Attribut im Effekt definieren kann? Oder hat das bloss noch keiner gebraucht? Wenn letzteres, würde ich mir das auf die ToDo Liste setzen.

Falsche Bezeichnung in der Effektauswahl

Der Effekt wird als "Bild skalieren" gelistet

Update Problem

Urls mit mediamanager Methode erzeugen

Siehe : https://redaxo.org/doku/master/media-manager#url

media_srcset/lib/srcset.php

Line 356 in 13705cd

$url = "/media_file/$type/$filename";

/images/ ist deprecated

media_srcset/lib/srcset.php

Line 351 in 13705cd

$url = rtrim(rex_url::frontend(), '/') ."/images/$type/$filename";

<picture> funktioniert nicht

anscheinend gibt es eine falsche ausgabe bei der picture funktion.
Meine Eingabe im Modul:

<picture>
<source media="(min-width: 480w)" srcset="rex_media_type=content">
<source media="(min-width: 550w)" srcset="rex_media_type=content">
<source media="(min-width: 768w)" srcset="rex_media_type=content">
<img src="'.rex_media_manager::getUrl('content', 'REX_MEDIA[1]').'" alt="">
</picture>

Genriert folgende Ausgabe:

<picture>    
<source media="(min-width: 480w)" srcset="/media/content__440/image.png 480w, /media/content__500/image.png 550w, /media/content__700/image.png 768w">
<source media="(min-width: 768w)" srcset="/media/content__440/image.png 480w, /media/content__500/image.png 550w, /media/content__700/image.png 768w">
<img src="index.php?rex_media_type=content&amp;rex_media_file=image.png" alt=""></picture>

sollte es nicht ausgeben:

<picture>    
<source media="(min-width: 480w)" srcset="/media/content__440/image.png 480w">
<source media="(min-width: 768w)" srcset="/media/content__700/image.png 768w">
<img src="index.php?rex_media_type=content&amp;rex_media_file=image.png" alt="">
</picture>

?

Min-php version in package.yml notieren

Undefined index: height

Nach langer Suche hab' ich media_srcset jetzt als Übeltäter identifiziert.
Bei jeder Verwendung von media_srcset bekomme ich bei einem Bildaufruf im Systemlog

| Notice | Undefined index: height | redaxo/src/addons/media_manager/lib/effects/effect_resize.php | 57

Getestet auch in einer frischen Installation ohne Templates oder anderem Zeug. Einfach nur Redaxo mit einem mm-effekt media_srcset. Einstellungen spielen auch keine Rolle.

Zeile 57 im mm ist:

       if ('%' === substr(trim($this->params['height']), -1)) {
            $this->params['height'] = round($h * ((int) rtrim($this->params['height'], '%') / 100));
        }

Es wird scheinbar params['height'] erwartet, aber nirgendwo definiert.