WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

Du bist nicht angemeldet.

#1 11.01.2017 17:09:15

better-work
Mitglied

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
Administrator

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.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#3 11.01.2017 20:54:12

better-work
Mitglied

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
Gast

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.

#5 12.01.2017 11:02:31

better-work
Mitglied

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
Developer

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. 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/

Beitrag geändert von colinax (19.01.2017 13:33:11)

Offline

Liked by:

florian, better-work

#7 12.01.2017 18:43:43

better-work
Mitglied

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:

florian

#8 12.01.2017 21:33:03

colinax
Developer

Re: Generell: Responsive Headergrafik

better-work schrieb:

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 schrieb:

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 schrieb:

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 schrieb:

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.

Beitrag geändert von colinax (12.01.2017 21:33:25)

Offline

Liked by:

better-work

#9 13.01.2017 08:08:06

better-work
Mitglied

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

#10 19.01.2017 14:05:18

colinax
Developer

Re: Generell: Responsive Headergrafik

Hallo better-work,

ein responsives Hintergrundbild als img / picture element einfügen welches per PageID geladen wird und über das BE bearbeitet werden soll, geht schon, man benötigt dafür die Droplets:

Der Code für's Droplet:

$rv  = '<picture>';
$rv .= '<source scrset="'.WB_URL.'/media/hero_small/'.PAGE_ID.'.jpg" />';
$rv .= '<source media="(min-width: 800px)" srcset="'.WB_URL.'/media/hero_big/'.PAGE_ID.'.jpg" />';
$rv .= '<img src="'.WB_URL.'/media/hero_small/'.PAGE_ID.'.jpg" alt="Bild">';
$rv .= '</picture>';
return $rv;
florian schrieb:

Wenn Du das im Backend brauchst, kannst Du Dir ein Droplet dafür erstellen. Nenne es z.B. pict und füge den Code ein.

In der Seite im CKeditor fügst Du dann einfach [[pict]] ein. Der CKE fügt leider standardmäßig <p></p> drumherum ein, das kannst Du entweder umgehen, indem Du den "Absatz" mit [[pict]] als "Normal (DIV)" formatierst oder zusätzlich das Droplet pclean importierst (Droplets -> Import) und am Ende des Templates mit [[pclean]] aufrufst.

Das selbe lässt sich auch in Template direkt reinschreiben, der Code dafür lautet:

<picture>
<source scrset="<?php echo WB_URL.'/media/hero_small/'.PAGE_ID; ?>.jpg" />
<source media="(min-width: 500px)" srcset="<?php echo WB_URL.'/media/hero_big/'.PAGE_ID ?>.jpg" />
<img src="<?php echo WB_URL.'/media/hero_small/'.PAGE_ID; ?>.jpg" alt="Bild">
</picture>


Dan dieser Stelle noch eine Danke an florian und stefanek.

LG Colinax

Beitrag geändert von colinax (19.01.2017 14:05:41)

Offline

Liked by:

better-work

#11 19.01.2017 22:14:00

better-work
Mitglied

Re: Generell: Responsive Headergrafik

@Colinax

ganz großes Kino, vielen Dank.
Ich würde generell zur Template Variante tendieren.

Der CKE fügt leider standardmäßig <p></p> drumherum ein

Dieses Verhalten kannst Du allerdings abschalten indem Du in der wb_ckconfig.js Nachfolgendes änderst:

[== JavaScript ==]
 // Sets the behavior for the ENTER key. Default is _P allowed tags: _P | _BR | _DIV
von
config.enterMode = CKEDITOR.ENTER_P;
zu
config.enterMode = CKEDITOR.ENTER_BR;

Ungetestet, sollte jedoch funktionieren!

Nochmals vielen Dank für Deine Arbeit.


Gruß Jörg

Offline

#12 19.01.2017 22:51:07

colinax
Developer

Re: Generell: Responsive Headergrafik

better-work schrieb:

Der CKE fügt leider standardmäßig <p></p> drumherum ein

Dieses Verhalten kannst Du allerdings abschalten indem Du in der wb_ckconfig.js Nachfolgendes änderst:

[== JavaScript ==]
 // Sets the behavior for the ENTER key. Default is _P allowed tags: _P | _BR | _DIV
von
config.enterMode = CKEDITOR.ENTER_P;
zu
config.enterMode = CKEDITOR.ENTER_BR;

Ungetestet, sollte jedoch funktionieren!

Nochmals vielen Dank für Deine Arbeit.

Ja in der Theorie schon, ich habe ja den CKEditor auf 4.5.11 aktualisiert, von da weis ich auch das einige der Einstellungen für den Editor obsolet geworden sind, aber noch benötigt werden um die Funktion in WBCE zugewährleisten.

Des Weiteren rate ich von dieser Änderung ab, da es auch ganz normalen Text betrifft und die <p></p> Tags nicht mehr automatisch zugewiesen werden. Da dies vom normalen Verhalten abweicht ist es nicht mehr DAU sicher.

