WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 09.04.2023 12:16:04

musenfreund
Member

Hintergrund-Grafik (Vollflächig, statisch)

Hallo, ich nutze das Frontend-Template elafeknes und suche eine Möglichkeit für jede Seite eine statische vollflächige Hintegrundgrafik einzubinden. Bisher habe ich keine Einstellmöglichkeit dafür gefunden. Deswegen zweckentfremde ich momentan das Modul Background Slider dafür, aber lässt sich mein Anliegen nicht auch ohne diesen Umweg umsetzen?

Vielen Dank, musenfreund

Offline

#2 09.04.2023 15:44:29

florian
Administrator

Re: Hintergrund-Grafik (Vollflächig, statisch)

Du könntest in der /templates/elafeknes/index.php vor </head> einfügen:

<style>
  body {
    background-image:url(<?=WB_URL?>/media/hintergrund_<?=PAGE_ID?>.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;
  }
  </style>

und dann im Medienverzeichnis für jede Seite das gewünschte Hintergrundbild ablegen.
Also Seite mit der ID 2 => hintergrund_2.jpg usw.


Nicht ärgern. Nur wundern.

Offline

#3 09.04.2023 20:26:22

musenfreund
Member

Re: Hintergrund-Grafik (Vollflächig, statisch)

Ja, das funktioniert schon mal super! smile Danke.

Bei dieser Methode ergibt sich (mit einer 16Mbit-Leitung / aktuell realen ca. 11Mbit) beim ersten Aufruf der Seite ein Abrolleffekt, also einen sichtbaren Aufbauvorgang der Grafiken (ca 300kB/Grafik).
Kann man die Grafiken aller (5) Seiten vorladen, um diesen Effekt nur einmal sehen zu müssen oder idealerweise ganz zu vermeiden?

Beim Weg über Modul Background Slider gab es diesen Effekt nicht.

Offline

#4 10.04.2023 08:51:42

florian
Administrator

Re: Hintergrund-Grafik (Vollflächig, statisch)

Du könntest gemäß dieser Anleitung eine Ladeanimation einbauen.

D.h. in der /templates/elefaknes/index.php direkt nach <body> einfügen:

<div id="loader">
</div>

Und am Ende, vor </script>:

$(window).load(function(){
	$("#loader").fadeOut("slow");
});

in der /templates/elefaknes/styles.css

#loader{
	z-index:999999;
	display:block;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(loader.gif) 50% 50% no-repeat #cccccc; 
}

Die loader.gif nach /templates/elefaknes hochladen.

Eventuell auch noch mit tinyjpg die Größe der Hintergrundbilder reduzieren/optimieren.


--------------------------------------------------
<semi-offtopic>
Mir ist aufgefallen, dass im elefaknes-Template noch Reste vom Lesefaken-Template sind, die da gar nicht mehr benötigt werden. Gelöscht werden kann:
im <head>

<script type="text/javascript" src="<?php echo TEMPLATE_DIR;?>/jquery.backstretch.min.js"></script>

und

 <?php
$headerbild_id = "0";
$takeit=false;

if (file_exists(WB_PATH . '/media/headerbilder/header_0.jpg')) {
        $headerbild_id = 0;
        $takeit = true;
    }

if (PARENT == 0) {
    if (file_exists(WB_PATH . '/media/headerbilder/header_' . PAGE_ID . '.jpg')) {
        $headerbild_id = PAGE_ID;
        $takeit = true;
    }
} else {
    if (file_exists(WB_PATH . '/media/headerbilder/header_' . PARENT . '.jpg')) {
        $headerbild_id = PARENT;
        $takeit = true;
    }
    if (file_exists(WB_PATH . '/media/headerbilder/header_' . PAGE_ID . '.jpg')) {
        $headerbild_id = PAGE_ID;
        $takeit = true;
    }
}

    ?>

und ganz am Ende

<?php if ($takeit==true) { ?>
<script>
	    $(".schmuckbild").backstretch(["<?php echo WB_URL . '/media/headerbilder/header_' . $headerbild_id . '.jpg';?>"]);
</script>
<?php } ?>

</semi-offtopic>

Last edited by florian (10.04.2023 08:53:56)


Nicht ärgern. Nur wundern.

Offline

#5 10.04.2023 08:53:59

berny
Member

Re: Hintergrund-Grafik (Vollflächig, statisch)

Also, da hat es was anderes
Bild ist Bild, das hat nichts mit dem css style zu tun.
300kb bei 11mbit müsste sofort da sein.

Florian war wieder mal schneller, und das am Ostermontag !!!

Last edited by berny (10.04.2023 08:55:56)

Offline

#6 10.04.2023 13:42:17

musenfreund
Member

Re: Hintergrund-Grafik (Vollflächig, statisch)

Vielen Dank für die Idee mit der Loaderanzeige - allerdings ist das nicht das was ich suche. Mir ging es darum, diese seltsame Ladeverzögerung wegzubekommen.
Wie berny denke ich auch, dass es eigentlich nicht an den Grafiken bzw. ihrer Größe liegen kann. Zumal sie ja beim Umweg über Background Slider (mit den identischen Grafiken) auch nicht da war.

Danke auch für die Hinweise zum Template, ich hab die entsprechenden Bereiche auskommmentiert. Gefühlt luden die Grafiken danach minimal schneller, aber das kann auch Wunschdenken sein.  wink

Offline

Board footer

up