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

About the template and stylesheet - and changing the menu
bastingse
Posts: 272
Joined: Fri Jun 06, 2008 9:38 pm
Location: Netherlands
Contact:

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

Post by bastingse » Thu Mar 07, 2019 10:36 am

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
Posts: 1685
Joined: Wed Mar 23, 2011 11:43 am
Contact:

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

Post by lck » Thu Mar 07, 2019 7:29 pm

bastingse wrote:
Thu Mar 07, 2019 10:36 am
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.
Last edited by lck on Fri Mar 08, 2019 11:11 am, edited 2 times in total.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

cmb
Posts: 13261
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

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

Post by cmb » Thu Mar 07, 2019 10:45 pm

lck wrote:
Thu Mar 07, 2019 7:29 pm
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.
Christoph M. Becker – Plugins for CMSimple_XH

lck
Posts: 1685
Joined: Wed Mar 23, 2011 11:43 am
Contact:

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

Post by lck » Fri Mar 08, 2019 10:36 am

cmb wrote:
Thu Mar 07, 2019 10:45 pm
lck wrote:
Thu Mar 07, 2019 7:29 pm
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.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

lck
Posts: 1685
Joined: Wed Mar 23, 2011 11:43 am
Contact:

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

Post by lck » Fri Mar 08, 2019 10:47 am

Im obigen Post hatte ich etwas vergessen, siehe 3b.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

cmb
Posts: 13261
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

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

Post by cmb » Fri Mar 08, 2019 11:06 am

lck wrote:
Fri Mar 08, 2019 10:47 am
Im obigen Post hatte ich etwas vergessen, siehe 3b.
Die Pfade in der Konfiguration scheinen mehrsprachige Websites zu berücksichtigen.
Christoph M. Becker – Plugins for CMSimple_XH

lck
Posts: 1685
Joined: Wed Mar 23, 2011 11:43 am
Contact:

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

Post by lck » Fri Mar 08, 2019 11:12 am

cmb wrote:
Fri Mar 08, 2019 11:06 am
Die Pfade in der Konfiguration scheinen mehrsprachige Websites zu berücksichtigen.
Ja, siehe meinen Post darüber.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

bastingse
Posts: 272
Joined: Fri Jun 06, 2008 9:38 pm
Location: Netherlands
Contact:

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

Post by bastingse » Sat Mar 09, 2019 1:22 pm

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

olape
Posts: 847
Joined: Fri Mar 13, 2015 8:47 am
Contact:

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

Post by olape » Sun Mar 10, 2019 3:42 pm

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
Posts: 1685
Joined: Wed Mar 23, 2011 11:43 am
Contact:

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

Post by lck » Sun Mar 10, 2019 4:34 pm

olape wrote:
Sun Mar 10, 2019 3:42 pm
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.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Post Reply