Galerie: Hoch und Querformat Bilder zentriert in gleicher Größe (bxh) darstellen?

[macbee]

Hi,

ich habe leider ein kleines CSS Problem..Galerie!

Man kann im BE zwar die Pixelanzahl angeben, was sich aber dann beim responsiven Layout nicht förderlich auswirkt.

Ich habe nun wie folgt gemacht: Bilder im BE keine größen angegeben, 3 Bilder nebeneinander mit "width: 33,3%". Nur wie "beschneide" ich die Höhe in CSS ohne eine fixe px Anweisung zu geben? Sie sollten halt alle optisch gleich hich sein, ohne dass man weiße Blitzer sieht.

Es geht halt darum, dass alle Bilder unterschiedlich breit und hoch sind (zB. quer und hochformat). Es ist nicht tragisch wenn etwas abgeschnitten ist, sehr wohl aber wenn sie verzerrt wären

Die noch rudimentäre Seite könnt ihr hier sehen -> Klick mich

Da seht ihr, dass das erste Bild nun mal "länger" ist... oder die anderen halt zu kurz :-)
Danke Euch

[Spooky]

Du solltest die Bilder vorher quadratisch ausschneiden lassen. Gib einfach die selbe Breite und Höhe bei der Bildgröße an und einen Passenden Modus (am besten Wichtiger Teil).

[macbee]

Hey und danke.

Meinst Du ausserhalb vom System? Das wird der Kunde nicht schaffen, da kein Photoshop. Oder gibts da nen Trick :-)

[Kahmoon]

Nein, er meint im Modul/Inhaltselement das die Bilder ausgibt. Ein Redakteur sollte da nicht rumwurschteln, so eine Einstellung macht man einmalig.

Und es muss in der Dateiverwaltung immer ein "wichtiger Teil" gewählt werden. Den kann man ganz einfach mit der Maus aufziehen/wählen. Das kann auch der Redakteur wenn er ein neues Bild hochlädt.

[Spooky]

Wenn kein wichtiger Teil ausgewählt wurde, ist es dasselbe wie Mitte | Mitte - kann mal also selektiv machen wo es wichtig ist.

[macbee]

Hey.
Aber wenn ich da zB. 250px breite und 150px Höhe angebe, dann habe ich ja nun wieder das Problem, dass sich die Bilder dann wieder nicht dynamisch von der Breite her anpassen.

Also wunsch wäre, dass in der Desktop Ansicht zB. 4 Nebeneinander, in der 767px Ansicht nur noch 2 und in der 320px Ansicht nur noch eines pro "Spalte" aufscheinen.

Entweder sthe ich nun komplett neben mir oder ich habe einen Denkfehler...

[Spooky]

Hey.
Aber wenn ich da zB. 250px breite und 150px Höhe angebe

Du willst ja quadatische Bilder, also 250px x 250px bspw., oder nicht?

dann habe ich ja nun wieder das Problem, dass sich die Bilder dann wieder nicht dynamisch von der Breite her anpassen.

Wieso nicht? Das ist ja eine Frage des CSS bzw. der Funktion Responsive Images. Was du nun einsetzen sollst, hängt ganz davon ab was du möchtest.

Also wunsch wäre, dass in der Desktop Ansicht zB. 4 Nebeneinander, in der 767px Ansicht nur noch 2 und in der 320px Ansicht nur noch eines pro "Spalte" aufscheinen.

Dann mach das mit deinem CSS so .

[macbee]

Na toll :-)))

Also wäre es wohl besser, wenn ich mir mal den Artikel von https://rocksolidthemes.com/de/conta...picture-contao durchlese...

Oder gibts irgendwo ein paar Anwendungsbeispiel? Bin eher der macher als der Theoretiker :-)

Danke Euch auf jeden Fall schon einmal für die Hilfe :-)

[Spooky]

Du musst ja nicht unbedingt responsive images einsetzen, wenn du denkst, dass es dir keinen Mehrwert bringt.

Dein Grundsätzliches vorhaben kannst du ja auch ohne diese Funktion hinbekommen. Die Darstellung kannst du dann mit responsive images weiter optimieren.

Mach es erst mal so wie du eigentlich schon geplant hattest: lasse die Bilder quadratisch ausgeben und per CSS ordnest du sie dann wie gewünscht nebeneinander an (bspw. mit 33% Breite oder wie auch immer).

[macbee]

Jetzt bin ich verwirrt: :-))

