CE Text mit Bild responsive

Druckbare Version

30.11.2015, 09:35
kubjo

CE Text mit Bild responsive

Hi Leute,
ich bastle jetzt schon einige Zeit an einem kleinen "Luxusproblem" rum, bei dem ich eigentlich davon ausgegangen bin, dass ich es mit der neuen Funktion "Bildgrößen" elegant lösen könnte. Aber leider ist es nicht so leicht, wie gedacht!

Aufgabenstellung: Ich würde gerne dem CE_text ein Bild mitgeben, das auf "normalen Bildschirmen" 50% des zur Verfügung stehenden Platzes einnimmt und auf kleineren Bilschirmen (sagen wir 768px / 48rem (bei 16px/rem) ) dann die volle Breite einnimmt. Natürlich sollten sich nicht nur die Abmessungen, sondern auch die ausgelieferte Bild-Datei via mediaqueries anpassen. Dabei soll natürlich der Text schön um das Bild fließen. Das macht er aber nicht immer, es ergeben sich teilweise große Abstände!

Siehe hier: http://www.kubjo.net/images-test.html

Mein Problem: Ich entwickle hauptsächlich auf FF, und habe das Gefühl dass hier noch Inkompatibilitäten vorliegen, obwohl hier dann ja das polyfill greifen sollte. Mit JS kenn ich mich leider nicht so gut aus, aber so habe ich das verstanden.

Meine Fragen:

- Ist der FF wirklich so der Entwicklung hiterher?
- Was macht das polyfill, und was nicht?
- Kann ich in den mediaqueries zu den "Bildgrößen" auch Angaben in rem machen?
- Ist diese Aufgabenstellung völlig utopisch?

Grüße aus Ludwigsburg
Jochen Kubik
01.12.2015, 08:57
denniserdmann
Moin Jochen,

laut caniuse.com bräuchtest du den Polyfill gar nicht für den Firefox:
- http://caniuse.com/#feat=srcset
- http://caniuse.com/#feat=picture
Ich habe gesehen, dass du mit dem Picture-Element arbeitest. Für deinen Test ist es doch eigentlich nicht nötig und macht es nur noch schwerer, den Code zu verstehen. In dem Artikel von rocksolid wird der Unterschied und die Einrichtung von „normalen“ Responsive Images und den „Art-Directed“ Responsive Images beschrieben. Ich würde Dir erstmal die normale Variante empfehlen.

Zu deinen anderen Fragen:
Du gibst die Bildmaße zwar in Pixeln an, aber über das sizes-Attribut kannst du dann noch festlegen, wie groß es (je nach Breakpoint) dargestellt wird. Das müsstest du eigentlich in jeder Einheit machen können, wobei relative Einheiten wie vw sich eigentlich besser eignen.

Utopische Aufgabenstellung? Glaube ich nicht.

Grüße,
Dennis
01.12.2015, 09:38
RockSolid Themes

Zitat:

Zitat von kubjo

Ist der FF wirklich so der Entwicklung hiterher?

Nein, im aktuellen Firefox (42) gibt es unseres Wissens nur noch einen kleinen Bug der vermutlich in Version 45 behoben wird. Dieser Bug betrifft das Resizen des Browserfensters, deshalb sollte man bei Tests im Firefox die Seite neu laden nach verändern der Browsergröße.

Zitat:

Zitat von kubjo

Was macht das polyfill, und was nicht?

Der Polyfill rüstet die Unterstützung für picture uns srcset nach in Browsern die diese noch nicht selbst unterstützen. In modernen Browsern wie z. B. Firefox 42 mach der polyfill gar nichts.

Zitat:

Zitat von kubjo

Kann ich in den mediaqueries zu den "Bildgrößen" auch Angaben in rem machen?

Vermutlich schon, die Angaben wären aber dennoch nicht „relativ“ sondern 1rem würde immer 16px entsprechen, wie auch in CSS-Media-Queries siehe http://stackoverflow.com/questions/1...hrome#12201088
Um Verwirrung zu vermeiden sollte man für die Media-Queries px und für die Größen vw oder px verwenden.

Zitat:

Zitat von kubjo

Ist diese Aufgabenstellung völlig utopisch?

Nein, aber du solltest die Größen der Bilder nicht über das sizes-Attribut sondern über CSS steuern. Das sizes-Attribut dient dann nur als Hilfe für den Browser um das richtige Bild zu laden.
01.12.2015, 09:50
kubjo

Hall Denis,
vielen Dank für Deine Antwort!
Das Picture-Element verwende ich nicht bewußt ;-)
Wie entscheide ich in contao ob ich es verwende?
Ich dachte bis jetzt, dass "Art-Direction" nur der Teil ist in dem man das Bild mit einem "Wichtigen Teil" belegt, der dann gezoomt wird.
Den Artikel habe ich mehrfach gelesen vieleicht muß ich ihn noch ein paar mal lesen ;-)

Dass ich das Polyfill nicht brauche finde ich gut und werde es in der Testphase erst mal abschalten!

Bei den Einheiten dachte ich nicht die der Bildbreiten/höhen sonder die bei den Angaben in den Mediaqueries.

