Image component - original width and height

[lpheller]

This PR adds the opportunity to use the original image width or height. This is e.g. required if an image shouldn't use all of the available space.

It checks whether the html width (or height) attribute is set to "original" and retrieves the corresponding original dimension using the intervention image library. Passing a fixed size is still possible.

<x-lit-image :image="$rep->image" width="original" />

@jannescb I changed the blade view of the image component to use the attribute bag. That way not every single attribute needs a wrapping if statement and it seems more open to further additions. I hope you agree with that?

[cbl]

Moin @lpheller ,
Ich bin mir noch nicht so sicher ob das wirklich so ne geile Lösung ist, also Performance technisch ist das halt schlecht.
Kann man das nicht durch css lösen? Ansonst wäre es besser beim Upload des Bildes die width zu speichern und darauf zurück zu greifen.

Wäre cool wenn du nochmal deine Meinung dazu hier kommentierst und mich markierst!

Thanks!

[lpheller]

Eine Lösung rein über CSS geht mit Lazysizes und dem dem gewünschten Verhalten data-sizes="auto" ist aus meiner Sicht nicht machbar. Zwar könnte es Alternativen dazu geben, wie die Originalgröße angewendet wird, ob nun als width Attribut oder als data-sizes Attribut, in allen Fällen werden aus meiner Sicht jedoch die originalen Bild Dimensionen benötigt wenn man das Bild in Ursprungsgröße ausgeben möchte.
Das Auslesen der Bild Dimensionen selbst ist natürlich beim Upload selbst - also in Litstack - besser aufgehoben und könnte in den Custom Properties mit aufgenommen werden.

Dazu wären wohl die Optionen vermutlich:

• Serverseitig die Größen beim Speichern des Models auslesen. Könnte einfach über die ImageFactory von Spatie ausgelesen werden ohne noch weitere Abhängigkeiten einzubeziehen.

• Noch im / vor dem Upload im Vue.js / Dropzone auslesen und mit dem Request übergeben. Wohl wünschenswert, aber der Upload durch Dropzone muss scheinbar zumindest minimal „verzögert“ werden um die Größen mit übergeben zu können.

Warum Dropzone Verzögerung?

sending(file, xhr, formData) {
  formData.append("fileWidth", file.width); 
  // request gets send immediately when a file is added 
  // but file.width is undefined until dropzone fires its "thumbnail" event
},

Davon ausgehend, dass wir die Bilddimensionen irgendwie zugänglich machen würde ich diesen PR erstmal offen lassen und zu einem späteren Zeitpunkt mit den Änderungen aktualisieren.

@cbl

[cbl]

Ich würde vorschlagen, das man die width in den custom properties speichern kann. In der Image componente würde ich dann prüfen ob die custom_property width existiert und wenn ja wird diese angewendet, ungefähr so:

public function __construct(Media $image, $width = null, ...)
{
    // ...

    if(is_null($width)) {
        $width = $image->custom_properties['width'] ?? 0;
    }
    $this->width = $width;

    // ...
}

Wie genau das speichern der width beim upload funktioniert kann ich mir mal angucken.

[lpheller]

Wie es beim Upload gespeichert werden kann hatte ich für mich schon mal durchgespielt. @cbl
Könnte man z.B. so mit 3 Zeilen lösen:

// Ignite\Crud\Repositories\MediaRepository

protected function storeMediaToModel($request, $model)
{
       // ...
        $dimensions = [
           'width' => ImageFactory::load($request->media->path())->getWidth(),
           'height' => ImageFactory::load($request->media->path())->getHeight(),
        ];

        $customProperties = array_merge($customProperties, $dimensions);

        $media = $model->addMedia($request->media)
            ->preservingOriginal()
            ->withCustomProperties($customProperties)
            ->toMediaCollection($request->collection);
       // ...
}