neues Onepage-Template: fhs-sectionsOP - Tester?

[lck]

Musik geht ins Ohr - Webdesign geht manchmal ins Auge.

Hier kommt ein Vorschlag für ein neues Onepage-Template.
Interessenten und Spezialisten sollten es vielleicht mal auf Herz und Nieren püfen. Von innen und außen.

Preview: Demo und Download

Sehr schön Frank. Wieder - wie immer - gute saubere Arbeit! Super Präsentation, tolles Design, ausführliche Erklärung und Beispiele!

@Ludwig
Schau dir doch bitte mal die font-size-Deklaration für die Spotlight-Überschrift über dem ersten Bild an.
Das soll dafür sorgen, dass sich die Schriftgröße ohne @media-Abfrage anpasst.

Ja danke, das kannte ich bereits und habe dies auch schon irgendwo in meinen Templates verwendet.
„Fluid Typography“ das wird die Zukunft sein, bei all den Geräten dies es gibt. Macht es uns Template-Machern schon etwas leichter. Es gibt da sehr viele Ansätze und Ideen. Einen guten „Fluid font size calculator“ gibt's zum Beispiel hier und nebenher noch etliche andere Tools.

Danke für deine Arbeit!

[frase]

Ich verstehe nur nicht, wieso funktioniert dies nicht unter Responsivit't mit:
...
Hier wollte ich den "blank-block" etwa verkurzen, um den Rest der Seite näher hochzuschieben.

Du hast zwar den "blank-block" in der Größe verändert - der "swiper-container SW-1" bleibt aber immer auf 100vh.
In deinem Swiper-Set in der stylesheet.php müsste also irgendetwas ähnliches stehen, wie z.B.

Code: Select all

.<?=$sw_name;?> .swiper-wrapper {
    width: 100vw;
    height: calc(100vh - 100px);
}

Das gezeigte Beispiel berücksichtigt hier noch einen Header, der genau 100px hoch ist.
Das musst du dann noch um die @media-Angaben erweitern.
"blank-block" sollte sich einfach in der Höhe anpassen (so sollte es theoretisch sein).

[frase]

Danke für deine Arbeit!

Ich habe zu danken, für deine Aufmerksamkeit und Zeit!

Mich interessiert eben auch, ob das Template einigermaßen sinnvoll zu bedienen ist.
Ich selbst kann das gar nicht beurteilen. Ich hab's gemacht - für mich ist das (beinahe) simple.
Deshalb sind Rückmeldungen eben wichtig.

[Tata]

"blank-block" sollte sich einfach in der Höhe anpassen (so sollte es theoretisch sein).

Ich meine, dass es etwa so funtionieren sollte:
1. es ist ein Bild im Swiper, das sich der Breite anpasst, die Höhe ist automatisch kalkuliert.
2. der "blank-block" sollte dann diese neue Höhe übernehmen.
Die "vh" kann hier wohl nicht funktionieren (besonder nicht mit Mobiles, die meistens ein Ratio B:H etwa 1:3, oder auch mehr haben).
Es könnte aber möglich sein, falls alle benutzte Bilder die selbe Dimensionen haben. Dann könnte die Höhe in @media kalkuliert werden.
Das würde aber ein Script verlangen, der die Dimensionen bei jedem Gerät liest und kalkuliert. Wie das aber in @media einzubauen, ist mir absolut nicht bekannt.
Oder eben irgendwie einzustellen, dass der Rest der Seite sich immer glach nach dem "blank-block" einklebt. Man kann nicht wissen, wie hoch der Seitenheader seinn soll und er bleibt auch nicht immer z.B. 100px hoch sein. Anders gemeint - wird generell ein Bild von 1600x1200px benutzt, wird die Höhe mit @media screen and(width:800px) 600px. Wie sollte es aber mit @media screen and(max-width:800px) eingestellt?

[frase]

Ich meine, dass es etwa so funtionieren sollte:
...

Eigentlich gehört das alles nicht hierher
"blank-block" passt sich automatisch in der Höhe an den Swiper an.
"swiper-wrapper" bekommt 100vh als Standard.
Ab z.B. @media only screen and (max-width: 800px) bekommt der "swiper-wrapper" 90vh.
Ab @media only screen and (max-width: 600px) bekommt der "swiper-wrapper" 80vh.
usw.
Wenn du die Höhe des Headers brücksichtigen willst - und wenn dieser keine feste Höhe hat - dann kannst du das nur per Javascript machen.
Im Template fhs-simple-2019 findest du in der script.js die Funktion "mobNavHeight()".
Die kannst du als Vorlage verwenden, um die aktuelle Höhe des Headers zu berechnen und die Höhe des "swiper-wrapper" zu bestimmen.

[Tata]

Ich meine es anders gelösst zu haben. Ich habe die Höhe von "blank-block" in "vw" gegeben:

Code: Select all

div.blank-block{
  	position: relative;
	background-size: 100% cover;
	height: 70vw;
	width: 100%;
  	}

Ich bin nicht sicher, ob es "gramatisch" überhaupt richtig ist, aber es scheint zu funktionieren : https://cmsimple.sk/testtest
Nichts in swiper css geändert, kein Script benutzt. Nach meiner Logik wird die Höhe immer 70% der Breite. Braucht noch tiefer testen.

[frase]

Ich meine es anders gelösst zu haben.

Na super - wenn es funktioniert, wie du es dir wünschst.

[Tata]

Naja, es ist nicht perfekt. Es ist aber viel näher der ursprünglichen Vorstellung.

[frase]

Hi,
es gibt jetzt noch eine neue Vorschau-Version mit CMSimple_XH 1.7.5!

Im Download habe ich mal TinyMCE 5 als Standard-Editor mit einer eigenen Init-Datei für die Animationen aktiviert. (Diese Init-Datei liefert ein beinahe gleiches Menü im Editor, wie in TinyMCE 4.)

Ich hoffe, dass ich bei der Anhebung auf die neue XH-Version nichts kaputt gemacht habe. Wen's interessiert - mal reinschauen!

[knollsen]

Schaunmermal.
Ab dem TinyMCE 5 müssen die Init-Dateien im json-Format vorliegen.
Da musst du bei deinem Plugin auch was tun.
Ich habe versucht, eine solche Datei zu erzeugen - ohne Erfolg

Ja mach ich, aber soweit bin ich noch nicht. Die 1.7.4 ist erstmal php8 tauglich mit kleinen mod. Ich hab noch nicht mal 1.7.5 getestet.
Vielen Dank für den Tip!