Header, Background & Footer slider/wechselnd

florian · 03.03.2017 20:39:33

Zu den Teaserbildern hilft Dir vielleicht das hier weiter

jonny · 03.03.2017 20:49:31

Das ich das ähnlich habe wie du mir beim sobresot gemacht hast? smile

Das einzige was ich auch noch versuchen muss einzubauen ist den Hintergrund big_smile

florian · 03.03.2017 20:53:09

Häh? Nein, der o.g. Link ins WebsiteBaker-Forum erklärt, wie Du den Inhalt der Einzelteaser auf der Startseite bearbeiten kannst.
Wie das mit den Bildwechsel im Seitenkopf geht und ob sich ein Footer mit Wechsel wie in Sobresot sowie Hintergrundbildwechsel da so ohne weiteres einbauen lassen, weiß ich gerade nicht.

jonny · 03.03.2017 20:56:37

Ich meinte den background da ich ja viele verschieden farben habe im Background welche auch abwechseln, konnte den Forumpost nur überfliegen big_smile

Wenn das dort beschrieben ist, wie ich die Bilderwechsel im Background machen kann dann tuts mir leid für den vorderen Kommi smile

Vielleicht find ichs mit ein bisschen rumprobieren heraus wie ich das mit dem Footer & heaer hinbekomme smile

florian · 03.03.2017 20:59:17

Wechselnde Farben im Hintergrund gehen auch mit CSS3
https://www.gradient-animator.com/

jonny · 03.03.2017 21:00:01

Ahh sähr guut big_smile

Das macht mal einen punkt weniger zum frickeln

jonny · 04.03.2017 15:37:16

Ich habe ein problem, mein Footer ist verschwunden und auf dem Mobile sehe ich mein Header nicht mehr, woran kann das liegen? sad

florian · 04.03.2017 15:51:06

Verschwundener Footer: Der Link zum Backstretch-Script fehlt
Flexslider: wird laut style.css, Zeile 284 bei <768px auf display:none gesetzt

jonny · 04.03.2017 16:36:43

Ich danke smile

Wenn ich nun einen zweiten footer wie oben nur mit anderen Bildern einsetzen will, müsste ich ein zweites Script anlegen und den identischen Link wie beim header einfügen nehme ich an oder liege ich da falsch?

jonny · 05.03.2017 23:30:10

Wie würdest du es Lösen, das ich im footer einen gleichen Bildwechsel wie oben erziele halt nur mit einem Ordner footer Pics?

florian · 06.03.2017 09:05:36

Das hatte ich doch hier
https://forum.wbce.org/viewtopic.php?pid=9624#p9624
schon gezeigt.
Wenn Du unterschiedliche Bilder je nach Seite verwenden willst, ist PAGE_ID hilfreich. Du kannst dann entweder für jede Seite ein Unterverzeichnis anlegen und die Bilder da rausziehen oder das über den Dateinamen lösen. Die PAGE_ID fragst Du mit <?php echo PAGE_ID; ?> ab.

jonny · 06.03.2017 21:15:48

Ich habe versucht es so einzubinden wie du mir schonmal erklärt hattest aber das hat leider nicht geklappt erschien kein Footer, speziell ist jetzt auch, das die Bilder im Header Random erscheinen bei jedem Seitenwechsel.

Wenn das nun beim Footer auch so ist, aber ein nicht passendes Bild im Footer erscheint, ist das dann etwas komisch..

Was für ein Code muss ich im Footer einfügen, das ich einen Seperaten Ordner ansteuern kann mit den Footerbildern und das sie synchron zum Header laufen?

florian · 06.03.2017 23:45:49

Ist nicht trivial, aber auch nicht so kompliziert; ich bin nur heute nicht mehr dazu in der Lage, Dir das zu erklären. Ich schreibe morgen was dazu, wenn ich dazu komme.
Du kannst Dir schon mal den Code aus dem WBCE-Template für die Darstellung des Heroimages anschauen, vielleicht bringt Dich das ja schon selbst auf die richtige Spur:

