WBCE Home | WBCE Hilfe | WBCE Addon Repository | Impressum | Datenschutz

WBCE Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 11.01.2017 17:09:15

better-work
Member

Generell: Responsive Headergrafik

Hallo,

ich habe für eine Website mehrere Headergrafiken erstellt, die ab einer bestimmten Bildschirmbreite greifen sollen.
Allerdings funktioniert das Ganze recht "holperig".

Sehr interessant und "flüssig" ist ja dieses Beispiel hier=
https://media.kulturbanause.de/blog/201 … ure-6.html

Der Beitrag dazu=
https://blog.kulturbanause.de/2014/09/r … -adaptive/

Gibt es da etwas (Fertiges) für jQuery, das einfach eingebunden werden kann?
Ansonsten setzt dieses Beispiel ja wieder auf ein weiteres Java-Skript, was ja eventuell wieder zu neuen Problemen führen könnte.

Wer hat eventuell Erfahrungen damit gesammelt?


Gruß Jörg

Offline

#2 11.01.2017 18:53:26

florian
WBCE Projektmanagement, Support & Communication

Re: Generell: Responsive Headergrafik

Sieht spannend aus!
Was fertiges gibt es meines Wissens noch nicht, es dürfte aber eigentlich keine Probleme geben, den Code und das JavaScript im Template zu verwenden.


WBCE. Way Better Content Editing.
Immer wieder nützlich für Support: Addon File Editor | System Information

Offline

#3 11.01.2017 20:54:12

better-work
Member

Re: Generell: Responsive Headergrafik

Das Java Script habe ich schon eingebunden, es gab keine negativen Auswirkungen auf das restliche Template.

Theoretisch sollte der Rest kein größeres Problem darstellen, ich melde mich wieder.
Das Ganze ist ja bei Github zum Download verfügbar, inkl. Beispielen=

https://github.com/scottjehl/picturefill


Gruß Jörg

Offline

#4 12.01.2017 10:25:34

grindbatzn
Developer

Re: Generell: Responsive Headergrafik

Smartphones und Tablets haben eine native und eine virtuelle Auflösung.
Die native Auflösung ist meist recht hoch; mein altes Nexus 5 hat zb 1920 × 1080 Pixel. Es gibt aber als virtuelle Auflösung (Viewport) nur 360 × 598 Pixel an.

Es ist daher falsch zu glauben, dass ein Headerbild mit 360px reichen würde - nein: das sieht unscharf aus im Vergleich zu der scharfen Schrift.
Natürlich muss man nicht die ganzen 1080 Pixel liefern, aber 768 sollten es schon sein.

In der Praxis sind aber Headerbilder meist nicht so gestochen scharf,  weil man das Bildmaterial gar nicht so zur Verfügung hat. Oder: Man will es gar nicht so scharf haben.

Jetzt ist es so: Der JPG-Algorithmus kann Unschärfen gut komprimieren, scharfe Kanten hingegen führen zu höheren Dateigrößen. Wenn ich jetzt ein nicht ganz so scharfes Bild herunterrechne, bekomme ich zwangsläufig schärfere Kanten, womit die Kompression nicht mehr so gut funktioniert.
Ergo: Das kleinere Bild ist nicht um soviel kleiner, wie es die Verringerung der Pixel erwarten lassen würde.

Bei einem "üblichen" Headerbild ist der Vorteil solcher Lösungen also nicht so groß, der ergibt sich eher daraus, dass man verschiedenen Varianten anbieten kann, zb  wenn Text drin steht, oder ein Logo.
Das ist aber sowieso Handarbeit, eine Fertig-Lösung für sowas kann nicht optimiert sein.

Offline

#5 12.01.2017 11:02:31

better-work
Member

Re: Generell: Responsive Headergrafik

Hallo Chio,

vielen Dank für Deine ausführliche Antwort.
Die von mir hier dargestellte Methode scheint auch nur bedingt für Headergrafiken geeignet.
Auch hier müsste wieder mit Tricks gearbeitet werden, damit die Grafiken zentriert sind, etc.
Außerdem "schießen" Sie teilweise über den Headerbereich, sie müssten also per CSS eingesperrt werden...

Leider kann ich im Moment keinen öffentlichen Link posten, daher habe Dir eine Mail geschickt, vielleicht lässt sich noch etwas daraus machen???
devil


Gruß Jörg

Offline

#6 12.01.2017 17:25:37

colinax
Member

Re: Generell: Responsive Headergrafik

Hi, ich weis zwar nicht wie du die Bilder in die Webseite eingebaut hast, aber es gibt zum Glück nur zwei Methoden:

  1. Das Bild als Hintergrundbild über CSS einbinden

  2. Das Bild mit <img>  oder <picture> über HTML einbinden

