Verschwommene Bilder im edge-Browser

[derRenner]

Hallo,

ich habe auf einer Entwicklerseite folgendes Verhalten/Problem:
Vorschaubilder werden im edge-Browser verschwommen/unscharf dargestellt. In den anderen Browsern werden diese korrekt scharf dargestellt.
Ich bringe das Verhalten mit 'img {object-fit:cover;}' in Verbindung ... obwohl der edge-Browser in der aktuellen Version ja scheinbar bereits teilweise korrekt verarbeiten müssten können.

Aber ... wenn ich über '.img-fluid{max-width:100%}' das Bild in der Konsole "resete" (also Häkchen raus und wieder rein), wird das Bild definitv scharf dargestellt.
Kennt jemand dieses Verhalten bzw. hat jemand einen workaround dafür parrat? Das '.img-fluid' im eigenen Stylesheet nochmals eintragen und damit eigens laden lassen, hat kein anderes Ergebnis gebracht.

link zur Seite
blurry-img.jpg

[derRenner]

... jemand eine Idee?

[Spooky]

Ist wohl ein Bug im MS EDGE. Warum arbeitest du überhaupt mit object-fit: cover? Lass doch die Bilder von Contao quadratisch beschnitten ausgeben. Der Container ist ja in allen Bildgrößen Quadratisch, soweit ich das sehe.

Davon abgesehen: du lässt ein 1024x576 großes Bild verkleinern auf 181.48x181.48 Pixel. Das solltest du optimieren

[derRenner]

Lass doch die Bilder von Contao quadratisch beschnitten ausgeben

Danke für die Antwort.
Ich arbeite an dieser Stelle mit [rocksolid customelements] und der Kunde muss dort die 5 Bilder nur auswählen » in diesem Falle aus der normalen Galerie, wo auch das Bildmaterial 1024x576px hat.
Wo bzw. wie genau könnte mir Contao hier Bilder quadratisch (ja, das ist korrekt, sind alle quadratisch dargestellt) zuschneiden? Also, ohne dass der Kunde nun neues/anderes Bildmaterial zusätzlich hochladen soll?

<?php

return array(
    'label' => array(
        'Galerie Box',
        'Album Teaser anlegen',
    ),
    'types' => array('content', 'module'),
    'standardFields' => array('cssID', 'headline'),
    'fields' => array(
        'albumTitle' => array(
            'label' => array('Album Titel','Geben Sie den Titel für die Galerie ein'),
            'inputType' => 'text',
            'eval' => array('tl_class' => 'long clr' , 'allowHtml' => true, 'maxlength' => 255, 'mandatory' => true ),
        ),
        'imageTeaser01' => array(
            'label' => array('Vorschaubild 1', 'Bitte wählen Sie eine Datei aus der Dateiübersicht (1 Bild verpflichtend)'),
            'inputType' => 'fileTree',
            'eval' => array(
                'fieldType' => 'radio',
                'filesOnly' => true,
                'extensions' => \Config::get('validImageTypes'),
                'mandatory' => true,
            ),
        ),
        'imageTeaser02' => array(
            'label' => array('Vorschaubild 2', 'Bitte wählen Sie eine Datei aus der Dateiübersicht (optional)'),
            'inputType' => 'fileTree',
            'eval' => array(
                'fieldType' => 'radio',
                'filesOnly' => true,
                'extensions' => \Config::get('validImageTypes'),
            ),
        ),
        'imageTeaser03' => array(
            'label' => array('Vorschaubild 3', 'Bitte wählen Sie eine Datei aus der Dateiübersicht (optional)'),
            'inputType' => 'fileTree',
            'eval' => array(
                'fieldType' => 'radio',
                'filesOnly' => true,
                'extensions' => \Config::get('validImageTypes'),
            ),
        ),        
        'imageTeaser04' => array(
            'label' => array('Vorschaubild 4', 'Bitte wählen Sie eine Datei aus der Dateiübersicht (optional)'),
            'inputType' => 'fileTree',
            'eval' => array(
                'fieldType' => 'radio',
                'filesOnly' => true,
                'extensions' => \Config::get('validImageTypes'),
            ),
        ),        
        'imageTeaser05' => array(
            'label' => array('Vorschaubild 5', 'Bitte wählen Sie eine Datei aus der Dateiübersicht (optional)'),
            'inputType' => 'fileTree',
            'eval' => array(
                'fieldType' => 'radio',
                'filesOnly' => true,
                'extensions' => \Config::get('validImageTypes'),
            ),
        ),        
        'albumLink' => array(
            'label' => array('Link zum Album', 'Beispiele: {{link_url::seitenalias}} (Alias, ID oder anderer Inserttag), http://example.com'),
            'inputType' => 'url',
            'eval' => array('tl_class' => 'w50'),
        ),
        
        'albumColor' => array(
            'label' => array('Album Hintergrundfarbe','Wählen Sie die Hintergrundfarbe aus'),
            'inputType' => 'checkbox',
            'options' => array('lila','anthrazit','rot','blau'),
            'eval' => array('tl_class' => 'long clr', 'multiple' => true ),
        ),
    ),
);

Oder habe ich auch hier im der config-Datei die Möglichkeit die zusätzlichen Möglichkeiten der Bildauswahlen mit einzubauen?
Verbleibt aber dann auch noch die Frage, ob Contao mir das Bildmaterial zusätzlich auch soweit verkleinert, damit der Kunde nicht zusätzliche "thumbs" für die Vorschaubilder hochladen müsste.

[Spooky]

Am besten kommst du zum nächsten Contao Stammtisch in Wien, da stellen wir die RockSolid Custom Elements vor

Aber so kannst du Bilder in RockSolid Custom Elements Templates ausgeben lassen:

<?php if ($image = $this->getImageObject($this->singleSRC, [512,512,'crop'])): ?>
  <?php $this->insert('image', (array)$image); ?>
<?php endif; ?>

In diesem Beispiel wird das Bild dann beschnitten auf 512x512 Pixel ausgegeben. $this->singleSRC ersetzt du in deinem Fall mit $this->imageTeaser01 etc.

[derRenner]

Ah OK - Danke! Den Zusatz mit [crop] kannte ich bisher nicht, oder war mir so nicht bewusst ...
Gibt es hierzu noch etwas genauere weiterführende Infos dazu? Link zu ner Seite oder so?

Ich vermute, dass [512,512,'crop'] nun links oben zu schneiden beginnt.
Mich würde nun interessieren, wie es z.B. von der Mitte heraus funktionieren würde oder von rechts unten etc


Der Termin in Wien ist natürlich notiert ;-) aber ich habe hier noch zu klären, ob ich hierfür einen anderen Fortbildungstermin fallen lasse ...

[Spooky]

Ich vermute, dass [512,512,'crop'] nun links oben zu schneiden beginnt.

Nein, das benutzt den wichtigen Teil. Wenn keiner definiert ist, wird es mittig beschnitten.

Mich würde nun interessieren, wie es z.B. von der Mitte heraus funktionieren würde oder von rechts unten etc

Folgende Optionen gibt es in Contao: https://github.com/contao/contao/blo....php#L353-L363


Anstatt einen String kannst du auch als drittes Array Element eine Image Size ID übergeben. Das würde ich prinzipiell empfehlen. Also statt [512,512,'crop'] währe das dann [null,null,1] bspw.