<?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) {
    ?>
<style type="text/css">
.hero {
	background-image:url(<?php echo WB_URL . '/media/heroimages/hero_' . $headerbild_id . '.jpg';?>);
}
</style>

<?php
echo "\n<!--WB_URL: " . WB_URL . " - PARENT: " . PARENT . " - PAGE_ID: " . PAGE_ID . " - Headerbild: " . $headerbild_id . " -->";
}
?>

Beitrag geändert von florian (06.03.2017 23:46:49)

jonny · 07.03.2017 00:03:00

Dankee smile Falls ichs hinkriege schreibe ich das noch heute abend rein falls nicht, schreib ich es auch rein smile

jonny · 07.03.2017 02:08:58

Habe die url's angepasst, in den Footer gepackt, das dann auf die richtige directory aber das hat nicht funktioniert leider ich habs glaube ich vermurkst.. sad

florian · 07.03.2017 09:28:06

So, hier.
1) Lege ein Verzeichnis in /media namens slides an.
2) Lege in diesem für jede Seite, auf der Du Slides anzeigen willst, ein Unterverzeichnis an, das einfach nur so heißt wie die Page-ID, also 1, 7, 10 usw.
Du brauchst nicht für jede Unterseite ein Verzeichnis anzulegen. Das aufgebohrte Template prüft, ob Bilder vorhanden sind, und nimmt
- entweder die Bilder aus dem Verzeichnis mit der ID der aktuellen Seite,
- oder die Bilder aus dem Verzeichnis mit der ID der übergeordneten Seite der gerade ausgewählten Seite,
- oder lädt das ganze Backstretch-Zeug gar nicht erst.

3) In diese Verzeichnisse lädst Du jeweils die gewünschten Dateien, die wie folgt zu benennen sind:
h1.jpg
h2.jpg
h3.jpg
für die Headerbilder
f1.jpg
f2.jpg
f3.jpg
für die Footerbilder
b1.jpg
b2.jpg
b3.jpg
für die Hintergründe.

Das Vorhandensein von h1.jpg ist Indikator für die Verwendung des jeweiligen Verzeichnisses. In der nachfolgend vorgestellen Implementierung müssen die anderen Bilder, und nicht mehr und nicht weniger, so vorhanden sein. (Natürlich ließe sich das mit etwas Coden noch weiter automatisieren.)

Im Template kannst Du nun den Flexslider im Header entfernen, wir verwenden den nicht. D.h. ändere die Zeilen

<div class="header">
	<?php 
	if ($page_content_3 != '') { 
		echo $page_content_3; 
	} else {
		if ( !isset($page_id) OR ( isset($template_id) AND $page_id==4) ) {
			include('flexslider.php'); 
		 } else {
			echo '<div class="innerheader"></div>';
		 }
		 echo '<a href="'.WB_URL.'"><img class="logopic" src="'.TEMPLATE_DIR.'/img/logo.png" alt="" /></a>';
	}
	 ?>
	 <div style="clear:left;"></div>
	 </div>

zu

<div class="header">
	<div class="innerheader"></div>
	<a href="<?php echo WB_URL; ?>"><img class="logopic" src="<?php echo TEMPLATE_DIR; ?>/img/logo.png" alt="" /></a>
	 <div style="clear:left;"></div>
	 </div>

Füge nun noch am Ende des Templates vor </body> den folgenden Code ein. Was es damit jeweils auf sich hat, steht in den Kommentaren:

<?php

/* Initialisierung der Variable fuer das Verzeichnis, in dem nach Bildern gesucht werden soll */
$dir     = "1"; 

/* Schalter, ob Hintergrundslider verwendet werden sollen, erstmal: nein */
$takeit  = false; 

