Problematische Bildplatzierungen in COD

[mv_alex]

Hallo zusammen,

aktuell setze ich eine kleine Website basierend auf dem Template "Contao Official Demo" um (Link entfernt).

Dabei bin ich auf Probleme mit der Platzierung von Bildern gestoßen. Obwohl diese als "oben rechts im Fließtext" eingesetzt sind, schieben sie sich zu weit nach oben, teilweise auch über die Share-Buttons. Mal abgesehen von einem zu großen linken Padding oder Margin bei kleineren Viewports.

Mir ist aufgefallen, dass sie im Quelltext vor der Überschrift eingebunden werden. War das schon immer so oder hat sich im Template was geändert in Contao 3? Könnte evtl. die Überschrift nicht richtig gestaltet sein?

Über Anregungen würde ich mich freuen!

Danke&Gruß Alex

[Spooky]

teilweise auch über die Share-Buttons.

Das liegt aber an dem Styling von den Share Buttons, nicht am Bild. Diese sind viel zu weit nach unten versetzt.

Mal abgesehen von einem zu großen linken Padding oder Margin bei kleineren Viewports.

Das kann ich nicht nachvollziehen. Beschreibe genauer, wo man das sehen kann.

[mlweb]

Mir ist aufgefallen, dass sie im Quelltext vor der Überschrift eingebunden werden. War das schon immer so oder hat sich im Template was geändert in Contao 3?

Wenn ich mir die Demo und meine eigenen Projekte anschaue dann werden die Bilder noch immer nach der Überschrift gerendert.

Wie hast Du das Bild eingebunden? In der Demo sind die Bilder definitiv über die Checkbox add image (Bild hinzufügen) eingebunden und nicht über den Tiny (Editor).

Sind angepasste Templates im Einsatz?

[mv_alex]

Herzlichen Dank für Eure Antworten!

Das liegt aber an dem Styling von den Share Buttons, nicht am Bild. Diese sind viel zu weit nach unten versetzt.

Stimmt, top:78px; - hatte ich glatt übersehen.

Das kann ich nicht nachvollziehen. Beschreibe genauer, wo man das sehen kann.

Wenn man eine News in der Detailansicht aufruft und den Viewport z.B. auf 767px verkleinert. Das Padding/Margin scheint sich bei der Überschrift links und bei der Bildunterschrift rechts auszuwirken - angenommen, das Bild wäre der Maßstab.

Wenn ich mir die Demo und meine eigenen Projekte anschaue dann werden die Bilder noch immer nach der Überschrift gerendert. Wie hast Du das Bild eingebunden? In der Demo sind die Bilder definitiv über die Checkbox add image (Bild hinzufügen) eingebunden und nicht über den Tiny (Editor).

Das ist seltsam. Auf der Startseite stimmt das für die normalen Artikel, aber in der Newsliste kommt die h2 nach dem Bild. Und auf der Seite des Kapellchens stimmt es wieder nicht, die h2 kommt da nach dem Bild. Die sind aber identisch eingebunden wie hier:

bilder.png

Weil das mach ich immer so

Sind angepasste Templates im Einsatz?

Nein, an dieser Stelle nicht. Es gibt nur eins für die Kacheln auf der Vorstandsseite und das mitgelieferte ce_player_responsive.html.

Gruß Alex

[Andreas]

Klarer Fall von Überschrift in den RTE gesetzt, dann gehört es natürlich zum Fließtext mit dazu. Du musst das Überschriftfeld obendrüber benutzen.

[mlweb]

Die sind aber identisch eingebunden wie hier:

bilder.png

Weil das mach ich immer so

Das ist ja auch korrekt so. Bilder einbinden im Tiny kann man m.E. im Ausnahmefall machen, aber dann sollte man einen guten Grund dafür haben und die "Risiken und Nebenwirkungen" kennen,

Auf der Startseite stimmt das für die normalen Artikel, aber in der Newsliste kommt die h2 nach dem Bild. Und auf der Seite des Kapellchens stimmt es wieder nicht, die h2 kommt da nach dem Bild.

