Template with horizontal menu and different "cover photos" for each page

[bastingse]

Hi Guys,

I'm using this template 'JekyllAndHyde' and i want a different header image on each page (exept the home page).
Can this be done with the morepagedata plugin??

I added this code right above the head to the template:

Code: Select all

<style type="text/css"><?php   // here the css-definition is called, and php will generate it
    if(isset($headimage)) {    // i.e.: if a $headimage value has been entered via page data tab, do this
        echo '#head {background-image:url(' . $pth['folder']['template']
        . $plugin_cf['morepagedata']['path_template_images'] . $headimage . ');}';
    }
    if(isset($bgcolor)) {
        echo '#body {background-color:'.$bgcolor.';}';
    }
    if(isset($width)) {        // $width in this example is type "checkbox", so its value is only on (=set) or off
        echo '#content {width:650px;}';
    }
?></style>


</head>

This is the css for the headerimage

Code: Select all

#lck_head {
	background-color: #2a2a2a;
	background: url(images/bg.jpg) 50% 0 no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	display: table;
	height: 33%;
	height: 33vh;
	margin: 0;
	min-height: 230px;
	padding: 0;
	width: 100%;
}

I wonder if this can be done......???
Any help is much appreciated!!

[lck]

I wonder if this can be done......???

1) template.htm vor </head> einfügen

Code: Select all

<style><?php // hier wird die CSS-Definition aufgerufen, und PHP wird sie erzeugen
    if(isset($headimage)) { // d.h.: wenn $headimage einen Wert hat, tue folgendes
        echo '#lck_head {background-image:url(' . $pth['folder']['template']
        . $plugin_cf['morepagedata']['path_template_images'] . $headimage . ');}';
    }
?></style>

2) ./templates/jekyllandhyde/images
- Ordner anlegen "headerimages" und dort hinein deine Headerbilder legen

3) Backend Morepagedata
a) Einstellungen, eintragen unter:
Anzeige (Beispiel): Header-images
Variablenname: $headimage
Typ: template_image

b) Morepagedata > Konfiguration eintragen bei:
Template images: images/headerimages/
(* Wenn deine Header-images im Ordner ./templates/jekyllandhyde/images sind, dann hier images/ verwenden.)

4) stylesheet.css (Änderungen nicht zwingend notwendig aber empfehlenswert)
a) suchen nach (~Zeile 254):

Code: Select all

#lck_head {
	background-color: #2a2a2a;
	background: url(images/bg.jpg) 50% 0 no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	display: table;
	height: 33%;
	height: 33vh;
	margin: 0;
	min-height: 230px;
	padding: 0;
	width: 100%;
}

ändern zu:

Code: Select all

#lck_head {
	background-color: #2a2a2a;
	background-position: 50% 0;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	display: table;
	height: 33%;
	height: 33vh;
	margin: 0;
	min-height: 230px;
	padding: 0;
	width: 100%;
}

b) suchen nach und komplett löschen (~Zeile 1053):

Code: Select all

#lck_head {
	background: url(images/bg_mobil.jpg) 50% no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}

5) Edit-Mode: Seiten-Tab "Mehr" (More) > Header-images für die Siete auswählen. Das muss auch für alle Unterseiten erfolgen.

* Das Bild der Start-Page (Home Page) ist und bleibt bg_startpage.jpg im Ordner ./templates/jekyllandhyde/images/, aber nur, wenn im Reiter "More" kein Header-image für diese Seite ausgewählt wurde.

Have fun

BTW @Christoph/@All: Zweitsprachentauglich ist Morepagedata zumindest für dieses Feature anscheinend nicht.

[cmb]

Zweitsprachentauglich ist Morepagedata zumindest für dieses Feature anscheinend nicht.

Weiß nicht genau, was du meinst, aber grundsätzlich verwaltet Morepagedata seitenspezifische Daten, und jede Sprache hat halt eine eigene Seite mit eigenen seitenspezifischen Daten.

[lck]

Zweitsprachentauglich ist Morepagedata zumindest für dieses Feature anscheinend nicht.