/* Der Pfad auf dem Server zu den Dateien fuer die Pruefung auf deren Vorhandensein */
$pixpath = WB_PATH . '/media/slides/'; 

/* Die URL der Dateien fuer den Aufruf im Slider */
$pixurl  = WB_URL . '/media/slides/';

/* Erste Pruefung: Seite ist auf der obersten Ebene (keine Unterseite) */
if (PARENT == 0) {
    if (file_exists($pixpath . PAGE_ID . '/h1.jpg')) {
        $dir = PAGE_ID;
        $takeit = true;
    }
} else {
	/* Zweite Pruefung: Seite ist eine Unterseite. Gibt es Bilder mit der ID der Elternseite? Dann verwende eventuell diese. */
    if (file_exists($pixpath . PARENT . '/h1.jpg')) {
        $dir = PARENT;
        $takeit = true;
    }
	/* Dritte Pruefung: Seite ist eine Unterseite. Gibt es Bilder mit der ID der Seite? Da diese Pruefung nach der Pruefung auf Eltern-ID-Bilder erfolgt, werden bei Erfolg diese Bilder verwendet. */
    if (file_exists($pixpath . PAGE_ID . '/h1.jpg')) {
        $dir = PAGE_ID;
        $takeit = true;
    }
}

/* Wurden irgendwelche verwendbaren Bilder gefunden? Dann lade Backstretch und initialisiere die Slider */
if ($takeit == true) {
?>	
<!-- Lade des Backstretch-Script. Muss im Template-Verzeichnis vorhanden sein! -->
<script type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>/jquery.backstretch.min.js"></script>

<script type="text/javascript">
/* Bildwechsel im Hintergrund */
$.backstretch([
          "<?php echo $pixurl.$dir; ?>/b1.jpg",
          "<?php echo $pixurl.$dir; ?>/b2.jpg",
          "<?php echo $pixurl.$dir; ?>/b3.jpg"
        ], {
            fade: 750,
            duration: 4000
        });
	
/*Bildwechsel im Seitenkopf */
	 $(".innerheader").backstretch([
          "<?php echo $pixurl.$dir; ?>/h1.jpg",
          "<?php echo $pixurl.$dir; ?>/h2.jpg",
          "<?php echo $pixurl.$dir; ?>/h3.jpg"
        ], {
            fade: 750,
            duration: 4000
        });

/* Bildwechsel im Footer */		
		 $(".footer").backstretch([
          "<?php echo $pixurl.$dir; ?>/f1.jpg",
          "<?php echo $pixurl.$dir; ?>/f2.jpg",
          "<?php echo $pixurl.$dir; ?>/f3.jpg"
        ], {
            fade: 750,
            duration: 4000
        });
</script>
<?php } 
else {
	/* Nichts gefunden? Dann schreibe einen Kommentar zur Problemsuche in den Sourcecode. Andere Fallbacks sind natuerlich auch moeglich. */
	echo '<!-- '.$pixurl.$dir.'/h1.jpg nicht vorhanden -->';
}
?>

jonny · 07.03.2017 10:25:38

Also ich habe alle regeln beachtet, aber ich bin nicht mal fähig etwas per copy Paste einzufügen habe ich das gefühl..

Kannst du mal schauen was ich falsch gmeacht habe?

wymann-storentechnik.ch

florian · 07.03.2017 11:05:06

Ich habs jetzt hinbekommen. Du hattest Punkte 1, 2 und 3 nicht beachtet, deshalb sind da jetzt die Katzenbilder.
Irgendwie stand auch noch der Code, den ich gestern Abend nur als BEISPIEL und nicht zum Übernehmen gepostet hatte, im Template, und ein </div> war nicht geschlossen.

Außerdem kann es sein, dass Backstretch mit jQuery 1.7.1 nicht zurecht kommt, deshalb habe ich da 1.8.3 eingebaut.

Beitrag geändert von florian (07.03.2017 11:09:05)

jonny · 07.03.2017 11:08:38