1) in der Dateiverwaltung definiere ich pro Bild den wichtigen Teil. (das geht aber nur so ca. Quadratisch, da man die das ja nicht zb. mit Shift Taste proportional aufziehen kann)
2) In dem Modul Bildergalerie lege ich "wichtiger Teil" fest und definiere die Höhe zb. 250px,

-> aber da gehts ja schon los...

der "wichtige Teil" ist zb. beim ersten Bild der Bereich ohne den Sandboden... geht aber nicht... und die Höhe der Bilder ist dennoch unterschiedlich.

Ich glaube ich habe zuviel rumgespielt, dass ich jetzt gar nix mehr gebacken krieg...

[Spooky]

1) in der Dateiverwaltung definiere ich pro Bild den wichtigen Teil. (das geht aber nur so ca. Quadratisch, da man die das ja nicht zb. mit Shift Taste proportional aufziehen kann)

Das ist prinzipiell mal egal, darum kannst du dich später kümmern, falls notwendig.

2) In dem Modul Bildergalerie lege ich "wichtiger Teil" fest und definiere die Höhe zb. 250px

Breite & Höhe natürlich, weil du willst ja ein quadratisches Bild haben.

[macbee]

iwie stand ich ja nun voll auf dem Schlauch...

OK.. und per CSS definiere ich dann entweder img witdh 33 / 50 / oder 100 Prozent..

Ist ja eigentlich easy... warum hab ich das dann nicht gleich so gemacht :-))

LG

[Spooky]

Nein, die Breite solltest du lieber einem Container geben bspw. dem li einer Galerie). Dem img selbst gibst du max-width:100%; height:auto; (und evt. display:block;)

[Kahmoon]

Der wichtige Teil muss nicht quadratisch sein. Contao versucht nur, unabhängig vom Endformat, den wichtigen Teil möglichst vollständig darzustellen.

[macbee]

Merci..werde ich morgen mal ausprobieren.. heute seh ich nix mehr :-(

[macbee]

So.. dank Mr. Google habe ich nun folgendes gemacht:

Ausgangssituation: ce_gallery mit hoch und querformatigen Bildern unterschiedliche Größe gefüllt.

Dann dem container eine vieport breite gegeben und das img darin vertikal zentriert... Das ganze schaut dann so aus:

#main .ce_gallery li {
    float: left;
    margin-bottom: 10px;
    padding: 0;
    width: 33.33%;
} 

#main .image_container{
position: relative; 
height: 10vw!important;
overflow: hidden;
} 

und

#main .image_container img {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
} 

Sicherlich nicht schön, aber selten :-))) Dadurch ist zB. das letzte Bild zentriert eingepasst und ich erspare mir den Gang über das Backend. Der Kunde kann dann da Bildergalerien anlegen wie er lustig ist und zum Formatieren ist es dann auch einfacher.

Live noch hier zu sehen.... Klick mich

Vielleicht ist das noch Verbesserungswürdig, aber es funzt :-)

[Andreas]

Das ist aber überhaupt nicht performant. Wir laden jetzt Bilder, die 800px breit sind, bekommen sie aber höchsten mit einer Breite von 350px zu sehen. Und was, wenn der Kunde da Bilder mit 2000px Breite hochlädt?

Du kannst eine Bildgröße einstellen, als default für Gallerien vorbelegen und das Feld für den Kunden verstecken. Dann rechnet Contao die Bilder z.B. auf eine Breite von 350px runter, egal, was der Kunde dort hochlädt. Damit hast du dann auch immer gleich große Thumbs.

[macbee]

Danke für den Input...

Die Uploadgröße wird auf 800px beschränkt. Es geht ja auch darum, dass man die Bilder anklicken und vergrößert sehen möchte - nur sollen sie halt nicht im Frontend in der Galerie vorschau so groß dargestellt werden.
Die Umrechnung bringt mir ja auch nix, weil Contao ja nicht weiß, ob es ein hoch oder querformatbild ist.

.LG

[Andreas]

Du scheinst das System, was bei Conao dahinter steckt nicht verstanden zu haben.

Wenn du die Thumbs von Contao verkleinern und beschneiden lässt, hast du trotzdem noch das originale Bild in der großen Ansicht.

Dieses große originale Bild, könntest du von Contao auch nochmal über Begrenzungen in den BE-Einstellungen während des Uploads beschneiden lassen, was sich dann allerdings nur auf Uploads aus dem BE heraus auswirkt, nicht bei einem FTP-Upload.