Weiß nicht genau, was du meinst, aber grundsätzlich verwaltet Morepagedata seitenspezifische Daten, und jede Sprache hat halt eine eigene Seite mit eigenen seitenspezifischen Daten.

Doch, funktioniert. Hatte in meiner Testinstallation in der Zweitsprache ein anderes aber gleiches Template eingestellt.

[lck]

Im obigen Post hatte ich etwas vergessen, siehe 3b.

[cmb]

Im obigen Post hatte ich etwas vergessen, siehe 3b.

Die Pfade in der Konfiguration scheinen mehrsprachige Websites zu berücksichtigen.

[lck]

Die Pfade in der Konfiguration scheinen mehrsprachige Websites zu berücksichtigen.

Ja, siehe meinen Post darüber.

[bastingse]

Thanks a lot folks, it works!!!
Great!!

[olape]

Eine ähnliche Lösung hatte ich mal bei einem Template.
Allerdings braucht man dazu kein zusätzliches Plugin.
Es müssen lediglich entsprechende Bilder hochgeladen werden. Sind sie da, werden diese genutzt, sonst wird ein Standardbild (sprachspezifisch) eingebunden.
Die Bilder werden nach Level1 eingebunden und gelten für alle Unterseiten.

Das war noch für die 1.6.7, sollte aber immer noch funktionieren.

Was hier nicht funktioniert ist die Startseite, wenn diese, wie es sein sollte, blank mit domain.tld/ aufgerufen wird.
Hier wird immer das Standardbild sein.

Code: Select all

<!-- Header -->
<?php
	//ist im Imageordner eine Grafik (header_Level1-URL.jpg) vorhanden wird diese eingebunden, sonst die Template-Standardgrafik (header_xx.jpg) --> xx = Sprache
	//Level2, 3 ,4 ,... übernehmen die Grafik von Level1
	//
	//zerlegt die URL in Level1, Level2, Level3, ...
	$op_urlarray = explode($cf['uri']['seperator'], $su);
	//setzt $headerpic auf Level1
	$op_headerpic = $op_urlarray[0];
	//für die Defaultsprache
	if($sl == $cf['language']['default'])
	{
		if(file_exists ($cf['folders']['userfiles'] . $cf['folders']['images'] . 'header_' . $op_headerpic . '.jpg'))
		{
			echo '<div id="header" style="background-image: url(\'' . $cf['folders']['userfiles'] . $cf['folders']['images']  .  'header_' . $op_headerpic . '.jpg\');">' . "\n";
		}
		else
		{
			echo '<div id="header" style="background-image: url(\'' . $pth['folder']['templateimages'] . 'header_' . $sl . '.jpg\');">' . "\n";
		}
	}
	else
	//für die Zweitsprachen
	{
		if(file_exists ('../' . $cf['folders']['userfiles'] . $cf['folders']['images'] . 'header_' . $op_headerpic . '.jpg'))
		{
			echo '<div id="header" style="background-image: url(\'../' . $cf['folders']['userfiles'] . $cf['folders']['images'] . 'header_' . $op_headerpic . '.jpg\');">' . "\n";
		}
		else
		{
			echo '<div id="header" style="background-image: url(\'' . $pth['folder']['templateimages'] . 'header_' . $sl . '.jpg\');">' . "\n";
		}
	}
?>

[lck]

Eine ähnliche Lösung hatte ich mal bei einem Template.
Allerdings braucht man dazu kein zusätzliches Plugin.
Es müssen lediglich entsprechende Bilder hochgeladen werden. Sind sie da, werden diese genutzt, sonst wird ein Standardbild (sprachspezifisch) eingebunden.
Die Bilder werden nach Level1 eingebunden und gelten für alle Unterseiten.

Hört sich gut an, muss ich mal testen.
Wenn ich das richtig lese, ist das wiederum abhängig vom Seitennamen $su, diese kann sich ändern. Aber gut, da muss man dann halt nachbessern oder es wird das Standardbild angezeigt. Auf alle Fälle eine Vereinfachung für den Nutzer. Danke.