Section Hintergrundbild in Oxygen optimal einstellen

 

Wenn man ein normales Hintergrundbild in eine Oxygen-Sektion einfügt, dann hat dies den Nachteil, dass die Ladegeschwindigkeit der Seite negativ beeinflusst wird.

Besser:

  • normales Foto in die Sektion einfügen
  • die Sektion als Position „relative“ setzen & „Overflow hidden“
  • das Foto als Position „absolut“ setzen & Top, Bottom, Left, Right-Abstand auf 0 / 0 / 0 / 0
  • Breite des Fotos auf 100% / Höhe „auto“
  • Object Fit: „cover“
  • (Object Position 50% -100px)
  • Auflösung des Fotos auf 1920 oder eventuell noch weniger – einfach ausprobieren
  • (Z-Index = 0) Hinweis: Anzeigefehler im Backend 😜 
  • Soll eine Überschrift oder sonstiges über dem Foto erscheinen, dann mit Z-index arbeiten
The following code will register custom image sizes and make them usable in both Oxygen and Gutenberg. It’s recommended to place the code in the Code Snippets plugin.
add_image_size( 'image-480', 480, 9999 );
add_image_size( 'image-640', 640, 9999 );
add_image_size( 'image-720', 720, 9999 );
add_image_size( 'image-960', 960, 9999 );
add_image_size( 'image-1168', 1168, 9999 );
add_image_size( 'image-1440', 1440, 9999 );
add_image_size( 'image-1920', 1920, 9999 );

function my_custom_sizes( $sizes ) {
	return array_merge( $sizes, array(
		'image-480' => 'image-480',
		'image-640' => 'image-640',
		'image-720' => 'image-720',
		'image-960' => 'image-960',
		'image-1168' => 'image-1168',
		'image-1440' => 'image-1440',
		'image-1920' => 'image-1920',
	) );
}
add_filter( 'image_size_names_choose', 'my_custom_sizes' );
Note: You will need to use the Regenerate Thumbnails Advanced plugin to regenerate all the images in your media gallery at the various sizes before you’re able to use the new sizes.