Die Anforderungen, welche du dort hast, hat nahezu jeder, aber ich kenne keinen, der die Möglichkeiten von Contao dort nicht nutzt, so wie du es jetzt getan hast.

Edit:

Die Umrechnung bringt mir ja auch nix, weil Contao ja nicht weiß, ob es ein hoch oder querformatbild ist.

Du beschneidest die Bilder doch auch mit deinem CSS, d.h. du siehst nicht alles von dem Original. Das gleiche macht Contao auch mit den Thumbs. Und wenn Contao wissen müsste, ob ein Bild Hoch- oder Querforamt ist, wäre das eine der leichtesten Übungen. Die Bilder werden in ihren Abmessungen soweit analysiert wie es nötig ist, dazu gehört auch die Prüfung auf das Format.

[macbee]

Hi,

Sorry.. missverständnis. Ich dachte Du meinst mit "beschneiden", dass die Größe beim Upload gemeint ist.

Konkretes Problem, dass ich habe... Ich habe einen Kunden übernommen, der auf seiner Seite über 150 Galerien angelegt hat. Nun wird im Zuge eines Redesigns auch der Content vergrößert und somit ändern sich auch die Breiten der einzelenen Bilder (angenommen es sind 4 Stück nebeneinander angeordnet).

Und nun mein Verständnisproblem. Wenn ich den Bildern eine fixe Breite innerhalb der Galerie zuweisen (zb. 250px) dann bricht ja bei einem zusammenschieben der Seite (spätestens wenn das Browserfenster kleiner als der Container wird) das letzte Bild um und rutscht in die nächste Reihe. Dieses kann ich natürlich mittels CSS verhindern, indem ich dann bei diesem Breakpoint eine Bildbreite von zB. 50% zuweise, so dass 2 Bilder umbrechen.

Aber...Wenn ich die fixen breiten eh mit CSS aushebele, warum denn dann erst die fixen Breiten anlegen?

???

[Andreas]

Du hast es noch nicht ganz verstanden. Sagen wir mal du setzt die Breite für die Thumbs auf 350px. Dann heißt das nicht, dass du sie im FE auch mit 350px Breite siehst. Die Thumbs in der Galerie liegen ja jeweils in Wrappern

<ul class="cols_4">
  <li class="row_0 row_first row_last even col_0 col_first">
    <figure class="image_container">
      <a title="DSC_5276.jpg" data-lightbox="lb290" href="files/contaodemo/media/content-images/DSC_5276.jpg" class="cboxElement">
        <img width="300" height="200" alt="DSC_5276.jpg" src="assets/images/d/DSC_5276-df2b4b3d.jpg">
      </a>
    </figure>
  </li>
  ...
</ul>

Wenn jetzt z.B. die LIs nur 30% Breite haben dürfen und die Bilder haben eine max-width:100%, dann werden sie auch höchstens so Breit angezeigt, wie der Elterncontainer ist.

Aber...Wenn ich die fixen breiten eh mit CSS aushebele, warum denn dann erst die fixen Breiten anlegen?

Weil du dann nicht 800px Bilder sondern 350px Bilder laden musst. Was sich besonders bei 150 Galerien positiv auswirken dürfte. Außerdem ist das Handling per CSS mit Bildern, welche alle die gleiche Größe haben wesentlich einfacher.

Viel aushebeln tust du dabei auch nicht, du erlaubst den Bildern einfach nicht breiter dargestellt zu werden als der Elterncontainer. Mit nem Breakpoint und dann 50% hast du dabei auch nichts zu tun.

Zum Thema Galerien mit Bildern in Spalten passt auch noch das Thema CSS Flexboxen. Falls du mal was anders ausprobieren möchtest als zu floaten.

Ich habe es die ganze Zeit nicht erwähnt, weil ich es nicht komplizierter machen wollte, aber wenn du noch mehr Performance bezgl. Responsiveness rausholen willst, könntest du dir auch noch das hier ansehen https://rocksolidthemes.com/de/conta...picture-contao

[macbee]

Da hast Du dann wohl recht... Hmmm.. Ich glaube ich werde das dann mal anders probieren und werde mir auch den Artikel zu Gemüte ziehen...
Danke Dir auf jeden fall. Zecks Performance gebe ich Dir natürlich recht -- ist ein nicht unerhebliches Argument!

Danke nochmals und ich teste mal weiter :-)) Man ist halt nie zu alt um zu lernen..

LG

[Andreas]

Ja, genau. Einfach mal ausprobieren und mit den Möglichkeiten spielen.