Oke, das komische ist aber nun, wenn man auf Impressum & Datenschutz geht erscheinen die Bilder nicht mehr, war das nicht bei jemand anderem schon der Fall?

florian · 07.03.2017 11:10:01

Für Impressum und Datenschutz (ID 13, 14) sind keine Bilder hinterlegt.

jonny · 07.03.2017 11:22:44

Achso, das heisst für jede Oberseite muss zwingend ein Ordner angelegt werden, aber für die Unterseiten nicht zwangsläufig?

florian · 07.03.2017 11:29:17

Ich hab das jetzt so geändert:
Sind Bilder zur Page-ID vorhanden?
JA: nimm diese
NEIN: Prüfe: Sind Bilder zur übergeordneten Seite vorhanden?
JA: nimm diese
NEIN: Nimm die Bilder aus /1/

jonny · 08.03.2017 18:38:01

Es hat geklappt, aber die einzige Frage die mir noch gebliben ist, weil ichs unterwegs gemerkt habe: Kann ich den befehl machen, a,b&c gleichzeigtig laden und nicht starten bevor alle 3 komponenten bereit sind?

Momentan lädt der Header footer und backgr. manchmal unabhängig voneinander und dann geht beispielsweise bei background bild 2 schon rein obwohl beim header bild2 von der Dauer her noch nichtfertig ist

florian · 08.03.2017 19:08:35

Das Problem ist mir noch nie aufgefallen. Eine unmittelbare Lösung dafür gibt es m.E. nicht, Du kannst höchstens versuchen, die Dateigröße der einzelnen Elemente so weit wie möglich zu reduzieren.

WBCE CMS Forum

#26 03.03.2017 20:39:33

Re: Header, Background & Footer slider/wechselnd

#27 03.03.2017 20:49:31

Re: Header, Background & Footer slider/wechselnd

#28 03.03.2017 20:53:09

Re: Header, Background & Footer slider/wechselnd

#29 03.03.2017 20:56:37

Re: Header, Background & Footer slider/wechselnd

#30 03.03.2017 20:59:17

Re: Header, Background & Footer slider/wechselnd

#31 03.03.2017 21:00:01

Re: Header, Background & Footer slider/wechselnd

#32 04.03.2017 15:37:16

Re: Header, Background & Footer slider/wechselnd

#33 04.03.2017 15:51:06

Re: Header, Background & Footer slider/wechselnd

#34 04.03.2017 16:36:43

Re: Header, Background & Footer slider/wechselnd

#35 05.03.2017 23:30:10

Re: Header, Background & Footer slider/wechselnd

#36 06.03.2017 09:05:36

Re: Header, Background & Footer slider/wechselnd

#37 06.03.2017 21:15:48

Re: Header, Background & Footer slider/wechselnd

#38 06.03.2017 23:45:49

Re: Header, Background & Footer slider/wechselnd

#39 07.03.2017 00:03:00

Re: Header, Background & Footer slider/wechselnd

#40 07.03.2017 02:08:58

Re: Header, Background & Footer slider/wechselnd

#41 07.03.2017 09:28:06

Re: Header, Background & Footer slider/wechselnd

#42 07.03.2017 10:25:38

Re: Header, Background & Footer slider/wechselnd

#43 07.03.2017 11:05:06

Re: Header, Background & Footer slider/wechselnd

#44 07.03.2017 11:08:38

Re: Header, Background & Footer slider/wechselnd

#45 07.03.2017 11:10:01

Re: Header, Background & Footer slider/wechselnd

#46 07.03.2017 11:22:44

Re: Header, Background & Footer slider/wechselnd

#47 07.03.2017 11:29:17

Re: Header, Background & Footer slider/wechselnd

#48 08.03.2017 18:38:01

Re: Header, Background & Footer slider/wechselnd

#49 08.03.2017 19:08:35

Re: Header, Background & Footer slider/wechselnd

Fußzeile des Forums