Offline

#13 19.01.2017 23:17:13

better-work
Mitglied

Re: Generell: Responsive Headergrafik

Des Weiteren rate ich von dieser Änderung ab, da es auch ganz normalen Text betrifft und die <p></p> Tags nicht mehr automatisch zugewiesen werden. Da dies vom normalen Verhalten abweicht ist es nicht mehr DAU sicher.

Ja, das ist ein Argument...


Gruß Jörg

Offline

#14 19.01.2017 23:22:37

stefanek
Developer

Re: Generell: Responsive Headergrafik

Der CKE fügt leider standardmäßig <p></p> drumherum ein

Für die WBCE Version 1.2 wurde dieses Verhalten abgestellt, heißt: um die Droplets herum wird das p Element nicht mehr ausgegeben, sondern wird ausgefiltert:
https://github.com/WBCE/WebsiteBaker_Co … ts.php#L14

Wenn Du es jetzt schon haben willst, musst Du die obige Datei austauschen, schon geht es.

Christian


“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

Offline

Liked by:

colinax, better-work

#15 20.01.2017 01:34:30

florian
Administrator

Re: Generell: Responsive Headergrafik

Offtopic: der cke 4.5.11 in wbce 1.2 funktioniert noch nicht zuverlässig, er friert ein, sobald auf die buttons für wblink oder droplet einfügen geklickt wird. Gibt schon ein Issue auf Github dafür, aber noch keine Lösung.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#16 20.01.2017 10:13:07

better-work
Mitglied

Re: Generell: Responsive Headergrafik

@Colinax

Ich habe jetzt Dein Beispiel mal "Offline" nachgebaut.

Um die Größen zu verdeutlichen, sind die Grafiken entsprechend benannt.
Funktioniert das denn mit mehr als 2 Grafiken?
Die große Grafik (head_1400x200.jpg) wird nämlich ignoriert, oder habe ich hier einen Denkfehler drin?

Zu Deutsch ab 800 Pixel Größe wird leider nicht umgeschaltet!

[== HTML ==]
<picture>
<source scrset="media/header/small/head_440x200.jpg" />
<source media="(min-width: 500px)" srcset="media/header/medium/head_768x200.jpg" />
<source media="(min-width: 800px)" srcset="media/header/big/head_1400x200.jpg" />
<img src="media/header/small/head_440x200.jpg" alt="Bild oben" title="Bild oben">
</picture>

<br>
<br>

<div>
<picture>
<source scrset="media/header/small/head_440x200.jpg" />
<source media="(min-width: 500px)" srcset="media/header/medium/head_768x200.jpg" />
<source media="(min-width: 800px)" srcset="media/header/big/head_1400x200.jpg" />
<img src="media/header/small/head_440x200.jpg" alt="Bild unten" title="Bild unten">
</picture>
</div>

Über eine Erhellung würde ich mich freuen...


Gruß Jörg

Offline

#17 20.01.2017 22:54:30

colinax
Developer

Re: Generell: Responsive Headergrafik

better-work schrieb:

Funktioniert das denn mit mehr als 2 Grafiken?
Die große Grafik (head_1400x200.jpg) wird nämlich ignoriert, oder habe ich hier einen Denkfehler drin?

Zu Deutsch ab 800 Pixel Größe wird leider nicht umgeschaltet!

Über eine Erhellung würde ich mich freuen...

Wie es aus sieht sind maximal 2 Sources möglich
(getestet)

<picture>
  <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="examples/images/art-large.jpg" media="(min-width: 800px)">
  <img srcset="examples/images/art-medium.jpg" alt="…">
</picture>

man mann aber auch für z. B. Retina Bildschirme eine noch höhere Auflösung hinzufügen
(nicht getestet)

<picture>
  <source srcset="examples/images/large.jpg, examples/images/extralarge.jpg 2x" media="(min-width: 800px)">
  <img srcset="examples/images/small.jpg, examples/images/medium.jpg 2x" alt="…">
</picture>

<picture>
    <source srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x">
    <img alt="A rad wolf" src="pic1x.jpg" width="500" height="500">
</picture>

Weitere hilfreiche Links:
https://liechtenecker.at/das-picture-element/
http://scottjehl.github.io/picturefill/

Offline

Liked by:

better-work

#18 21.01.2017 10:17:06

better-work
Mitglied

Re: Generell: Responsive Headergrafik

Wow, vielen Dank für Deine tolle Arbeit.
Ich werde mir Deine Links auch noch einmal in Ruhe ansehen.
Wenn ich eine fertige Lösung erarbeitet habe, poste ich Sie dann hier selbstverständlich für Alle.

In diesem Sinne wünsche ich zunächst einmal ein schönes Wochenende.

big_smile  big_smile  big_smile


Gruß Jörg

Offline

Fußzeile des Forums

up