Lassen wir mal die Newsliste zunächst außen vor da habe ich jetzt nicht geschaut. Ist ja auch ein anderes Template. In Deinem Textelement vom Kapellchen, wo ist da die Überschrift h2 eingetragen? Im dafür vorgesehenen Feld Überschrift oder im Tiny?

Weil so ein Template für die Generierung des Frontends macht immer alles in gleichem Maß richtig oder falsch .

Mit Überschrift h2 im Tiny, kann ich Deinen Effekt nämlich in der Demo reproduzieren und vielleicht ist das auch die Lösung für die News, denn auch da werden ja Inhaltselemente eingesetzt.

[Andreas]

Wenn man eine News in der Detailansicht aufruft und den Viewport z.B. auf 767px verkleinert. Das Padding/Margin scheint sich bei der Überschrift links und bei der Bildunterschrift rechts auszuwirken - angenommen, das Bild wäre der Maßstab.

Kann jetzt nicht so wirklich verstehen, was du damit meinst, aber JA, dieses Theme ist nicht perfekt. Du musst dir die Paddings und Margins (und alles andere ) mit den Devtools des Browsers ansehen und bei Bedarf korrigieren.

Mal ganz grob: Die Struktur ist so:

<div class="mod_article">
  <h1  class="ce_headline"></h1>
  <div class="ce_...">...
  <div class="ce_...">...
  <div class="ce_...">...

Im Theme werden über Selektoren wie z.B.

.mod_article [class*="ce_"],
.mod_article [class*="mod_"] {
	margin-left:  10px;
	margin-right: 10px;
}

allgemeine Formatierungen vorgenommen. In einer Newslist, wenn News Inhaltselemente haben, stimmt diese Struktur aber nicht mehr und somit könnten dann diverse Paddings und Margins nicht mehr passen.

<div class="mod_article">
  <div class="mod_newsreader">
    <div class="layout_full">
      <h1>Otzenrather Classics 2017</h1>
      <p   class="info"></p>
      <h1  class="ce_headline"></h1>
      <div class="ce_...">...
      <div class="ce_...">...
      <div class="ce_...">...

BTW Für meinen Geschmack werden da sowieso viel zu viele Paddings und Margins im Innern des HTMLs benutzt. Eigentlich braucht es nur Margins nach unten auf mod_... und ce_.... Seitliche Abstände setzt man einmal Seiten übergreifend auf die ".inside"s.

Das kleine CSS-Beispiel von oben sollte also besser ungefähr so aussehen.

[class^="mod_"],
[class^="ce_"] {
  margin-bottom:  1rem;
}
.inside {
  padding: 1rem;
}

Beachte auch das Tauschen von "*" gegen "^".

[mv_alex]

Danke Euch für die ausführlichen Antworten!

Ja, im Artikel hatte ich tatsächlich h2s im RTE gesetzt. Saublöder Fehler! Werde wohl langsam betriebsblind ...

Aber in den News kommt die Überschrift aus dem Titel, kann ich also so gar nicht beeinflussen. Das Überschriftfeld ist in diesem Fall gar nicht gefüllt.

Das CSS werde ich dann wohl noch mal überarbeiten müssen. Da will man mal den Aufwand klein halten ...

Danke&Gruß
Alex

[Andreas]

Im Newsleser ist, wenn du das Template news_full benutzt, der Titel ganz oben drüber, das macht also keine Probleme. Darunter kommen dann Inhaltselemente, so wie in den Artikeln. Dafür gilt dann das selbe wie oben erwähnt mit dem Tiny.

Ja, so ein Theme ist ja nur zum Abgucken, was man machen kann und zum Lernen. Wenn du CSS dann mal drauf hast, machst du sowieso dein eigenes sauberes minimales CSS. Und erfahrungsgemäß hast du auch viel Arbeit, wenn du dir ein Theme kaufst. Es sei denn, du möchtest dort keine Anpassungen vornehmen.

