php-resource




Archiv verlassen und diese Seite im Standarddesign anzeigen :
Background je nach Jahreszeit ändern


 
fapl
04-03-2016, 16:42 
 
Hallo php-Fachleute,

ich würde mich freuen wenn mir jemand etwas helfen könnte.

Ich habe eine Homepage, die ich mit einem Hintergrundbild versehen möchte, was sich je nach Jahreszeit ändert.

Ich habe es mit folgendem Sript probiert, was ein Bild je nach Monat ausgibt:
<?php
$monate = array(1=>"winter",
2=>"winter",
3=>"fruehling",
4=>"fruehling",
5=>"fruehling",
6=>"sommer",
7=>"sommer",
8=>"sommer",
9=>"herbst",
10=>"herbst",
11=>"herbst",
12=>"winter");

$monat = date("n");

echo "<img src='".$monate[$monat].".jpg'/>";
?>Meine Homepage wird per externer .css formatiert, dort ist das Hintergrundbild wie folgt eingebunden:
body {
background-image: url(hintergrundbild.jpg);
background-size: 100%;
background-position: center top;
background-attachment: fixed;
background-color: #FFFFFF;
background-repeat: no-repeat;
}Wie bringe ich nun die beiden Dateien zusammen?

Oder hat jemand einen besseren Lösungsansatz?

Über Tipps würde ich mich sehr freuen.

Vielen Dank und viele Grüße

fapl

 
wahsaga
04-03-2016, 17:30 
 
Lege in deinem Stylesheet Regeln für die unterschiedlichen Hintergrundbilder an:

body.winter { … }
body.fruehling { … }
...
… und dann gibst du einfach dynamisch dem body-Element die entsprechende Klasse,
<body class="winter">
etc.

 
fapl
04-03-2016, 20:16 
 
@wahsaga: Vielen Dank für deine Antwort!

Ihr überschätzt mich...

html und css bekomme ich hin, in php bin ich jedoch blutiger Anfänger.

Das genannte php-Script stammt nicht von mir, sowas bekäme ich auf keinen Fall hin. Es war ein www-Fundstück was zumindest ein Bild je nach Montat ausspuckt - ein erster Lösungsansatz für mich. Aber da verließen sie ihn...


Also, in meiner style.css eine Klasse pro Monat anzulegen, verstehe ich noch.

Aber wie gebe ich der index.php mit, welche Klasse sie gerade verwenden soll?


Viele Grüße

fapl

 
berni15
05-03-2016, 10:56 
 
Aber wie gebe ich der index.php mit, welche Klasse sie gerade verwenden soll?

Das ist ja eigentlich HTML. Du musst halt folgendes ausgeben und dabei "winter" durch die entsprechende Jahreszeit ersetzen:


<body class="winter">
...
</body>


Das machst du mit PHP so:


echo "<body class=\"".$monate[$monat]."\">\n";
...
echo "</body>\n";

 
Wasser_Wanderer
05-03-2016, 17:20 
 
[/CODE]Das machst du mit PHP so:


echo "<body class=\"".$monate[$monat]."\">\n";
...
echo "</body>\n";


