Bildgrößen Produktleser

[Gerald383]

Hallo ich verwende Contao 4.13 und die Isotope Version 2.8.
Ich habe in den Shopkonfigurationen unterschiedliche Galerien erstellt.

Mein Problem: Es wird mir beim "Produktleser" immer ein riesengroßes Bild angezeigt. Wenn ich die Pixel in der Galerie (Shopkonfiguration) verkleinere, dann bleibt das Bild gleich groß, jedoch ist es dann völlig verpixelt.
Was muss ich wo umstellen, damit das Bild tatsächlich kleiner dargestellt wird? (Die Bilder werden direkt beim Produkt hochgeladen).

Aja, es läuft auch noch das Premium Contao Theme auf dieser Website. Vielleicht hängt es ja damit zusammen.
Die Webseite läuft derzeit unter: https://web.erfolgbeginntimkopf.at/shop.html (ist noch im Aufbau!)

Also es geht mir um die Darstellung auf der "Detailseite" der Produkte.

Vielen Dank!

[Spooky]

Dass das Bild aufgeblasen wird, ist im CSS so definiert und hat nichts mit der eingestellten Bildgröße zu tun.

[Gerald383]

Ok, danke.
Kann ich noch einen Tipp haben wo ich das im CSS finde?
Hätte im CSS mal das "image_container img" angepasst. Leider ändern sich dadurch auch Bilder auf anderen Unterseiten (was ich nicht will).
Das heißt ja ich müsste den Bildern auf dieser Seite ein eigenes Tag zuweisen, damit ich das dann im CSS ansprechen kann.

Dabei stehe ich mit meinem Wissen leider an wo ich das einstellen kann.

[mlweb]

Entweder Du vergibst für diese Elemente tatsächlich eine Klasse oder Du sprichst sie z. B. mit

.mod_iso_productreader img an. Also z.B.

.mod_iso_productreader img {
    max-width: 300px;
}

Eventuell benötigst Du auch .mod_iso_productreader .image_container img (Stichwort Spezifität). Das habe ich jetzt nicht bis zu Ende ausgetestet.

[Gerald383]

Danke mal für die Unterstützung.
Jetzt habe ich noch das Problem mit Responsive Design.
Leider haben die Produkte unterschiedlich lange Texte (Titel, Teaser, etc.)
Dadurch habe ich einen unschönen Umbruch auf dem Smartphone.

Möglichkeit 1: ich würde gerne die Zeilenhöhe fix definieren (Titel sind immer 3 Zeilen / Teaser sind immer 4 Zeilen)

Möglichkeit 2: ab einer gewissen Spaltenbreite sollen die Produkte fix nur mehr 1-Spaltig angezeigt werden.

Bin leider zu wenig geübt im CSS bzw. im Contao um genau zu wissen wo ich das einstellen kann (und wie der Code dazu aussieht).
Es geht um die Produktliste von Isotope.
Und um die Seite: https://www.erfolgbeginntimkopf.at/shop.html

Bin für eine Anfängererklärung sehr dankbar.

[mlweb]

Das würde ich wohl mit CSS-Grid realisieren.
Ich würde der Produktliste display: grid zuweisen und dann das Grid entsprechen gestalten (Stichwort: auto-fit oder ggf. auto-fill). Zusätzlich müssen bei den Einzelelementen die Floats und die Breiten entfernt werden. Danach wird sicher noch etwas Justage für die Abstände und das innere Layout der einzelnen Produktboxen erforderlich sein.

[Gerald383]

ok, danke, weißt du auch in welcher CSS Datei ich das genau machen muss?
Oder muss ich das im Template selbst einstellen?

[mlweb]

Normalerweise hast Du ja Dein eigenes CSS in einer Extra-Datei, welche als letzte geladen werden kann. Damit solltest Du anderes CSS überschreiben können (aus dem Core, aus der Erweiterung, CSS aus einem verwendeten Theme ...).

[Gerald383]

Danke für die Unterstützung!
Damit konnte ich das Problem nun lösen. Super Forum hier!