In der COD sind auch viel zu viele Farben drin. Wenn du die Farben mal direkt im BE in den Themeeinstellungen sehen möchtest, dann lade dir mal das hier in deine Installation. http://public.andreasburg.de/contao/...theme_vars.zip. Hatte ich vor etwas längerer Zeit mal gemacht.

Edit: Da fällt mir ein, die Variablen sind in der COD zwar noch vorhanden, aber eine Änderung dort dürfte keine Auswirkung mehr haben, da die internen CSS-Dateien nicht mehr geladen werden bzw. auch erst gar nicht mehr vorhanden sind. Es werden jetzt SCSS Dateien aus files/ geladen. Diese Variablen sind nur für intern erstellte CSS-Dateien.

[mv_alex]

Diese Form der Attributselektoren kannte ich tatsächlich noch nicht. Was unterscheidet die Syntax "*" und "^"?

Ich habe die inside-Paddings nun auf rem umgestellt, aber in den mittleren Viewports bekomme ich noch Probleme mit den Bildgrößen. Diese hab ich zwar z.B. auf calc(100vw-2rem) angepasst, trotzdem ist teilweise der rechte Rand angeschnitten.

Bei den News bleibt das Problem der Ansicht news_latest - komme ich da irgendwie um ein angepasstes Template herum?

Danke&Gruß Alex

[Andreas]

Diese Syntax ist verwandt mit der Regex-Syntax. "^" heißt "Der String mit den Klassen fängt an mit..." und "*" heißt "Ist irgendwo in dem String, der die Klassen beinhaltet". Die Suche nur am Anfang dürfte schneller sein, und die mod_ und ce_ Klassen sind immer die ersten.

Muss nicht rem sein, ich benutze das halt gerne. 1rem ist die Schriftgröße des Browsers des Besuchers, welche default auf 16px steht.

Sowas kompliziertes wie calc(100vw-2rem) brauchst du in deinem Fall nicht um einfach ein Bild rechts neben dem Text anzuzeigen.

Ich denke du solltest dieses Template anpassen. Newstemplates gehören zu den Templates, die sehr oft angepasst werden (müssen). Da jetzt mit CSS rumzuspielen, da würdest du dir viel an Flexibilität in Sachen Responsiveness nehmen. Ja, ich finde es auch seltsam, dass das news_latest die Überschrift erst nach dem Bild bringt.

Wenn du nochmal ein Problem hast, dann zeige am besten einen Link direkt auf die einzelne Seite mit dem Problem. Ich sehe nicht, dass du diese horizontalen Margins rausgeschmissen hast, oder Padding auf die Insides gelegt hast. Abgeschnittenes Bild sehe ich auch nicht.

BTW Ich würde die Bilder in Contao immer auf display:block setzen, weil die ja sowieso alleine in einem Wrapper sind, welcher auf block steht. Display:inline für Bilder macht nur Sinn, wenn sie mitten im Text mitfließen sollen.

.image_container a,
.image_container img,
.image_container picture {
  display: block;
}

Ein Elemenet mit display:inline wird als Text behandelt, mit Zeilenhöhe, Kerning usw. Das könnte zu ungewollten Effekten führen.

[mv_alex]

Sowas kompliziertes wie calc(100vw-2rem) brauchst du in deinem Fall nicht um einfach ein Bild rechts neben dem Text anzuzeigen.

Dafür sicher nicht, aber ich möchte ja möglichst gut angepasste Bildgrößen für die unterschiedlichen Viewports ausliefern. Es ist ja nicht sinnvoll, eine 960px-Bild an ein Smartphone im Portraitmodus auszuliefern. Problematisch scheinen dabei nur die Fälle zu sein, wo der Viewport noch breiter als der eigentliche Contentbereich ist, da ist dann 100vw natürlich zu breit. Aber pixelgenau für alle Browser übergreifend zu arbeiten, erscheint mir zumindest "herausfordernd".

Ich denke du solltest dieses Template anpassen.