1. Das Hintergrundbild über CSS einbinden ist zwar ein bisschen aufwendiger, man kann aber alles genauer und einfacher steuern. Wenn diese über das BE änderbar sein müssen, geht das auch, man kommt dann am Code2 Modul nicht vorbei, da PHP oder JS benötigt wird.

Der Code dafür lautet:

[== PHP ==]
<?php $headerbild_id = ""; $takeit = false; if (PARENT == 0) { if (file_exists(WB_PATH . '/media/heroimages/hero_' . PAGE_ID . '.jpg')) { $headerbild_id = PAGE_ID; $takeit = true; }} else { if (file_exists(WB_PATH . '/media/heroimages/hero_' . PARENT . '.jpg')) { $headerbild_id = PARENT; $takeit = true; } if (file_exists(WB_PATH . '/media/heroimages/hero_' . PAGE_ID . '.jpg')) { $headerbild_id = PAGE_ID; $takeit = true; }} if ($takeit) {} ?>

Erklärung:
Lege im Medienverzeichnis einen Ordner "heroimages" an.
Lege darin dann die anzuzeigenden Bilder ab: Dateiname "hero_1.jpg" für Bild auf der Seite mit der ID 1, "hero_42.jpg" für Bild auf der Seite mit der ID 42 usw.
Untergeordnete Seiten bekommen das Heroimage der jeweils übergeordneten, wenn kein eigenes Bild hinterlegt.


2. Bilder über <img>  oder <picture> in HTML einbinden funktioniert mit jedem Editor.
Der Beitrag von Jonas Hellwig (Kulturbanause) ist schon älter und nicht mehr ganz am neuesten Stand, das <picture> wird mit HTML5 bereits unterstützt, mit dem neuen HTML 5.1 Standard, der jetzt verfügbar ist, wurde dem <picture> Element das srcset zum Standard hinzugefügt.

Firefox, Chrom(e)(ium) und Safari unterstützen den <picture> Element Standard von HTML 5.1 bereits, der MS Edge erst ab dem Anniversary Update.

Der IE ist ein Sonderfall, da dieser den Standard (logischerweise) nicht unterstützt, er kann mit dem <picture> Element aber umgehen, da dieser das eingebaute Fallback verwendet.

Kurzgesagt das Polyfill ist überflüssig.

Links dazu:
https://www.w3.org/TR/html51/changes
https://www.w3.org/TR/html51/semantics- … ntent.html
https://codepen.io/Louistiti/pen/GNLGPa?editors=1000
https://wiki.selfhtml.org/wiki/HTML/Mul … en/picture
http://caniuse.com/#search=picture

Es gibt aber noch eine weitere Möglichkeit Bilder responsive zu bekommen. Das Ganze kann man eher als Würg Arround bezeichnen, da es auf demselben Prinzip beruht, wie wenn man iFrames responsive machen will.

Vielleicht ist ja das, was du suchst:
http://nicolasgallagher.com/flexible-css-cover-images/

Offline

Liked by:

#7 12.01.2017 18:43:43

better-work
Member

Re: Generell: Responsive Headergrafik

@colinax

Wow, vielen Dank für Deinen ausführlichen Beitrag.

Ja, genau der Internet Explorer und das Fallback Problem, daher habe ich Polyfill benutzt.

[== Undefiniert ==]
ab Zeile 77 (index.php)=
<script async="" src="<?php echo TEMPLATE_DIR; ?>/picturefill-js/plugins/intrinsic-dimension/pf.intrinsic.min.js"></script>
<script async="" src="<?php echo TEMPLATE_DIR; ?>/picturefill-js/picturefill.min.js"></script>

ab Zeile 158 (index.php)=
echo '<div class="headerpicresponsive"><picture>
        <source srcset="'.TEMPLATE_DIR.'/header/header_testseite_5_1367x200.jpg" alt="Testseite" title="Testseite" media="(min-width: 1564px)">
        <source srcset="'.TEMPLATE_DIR.'/header/header_testseite_4_1024x200.jpg" alt="Testseite" title="Testseite" media="(min-width: 967px)">
        <source srcset="'.TEMPLATE_DIR.'/header/header_testseite_3_768x200.jpg" alt="Testseite" title="Testseite" media="(min-width: 768px)">       
        <source srcset="'.TEMPLATE_DIR.'/header/header_testseite_2_440x200.jpg" alt="Testseite" title="Testseite" media="(min-width: 440px)">
        <img srcset="'.TEMPLATE_DIR.'/header/header_testseite_1_250x200.jpg" alt="Testseite" title="Testseite">
        </picture></div> '

Hauptsächlich geht es mir ja darum das Ganze responsive zu machen. War natürlich nicht der Beste Weg...

Deine Lösung (Das Hintergrundbild über CSS einbinden) ist aber Super wenn unterschiedliche Bilder pro (Haupt-)Seite verwendet werden sollen, und das werde ich demnächst direkt mal testen, vielen Dank. Ist direkt mal gespeichert...