Oberlehrer an:
Man sollte mit Singlequotes (') PHP-Ausgaben machen.
Dann fallen die Maskierungen mit Backslash ( \ ) weg.

Oberlehrer aus.

:D
Gruss WW

 
h3ll
05-03-2016, 17:31 
 
<body class="<?php echo htmlspecialchars($monate[$monat], ENT_COMPAT, 'UTF-8'); ?>">
...
</body>

 
fapl
05-03-2016, 18:05 
 
Vielen Dank für eure Antworten!

Ich habe jetzt schon hin- und her Probiert, bekomme es aber nicht hin

Folgendes habe ich gemacht:

- Für jede Jahreszeit ein Hintergrundbild in den ordner /images/backgrounds geladen.

- Die Datei "style.css" sieht jetzt wie folgt aus:

body.fruehling {
background-image: url(/images/backgrounds/fruehling.jpg);
background-size: 100%;
background-position: center top;
background-attachment: fixed;
background-color: #FFFFFF;
background-repeat: no-repeat;
}

body.sommer {
background-image: url(/images/backgrounds/sommer.jpg);
background-size: 100%;
background-position: center top;
background-attachment: fixed;
background-color: #FFFFFF;
background-repeat: no-repeat;
}

body.herbst {
background-image: url(/images/backgrounds/herbst.jpg);
background-size: 100%;
background-position: center top;
background-attachment: fixed;
background-color: #FFFFFF;
background-repeat: no-repeat;
}

body.winter {
background-image: url(/images/backgrounds/winter.jpg);
background-size: 100%;
background-position: center top;
background-attachment: fixed;
background-color: #FFFFFF;
background-repeat: no-repeat;
}

(...)

Meine Datei "index.php" sieht wie folgt aus:

<?php defined( '_JEXEC' ) or die; $this->setMetaData('generator',''); ?>
<?php
JHtml::_('behavior.framework', true);
JHtml::_('bootstrap.framework');
$doc = JFactory::getDocument();
$doc->setMetaData( 'cleartype', 'on', true );
?>
<!doctype html>
<head>
<jdoc:include type="head" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">



<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/bootstrap.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/responsive.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/text.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/layout.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/nav.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/typography.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/responsive-template.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/print.css" media="print" />



<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/selectnav.min.js"></script>

<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/ie6.css" media="screen" /> <![endif]-->
<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/ie.css" media="screen" /> <![endif]-->

<link rel="stylesheet" type="text/css" href="/templates/pulsar/css/style.css" media="screen" />

<?php if($this->params->get("usedropdown")) : ?>
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template ?>/js/superfish.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template ?>/js/supersubs.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("ul.menu-nav").supersubs({
minWidth: <?php echo $this->params->get("dropdownhandler1"); ?>,
extraWidth: 1
}).superfish({
delay:500,
animation:{opacity:'<?php if($this->params->get("dropopacity")) : ?>show<?php else: ?>hide<?php endif; ?>',height:'<?php if($this->params->get("dropheight")) : ?>show<?php else: ?>hide<?php endif; ?>',width:'<?php if($this->params->get("dropwidth")): ?>show<?php else: ?>hide<?php endif; ?>'},
speed:'<?php echo $this->params->get("dropspeed"); ?>',
autoArrows:true,
dropShadows:false
});
});
</script>
<?php endif; ?>

<?php echo $this->params->get("headcode"); ?>

<?php if( $this->countModules('builtin-slideshow')) : ?>
<!-- Built-in Slideshow -->
<?php if($this->params->get("cam_turnOn")) : ?>
<link rel="stylesheet" id="camera-css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/camera.css" type="text/css" media="all" />


<style type="text/css"
<?php endif; ?>
</style>
</head>
<body>
<div id="top-a-line"></div>
<?php if(JFactory::getApplication()->getMessageQueue()) : ?>
<div class="container navbar-fixed-top">
<div class="alert alert-block alert-error fade in">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<jdoc:include type="message" />
</div>
</div>
<?php endif; ?>
<div class="container" id="tmp-container">
<div id="header-bg">
<header id="top-handler">
<div id="top" class="row-fluid">
</div>
<div class="clear"> </div>
</div>
</header>
</div>


<?php if( $this->countModules('position-1 or position-0 or search')) : ?>
<nav id="menu">
<div id="menu-handler">
<div class="row-fluid">
<?php if( $this->countModules('position-0 or search')) : ?><div class="span8"><?php else : ?><div class="span12"><?php endif; ?><jdoc:include type="modules" name="position-1" /></div>
<?php if( $this->countModules('position-0 or search')) : ?><div id="search-position" class="span4"><jdoc:include type="modules" name="position-0" /><jdoc:include type="modules" name="search" /></div><?php endif; ?>
</div>
</div>
</nav>
<?php endif; ?>

<?php if( $this->countModules('builtin-slideshow or slideshow') ) : ?>
<div id="slideshow-handler">
<?php if( $this->countModules('builtin-slideshow') ) : ?>
<?php
$count_slides = JDocumentHTML::countModules('builtin-slideshow');
$module = JModuleHelper::getModules('builtin-slideshow');
$moduleParams = new JRegistry();
echo "<div class=\"camera_wrap\" id=\"ph-camera-slideshow\">";
for($sld_a=0;$sld_a<$count_slides;$sld_a++) {
$moduleParams->loadString($module[$sld_a]->params);
$bgimage[$sld_a] = $moduleParams->get('backgroundimage', 'defaultValue');
$caption_effect[$sld_a] = $moduleParams->get('moduleclass_sfx', 'defaultValue');
?>
<div data-thumb="<?php if($bgimage[$sld_a] == "defaultValue") : echo $this->baseurl."/templates/".$this->template."/images/slideshow/no-image.png"; else : echo $this->baseurl."/".$bgimage[$sld_a]; endif; ?>" data-src="<?php if($bgimage[$sld_a] == "defaultValue") : echo $this->baseurl."/templates/".$this->template."/images/slideshow/no-image.png"; else : echo $this->baseurl."/".$bgimage[$sld_a]; endif; ?>">
<div class="camera_caption container <?php if(($caption_effect[$sld_a] == "defaultValue")) : ?>fadeFromLeft<?php else: echo $caption_effect[$sld_a]; endif; ?>" style="<?php if(empty($module[$sld_a]->content)) : ?>display:none !important;visibility: hidden !important; opacity: 0 !important;<?php endif; ?>">
<div class="container"><div><?php echo $module[$sld_a]->content; ?></div></div>
</div>
</div>
<?php } echo "</div>"; // End of camera_wrap ?>
<?php elseif( $this->countModules('slideshow') ) : ?>
<div class="sl-3rd-parties">
<jdoc:include type="modules" name="slideshow" />
</div>
<?php endif; ?>
</div>
<?php endif; ?>