Damit sieht es jetzt in der Tat besser aus.

Wenn du nochmal ein Problem hast, dann zeige am besten einen Link direkt auf die einzelne Seite mit dem Problem. Ich sehe nicht, dass du diese horizontalen Margins rausgeschmissen hast, oder Padding auf die Insides gelegt hast. Abgeschnittenes Bild sehe ich auch nicht.

Das ist seltsam, ich habe das originale SCSS folgendermaßen angepasst:

/*	.mod_article *[class*="ce_"],
	.mod_article *[class*="mod_"] {
		margin-right:10px;
		margin-left:0;
	}*/
	[class^="mod_"],
	[class^="ce_"] {
		 margin-bottom:  1rem;
	}
	.inside {
		 padding: 1rem;
	}

Vielleicht ein Cachingproblem? Wobei ich den Contao-Cache geleert habe. Denn Effekt sieht man auf der Seite (Link entfernt), wenn man den Viewport auf 979px verkleinert.

Gruß Alex

Edit: Es scheint mir fast so, als kämen diese Margins und Paddings gar nicht aus dem Theme, sondern aus den Contao-Stylesheets (Layout-Builder?)...

[tab]

Die kommen aus dem CSS für das Contao 12-Spalten-Grid.

[Andreas]

Wieso hat dein PICTURE-Element da so viele Fehler? Hast du das selbst codiert oder ist das ein Bug von Contao?

Grundsätzlich liegen die Bilder ja immer in irgendeinem Container und sollten auf display:block stehen. Der Container regelt die Breite - Spalten, Fullwidth OWE.

Wenn das erledigt ist, befinden sich in diesem Container Bilder. Denen braucht man dann nur noch zu sagen, dass sie höchstens so breit sein dürfen, wie der Container.

.image_container img {
  display: block;
  max-width: 100%;
  height: auto;
}

Möchte man dann, für den Fall, dass ein Bild kleiner ist als der Container, das Bild auf die Breite des Container ausdehnen, dann noch das hier.

.image_container img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

Das Bildgrößenhandling für Smartphones etc. erledigt man mit den Bildgrößen von Contao. Gibt auch ein gutes Video von Peter Müller auf Youtube dazu.

[mv_alex]

Die kommen aus dem CSS für das Contao 12-Spalten-Grid.

Na, dann brauch ich mich ja nicht zu wundern. Klar, die werden erst nach den externen SCSS eingebunden und überschreiben die Werte wieder.

.inside { padding: 1rem;	}

ist aber auch gar nicht so hilfreich, da sich das auch auf top navi und slider auswirkt.

[mv_alex]

Wieso hat dein PICTURE-Element da so viele Fehler?

Welche Fehler meinst Du?

Hast du das selbst codiert oder ist das ein Bug von Contao?

Codiert habe ich nichts, nur CSS ergänzt.

Wenn das erledigt ist, befinden sich in diesem Container Bilder. Denen braucht man dann nur noch zu sagen, dass sie höchstens so breit sein dürfen, wie der Container.

Dann sähen die Bilder zwar kleiner aus, aber es würden immer noch viel zu große Dateien an mobile Endgeräte ausgeliefert.

Das Bildgrößenhandling für Smartphones etc. erledigt man mit den Bildgrößen von Contao.

Ja, genau - so sind die Bilder eingebunden. Wobei ich mir allerdings das Video der Contao Konferenz 2015 angeschaut hatte.

Gruß Alex

[Andreas]

Welche Fehler meinst Du?

Das kannst du doch leicht selber rausfinden. https://validator.w3.org/nu/?doc=htt...apellchen.html

[Andreas]

Dann sähen die Bilder zwar kleiner aus, aber es würden immer noch viel zu große Dateien an mobile Endgeräte ausgeliefert.

Nein, dafür sind ja die "Bildgrößen" da.

[mv_alex]

Das kannst du doch leicht selber rausfinden.