Die Geschichte mit dem Flexible CSS cover images verwendet ja auch wieder nur das eine Bild dafür, wenn ich das eben richtig erkannt habe.
Und da ist ja das Problem halt, das die Bilder bei der Verkleinerung unscharf werden, eher schlecht für ein Logo im Vordergrund. Allerdings werde ich das trotzdem mal testen.

Abschließend bedanke ich mich nochmals für Deinen tollen Beitrag. big_smile


Gruß Jörg

Offline

Liked by:

#8 12.01.2017 21:33:03

colinax
Member

Re: Generell: Responsive Headergrafik

better-work wrote:

Ja, genau der Internet Explorer und das Fallback Problem, daher habe ich Polyfill benutzt.

Hat das eigentlich einen bestimmten Grund, warum es (explizit) auch im IE funktionieren muss.

better-work wrote:

Deine Lösung (Das Hintergrundbild über CSS einbinden) ist aber Super wenn unterschiedliche Bilder pro (Haupt-)Seite verwendet werden sollen, und das werde ich demnächst direkt mal testen, vielen Dank. Ist direkt mal gespeichert...

Diese Methode ist einfach die ultimative universal Lösung und benötigt nur wenig HTML und CSS

better-work wrote:

Die Geschichte mit dem Flexible CSS cover images verwendet ja auch wieder nur das eine Bild dafür, wenn ich das eben richtig erkannt habe.

Es ist hier nur ein Bild drinnen, um es besser zu erklären. Das was du benötigst hat er mit einem anderen Begriff nur angschnitten aber es ist vorhanden. Der Grund dafür ist das es SEO technisch problematisch ist.

Der Grund dafür  ist, in der Anleitung wird (einfach gesagt) HTML 4 verwendet, wenn man das Ganze auf HTML 5(.1) umschreibt und das Polyfill verwendet. Geht wieder alles und auch ohne SEO Probleme.

better-work wrote:

Und da ist ja das Problem halt, das die Bilder bei der Verkleinerung unscharf werden, eher schlecht für ein Logo im Vordergrund.

Das ist je nach Bildschirmauflösung nicht vermeidbar, aber man kann es lösen und/oder kompensieren.

So wie es klingt ist das Logo fix in den Bildern drinnen oder?


Schick mir mal bitte den Link zur Seite, per PM, dann kann ich mir das ansehen und dir helfen.
Ich hatte schon einmal das Vergnügen als Auftrag sowas  Ähnliches zu machen, das Ganze auch noch einen Tick komplizierter, es musste innerhalb einer Slider-Show funktionieren.

Last edited by colinax (12.01.2017 21:33:25)

Offline

Liked by:

#9 13.01.2017 08:08:06

better-work
Member

Re: Generell: Responsive Headergrafik

Hallo colinax,

erst einmal wieder vielen Dank.

Diese Methode ist einfach die ultimative universal Lösung und benötigt nur wenig HTML und CSS

thumb_up thumb_up thumb_up

Der Grund dafür  ist, in der Anleitung wird (einfach gesagt) HTML 4 verwendet, wenn man das Ganze auf HTML 5(.1) umschreibt und das Polyfill verwendet. Geht wieder alles und auch ohne SEO Probleme.

Ich bin dann dem Link zu Codepen gefolgt... (https://codepen.io/necolas/pen/Aksni)

CSS verwendet= ".FlexEmbed--3by1:before"

Was ich entfernt habe ist=

/* background-position: 50%; */
Dadurch "klebt" das Hintergrundbild an der linken Seite, und wird auch in der mobilen Ansicht relativ gut skaliert.
Das Logo inkl. Text ist auf der linken Seite!

[== CSS ==]
/*! suit-flex-embed v1.4.0 | MIT License | github.com/suitcss */

.FlexEmbed {
  display: block;
  overflow: hidden;
  position: relative;
}

.FlexEmbed:before {
  content: "";
  display: block;
  width: 100%;
}

.FlexEmbed--3by1:before {
  padding-bottom: 33.33333%;
}

.FlexEmbed--2by1:before {
  padding-bottom: 50%;
}

.FlexEmbed--16by9:before {
  padding-bottom: 56.25%;
}

.FlexEmbed--4by3:before {
  padding-bottom: 75%;
}

.CoverImage {
  /* background-position: 50%; */
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto 1em;
  max-height: 200px;
  max-width: 1400px;
}

Es ist hier nur ein Bild drinnen, um es besser zu erklären. Das was du benötigst hat er mit einem anderen Begriff nur angschnitten aber es ist vorhanden. Der Grund dafür ist das es SEO technisch problematisch ist.

SEO Probleme möchte ich meinen Kunden selbstverständlich nicht bereiten.
Ich sende Dir den Link per PM zu...


Gruß Jörg

Offline

Board footer

Powered by FluxBB