Die Bildbreiten in vw sind mir noch ein wenig ungewohnt, sie beziehen sich doch auf den vollen viewport, oder?
Wenn ich meinem Layout z.B. 80% Breite gebe und darin die Navigation links 240px breit ist, dann wird es ohne calc schwierig von Rest die zb. die Hälft zu berechnen, oder?

Grüße aus Ludwigsburg
Jochen Kubik
01.12.2015, 10:03
kubjo

[QUOTE=RockSolid Themes;392423]Nein, im aktuellen Firefox (42) gibt es unseres Wissens nur noch einen kleinen Bug der vermutlich in Version 45 behoben wird. Dieser Bug betrifft das Resizen des Browserfensters, deshalb sollte man bei Tests im Firefox die Seite neu laden nach verändern der Browsergröße.
Klasse!

Zitat:

Zitat von RockSolid Themes

Der Polyfill rüstet die Unterstützung für picture uns srcset nach in Browsern die diese noch nicht selbst unterstützen. In modernen Browsern wie z. B. Firefox 42 mach der polyfill gar nichts.

Muß ich dafür JQ oder Moo im Layout aktiviert haben?

Zitat:

Zitat von RockSolid Themes

Vermutlich schon, die Angaben wären aber dennoch nicht „relativ“ sondern 1rem würde immer 16px entsprechen, wie auch in CSS-Media-Queries siehe http://stackoverflow.com/questions/1...hrome#12201088
Um Verwirrung zu vermeiden sollte man für die Media-Queries px und für die Größen vw oder px verwenden.

Ich habe einen Artikel gefunden der schlüssig argumentiert, dass rem in den Mediaqueries eine gute Idee ist, vielleicht finde ich ihn heute noch, dann hänge ich ihn hier mal ran!

Zitat:

Zitat von RockSolid Themes

Nein, aber du solltest die Größen der Bilder nicht über das sizes-Attribut sondern über CSS steuern. Das sizes-Attribut dient dann nur als Hilfe für den Browser um das richtige Bild zu laden.

Langsam dämmert es bei mir, sollte man dann für jede Bildgröße auch noch eine CSS Definition erstellen? Damit das Bild eine Bildgröße zb. in Prozent (des Mutterelements) erhalten kann?

Euer Artikel ist ja schon klasse (und sehr populär ;-) ), aber den könnte man daraus mit ein paar Beispielen nicht ein ganze Anleitung machen? Bedarf gäbe es sicherlich !

Grüße aus Ludwigsburg
Jochen Kubik
01.12.2015, 10:10
Spooky

Zitat:

Zitat von kubjo

Ich habe einen Artikel gefunden der schlüssig argumentiert, dass rem in den Mediaqueries eine gute Idee ist, vielleicht finde ich ihn heute noch, dann hänge ich ihn hier mal ran!

rem bezieht sich auf die root font-size. Ob und warum man überhaupt em oder rem hier verwenden will kann man nicht pauschal sagen.
01.12.2015, 10:45
RockSolid Themes

Zitat:

Zitat von kubjo

Muß ich dafür JQ oder Moo im Layout aktiviert haben?

Nein. Der Polyfill benötigt kein JavaScript-Framework.

Zitat:

Zitat von kubjo

Ich habe einen Artikel gefunden der schlüssig argumentiert, dass rem in den Mediaqueries eine gute Idee ist, vielleicht finde ich ihn heute noch, dann hänge ich ihn hier mal ran!

Das kann ich mir schwer vorstellen, em und rem sind in Media-Queries exakt dasselbe, aber em wird von mehr Browsern unterstützt. em in Media-Queries kann man verwenden, sollte sich jedoch bewusst sein, dass sie sich auf die Standard-Schriftgröße des Browsers beziehen (fast immer 16px), nicht auf die root-font-size.

Zitat:

Zitat von kubjo

Langsam dämmert es bei mir, sollte man dann für jede Bildgröße auch noch eine CSS Definition erstellen? Damit das Bild eine Bildgröße zb. in Prozent (des Mutterelements) erhalten kann?

Ja, wir gehen hierbei andersrum vor. Wir erstellen zuerst das CSS das die Bilder auf die gewünschte Breite setzt (meist in Prozent) und auf Höhe auto. Danach erstellen wir eine Bildgröße die zum CSS passt.

Zitat:

Zitat von kubjo

Das Picture-Element verwende ich nicht bewußt ;-)
Wie entscheide ich in contao ob ich es verwende?

Sobald du ein Unterelement der Bildgröße also einen „Bildgrößen-Media-Query“ anlegst wird das <picture> element verwendet.

Zitat:

Zitat von kubjo

Die Bildbreiten in vw sind mir noch ein wenig ungewohnt, sie beziehen sich doch auf den vollen viewport, oder?
Wenn ich meinem Layout z.B. 80% Breite gebe und darin die Navigation links 240px breit ist, dann wird es ohne calc schwierig von Rest die zb. die Hälft zu berechnen, oder?

Ja, vw bezieht sich auf die Viewportbreite, du kannst aber die calc-Funktion von CSS verwenden z. B. calc(80vw - 240px).