Okay, das ist seltsam. Scheinbar wird die Formel nicht aufgelöst, dabei hab ich mich an die interne Hilfe gehalten:

Und (max-width: 600px) calc(100vw - 20px), 500px bedeutet, dass das Bild auf kleinen Bildschirmen 20px schmaler ist als der Viewport und auf großen Bildschirmen 500px breit.

Funktioniert die nicht mit relativen Angaben?

Ich werde mir aber das Video der 2016er Konferenz ebenfalls noch anschauen, ob ich irgendwo einen Fehler bei den Einstellungen gemacht habe.

[mv_alex]

Nein, dafür sind ja die "Bildgrößen" da.

Sorry, da hab ich Dich falsch verstanden. Ich dachte, Du wolltest das rein über CSS lösen.

Das Problem ist, dass dem img ja noch ein padding und ein border zugewiesen wird, insgesamt 6px. Daher war meine ursprüngliche Idee, dem Bild die Größe Viewport-6px zu geben. Das kann aber ja nicht funktionieren, solange der Viewport noch breiter ist als #wrapper bzw. #main .inside.

Es hilft aber leider auch nicht, .image_container eine max-with von 100% zu geben, daher meine Schwierigkeiten:

viewport979.png

[Andreas]

...ob ich irgendwo einen Fehler bei den Einstellungen gemacht habe.

Ich denke dies sollte als Bug gemeldet werden, denn die Eingaben werden ja validiert und sollten somit im FE nicht zu Fehlern führen.

[Andreas]

Das Problem ist, dass dem img ja noch ein padding und ein border zugewiesen wird, insgesamt 6px.

Wenn man einem Element einen Border und/oder Padding zuweißt, dann muss man zusätzlich noch box-sizing aufsetzen, wenn eine Breite gesetzt wird, welche dies nicht berücksichtigt.

#container .image_container img { /* auch für nicht verlinkte Bilder */
    position: relative; /* warum? */
    display: block; /* warum hast du inline-block? */
    padding: 2px;
    border: 1px solid #d4cbc5;
    /*border-color: #d4cbc5;*/
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto;
} 

[mv_alex]

Bingo! Das scheint das fehlende Puzzleteil gewesen zu sein. Zumindest seh ich jetzt unabhängig von der Viewportbreite ein vollständiges Bild mit Rahmen. Kannst Du das bestätigen?

Die beiden kritisierten Auszeichnungen stammen wohl aus dem Theme, und sollten eigentlich durch mein Custom-CSS überschrieben werden.


Nachdem ich mir den Vortrag von Peter Müller angeschaut hab, hab ich meine Bildgrößen "entschlackt". Offenbar hatte ich die mit Media Queries überkonfiguriert, sodass picture-Elemente generiert wurden, wo ein srcset ausreichend ist. Jetzt validiert die Seite auch, da war zudem auch ein Tipp-/Copy&Paste-Fehler drin ("wv" statt "vw").

Die Bedienung ist aber auch nicht wirklich intuitiv, allein schon die Frage, wann man nur Bildgrößen anlegen muss und wann darin noch Media-Queries. Ich bin nicht wirklich sicher, ob ich das vollständig verstanden habe.

Jetzt habe ich z.B. das Logo mit unterschiedlicher Pixeldichte angelegt wie im Video erklärt. Aber im FE sieht es "verunreinigt" aus (obwohl png), und lt. Chrome DevTool wird immer die gleiche Grafik angezogen, unabhängig von der DPR (Cache ist deaktiviert).

Gleiches Problem bei den Artikelbildern. Obwohl unterschiedliche Versionen bis 1250w generiert werden, zeigt das Devtool als Quelle immer die 250px-Version.

Stellt sich Dir das auch so dar?

Danke&Gruß Alex

[Andreas]

Das Thema Bildgrößen habe ich nicht so drauf, benutze ich zu selten.

[mv_alex]

Okay, ich wollte mir das Video sowieso noch ein oder zwei Mal anschauen.

Danke für Deine/Eure Hilfe!

Gruß Alex