<div id="">
<div id="content-handler">

<?php if( $this->countModules('position-2')) : ?>
<div id="nav-line">
<div id="breadcrumb-handler" class="row-fluid"><div class="span12" id="breadcrumb-bg"><jdoc:include type="modules" name="position-2" /></div></div>
</div>
<?php endif; ?>

<?php if( $this->countModules('position-3')) : ?>
<div class="row-fluid">
<div class="span12"><div id="newsflash-position"><jdoc:include type="modules" name="position-3" style="vmdefault" /></div></div>
</div>
<?php endif; ?>
<div id="main-content-handler">
<div class="row-fluid">
<?php if( $this->countModules('top-left-1 or top-left-2 or position-7 or bottom-left-1 or bottom-left-2')) : ?>
<?php endif; ?>
</div>
<?php if( $this->countModules('bottom-long')) : ?>
<div class="bot-longgg">
<div class="row-fluid">
<div class="span12">
<jdoc:include type="modules" name="bottom-long" style="vmdefault" />
</div>
</div>
</div>
<?php endif; ?>
</div>
</div>
</body>
</html>>Wo muss ich den von euch vorgeschöagenen Wert eingeben???

Vielen Dank und viele Grüße

 
fapl
05-03-2016, 18:09 
 
Nicht wundern, die wahnsinnige index.php stammt von joomla.


Eine andere Idee:

Ist es nicht irgendwie möglich, das in dem Zeitraum von Dezember bis Januar das Bild "winter.jpg" in "background.jpg" umbenannt wird.

Im Zeitraum von März bis Mai wird dann das Bild "fruehling.jpg" in "background.jpg" umbenannt usw?

Viele Grüße

fapl

 
berni15
05-03-2016, 21:27 
 
[QUOTE=fapl;672471]

<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/bootstrap.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/responsive.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/text.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/layout.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/nav.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/typography.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/responsive-template.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/print.css" media="print" />


Hier kannst du noch eine Zeile anfügen, bei der du deine style.css einbindest:


<link rel="stylesheet" type="text/css" href="style.css">


Danach ersetzt du die Zeile "<body>" durch


<?php
$monate = array(1=>"winter",
2=>"winter",
3=>"fruehling",
4=>"fruehling",
5=>"fruehling",
6=>"sommer",
7=>"sommer",
8=>"sommer",
9=>"herbst",
10=>"herbst",
11=>"herbst",
12=>"winter");

$monat = date("n");

echo '<body class="'.$monate[$monat].'">\n';
?>


Das sollte dann tun. :)

 
berni15
06-03-2016, 09:39 
 
Man kann das Ganze auch noch etwas vereinfachen, wie mir heute Nacht eingefallen ist. Hier nur der relevante Code:

style.css:

body {
background-size: 100%;
background-position: center top;
background-attachment: fixed;
background-color: #FFFFFF;
background-repeat: no-repeat;
}

body.background0 {
background-image: url(/images/backgrounds/winter.jpg);
}

body.background1 {
background-image: url(/images/backgrounds/fruehling.jpg);
}

body.background2 {
background-image: url(/images/backgrounds/sommer.jpg);
}

body.background3 {
background-image: url(/images/backgrounds/herbst.jpg);
}


index.php:

<!doctype html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="background<?php echo (date('n')/3)%4; ?>">
</body>

 
fapl
06-03-2016, 14:39 
 
Vielen, vielen Dank für eure Antworten!

Ohne eure Hilfe hätte ich das nie hinbekommen, aber mit den verschiedenen Methoden habe ich das jetzt schon bei mehreren Joomla-Installation und deren Templates eingerichtet.

Ich bin echt baff was php alles kann und was man damit alles machen kann wenn man es clever kombiniert.

Viele Grüße

fapl

- -

Alle Zeitangaben in WEZ +2. Es ist jetzt 11:53 Uhr.