Opening Image with Circles 1

Hier benutzen wir das WordPress Pattern „Opening Image with Circles 1“. Ursprünglich wurde das Design verwendet um, wie der Name es sagt, beim aufrufen der Seite sofort ein großes Bild zu zeigen. Im Folgenden versuchen wir euch bestmöglich die Gestaltungsmöglichkeiten aufzuzeichnen.

Verwendung als erstes Element auf der Seite

1. Unter Seite -> Template -> „page-openingMedia“ auswählen.
2. Unter Seite -> Design/Layout -> „Abstand zum Header deaktivieren“ anhaken.
3. Das „Opening Image with Circles 1“ Pattern oben auf der Seite einfügen.

Der Header ändert sich automatisch, um dem Bild mehr Gewicht zu geben. Ab dem ersten Scroll kommt der Standard Header mit dergewohnten Farbwahl zurück.
Beispiel siehe oben.

Verwendung irgendwo auf der Seite

Einfach im Verlauf der Seite das Pattern „Opening Image with Circles 1“ einfügen. Durch die Klasse „fullHeight“ auf dem Cover-Block (siehe Erweitert im Cover-Block) wird das Bild immer auf die volle Bildschirmhöhe skaliert. Im „page-openingMedia“ Template geschieht dies automatisch für den ersten Block (siehe oben).

Die Breite könnt Ihr gerne ändern über den Cover-Block. Im Standard ist diese auf „Gesamte Breite“ eingestellt.

Mit den Medieneinstellungen des Cover-Blocks könnt Ihr gerne noch etwas spielen. „Hintergrund fixiert“ ist quasi ein Paralax-Effekt (siehe unten).

Natürlich könnt Ihr auch etwas mit unseren ViewportAnimationen rumspielen, um dem Ganzen etwas mehr Bewegung zu geben.

Wenn ihr auf Seite -> Design/Layout -> „Abstand zum Footer deaktivieren“ anhakt, dann könnt Ihr das Pattern auch schön und ohne Abstand mit dem Footer abschließen. Dies wurde auf dieser Seite nicht aktiviert.

Das Problem mit der Bilddarstellung auf Mobilgeräten

Auf Mobilgeräten sehen die Bilder dann teilweise nicht mehr so gut aus, weil der sichtbare Teil des Bildes (Mitte/Mitte) ggf. nicht relevant ist. Hier behelfen wir uns derzeit mit einem Austausch der responsiven Bilder.

Beispiel für den Pfad der Bilder in der Mediathek. Hierbei gehen wir davon aus, dass das Bild folgenden Dateinamen har „testOpeningMediaResponsive.jpg“
Pfad: /wp-content/uploads/2023/09/testOpeningMediaResponsive.jpg
responisve Versionen von WordPress erzeugt:

• testOpeningMediaResponsive-150×150.jpg
• testOpeningMediaResponsive-300×150.jpg
• testOpeningMediaResponsive-768x384.jpg (Handy Portrait-Modus)
• testOpeningMediaResponsive-1024x512.jpg (Handy Portrait-Modus)
• testOpeningMediaResponsive-1536x768.jpg (Tablet Portrait-Modus)

Die rot markierten Pixelwerte weichen je nach Bildformat ab (es ist die Höhe).
Die Bilder „Handy Portrait Modus“ und „Tablet Portrait Modus“ überschreiben wir nun mit von uns neu erstellten Bildern (Dateinamen beibehalten). Dafür nehmen wir

Handy Portrait Modus: 400px * 900px
Tablet Portrait Modus: 800px * 1200px

Die Bilder werden nur nachgeladen wenn sich der Bildbereich verbreitert, nicht wenn er schmaller wird. Ergo wird das Bild ausgetauscht, wenn man das Handy vom Portrait-Modus in den Landscape-Modus wechselt.

Hinweise:

Wer hätte es gedacht, wenn man sich den vorherigen Punkt ansieht (Bilder für mobile Endgeräte) – Sehr wahrscheinlich kommt man bei diesem Pattern an den Punkt, wo man nur mit CSS noch seine Wünsche erfüllen kann. Dann ist natürlich Schluß für den Laien… Meine Telefonnummer und Mail findet Ihr ganz sicher hier irgendwo :).
Vielleicht schreib ich irgendwann mal einen Block der es etwas einfacher macht.