Zufallsbilder im Header
Eingetragen von flashaddicted (14)am 24.10.2006 - 13:34 Uhr in
Moin,
hat jemand eine zufällige Bilderauswahl für den Header per CSS generieren können, die mit Drupal harmoniert?
Ich habe selbst mit PHP Einträgen in der style.css und der page.tpl.php Datei herum experimentiert, aber bislang leider ohne Erfolg.
Vielen Dank im voraus für jegliche Tipps.
Gruß,
flashaddicted
- Anmelden oder Registrieren um Kommentare zu schreiben
Zufällige Bilder
am 24.10.2006 - 16:05 Uhr
Versuchs mal mit sowas in deiner page.tpl.php:
<?php
srand(time());
$id = (rand()%9);
}
?>
Dann kommt dein Header bspw. so:
<div id ="header_<?php echo $id; ?>"></div>Jetzt kannst du im StyleSheet verschiedene Hintergrundbilder definieren.
#header_1 { ... }#header_2 { ... }
usw.
md - drupalcenter
--
www.mdwp.de :: www.go-with-us.de
Muss man da ueberhaupt noch
am 24.10.2006 - 17:48 Uhr
Muss man da ueberhaupt noch zu rand() greifen? time()%9 koennte es doch genausogut tun?
time()
am 24.10.2006 - 17:53 Uhr
Stimmt. Geht auch!
md - drupalcenter
--
www.mdwp.de :: www.go-with-us.de
Zufallsbilder
am 27.10.2006 - 12:29 Uhr
Großartig! Vielen Dank schon mal!!
Leider funktioniert das bei mir noch nicht ganz.
Zur Zeit wird als erstes Bild keins geladen, d.h. der Header bleibt weiss. Wenn man die Webseite dann öfter neu lädt, rotieren die Bilder wie gewünscht. Nur ab und zu ist wieder ein weisses Bild dabei?!
Und irgendwie ist auch der obere Rand der Bilder abgeschnitten?!
Das ist mein umgebauter page.tpl.php code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language ?>" xml:lang="<?php print $language ?>">
<?php
srand(time());
$id = (rand()%9);
?>
<head>
<title><?php print $head_title ?></title>
<?php print $head ?>
<?php print $styles ?>
<script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script>
</head>
<body>
<div id="page">
<div id ="header_<?php echo $id; ?>">
<div id="headerimg">
<?php if ($site_name) { ?><h1><a href="/<?php print $base_path ?>" title="<?php print t('Home') ?>"><?php print $site_name ?></a></h1><?php } ?>
<?php if ($site_slogan) { ?><div class='slogan'><?php print $site_slogan ?></div><?php } ?>
</div>
<?php if (isset($primary_links)) { ?><?php print kubrick_primary_links() ?><?php } ?>
</div>
<hr />
<div id="content" class="narrowcolumn">
<?php print $header ?>
<div class="navigation"> <?php print $breadcrumb ?> </div>
<div id="message"><?php print $messages ?></div>
<?php if ($mission) { ?><div id="mission"><?php print $mission ?></div><?php } ?>
<h2 class="page-title"><?php print $title ?></h2>
<?php print $tabs ?>
<?php print $help ?>
<!-- start main content -->
<?php print $content; ?>
<!-- end main content -->
</div>
<?php if ($sidebar_right) { ?>
<div id="sidebar">
<?php print $search_box ?>
<br />
<?php print $sidebar_right ?>
</div>
<?php } ?>
<hr />
<div id="footer">
<p><?php print $footer_message ?></p>
</div>
</div>
<?php print $closure ?>
</body>
</html>
Und das ist ein Ausschnitt der style.css Datei:
/* Images */body { background: url(images/kubrickbgcolor.jpg); }
#page { background: url(images/kubrickbg.jpg) repeat-y top; border: none; }
#header_2 { background: url(images/kubrickheader_braun.jpg) no-repeat bottom center; }
#header_3 { background: url(images/kubrickheader101006.jpg) no-repeat bottom center; }
#header_4 { background: url(images/kubrickheader.jpg) no-repeat bottom center; }
#header_5 { background: url(images/kubrickheader_org.jpg) no-repeat bottom center; }
#footer { background: url(images/kubrickfooter.jpg) no-repeat bottom; border: none;}
Bin für jede Hilfe dankbar! :-)
Mit besten Grüßen,
flashaddicted
Headerbilder
am 27.10.2006 - 12:35 Uhr
Bei %9 benötigst du auch 9 Bilder und 9 Einträge in der CSS-Datei. Wenn du weniger Bilder benutzen willst, musst du die Zahl verändern.
md - drupalcenter
--
www.mdwp.de :: www.go-with-us.de
Leider geht´s immer noch nicht so ganz...
am 27.10.2006 - 13:04 Uhr
Danke für den Hinweis. Bin mit php noch nicht so vertraut :-)
Ich habe die Anzahl nun geändert, aber leider kommt trotzdem manchmal noch ein leeres Bild.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language ?>" xml:lang="<?php print $language ?>">
<?php
$id = (time()%4);
?>
<head>
<title><?php print $head_title ?></title>
<?php print $head ?>
<?php print $styles ?>
<script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script>
</head>
<body>...</body>
CSS:
/* Images */body { background: url(images/kubrickbgcolor.jpg); }
#page { background: url(images/kubrickbg.jpg) repeat-y top; border: none; }
#header_1 { background: url(images/kubrickheader.jpg) no-repeat bottom center; }
#header_2 { background: url(images/kubrickheader_braun.jpg) no-repeat bottom center; }
#header_3 { background: url(images/kubrickheader101006.jpg) no-repeat bottom center; }
#header_4 { background: url(images/kubrickheader.jpg) no-repeat bottom center; }
#footer { background: url(images/kubrickfooter.jpg) no-repeat bottom; border: none;}
HTML Quelltext
am 27.10.2006 - 13:23 Uhr
Was steht denn im HTML-Quelltext, wenn kein Bild angezeigt wird?
md - drupalcenter
--
www.mdwp.de :: www.go-with-us.de
Super Idee!
am 27.10.2006 - 13:40 Uhr
Da wurde ein Bild nicht angezeigt und zusätzlich wusste ich nicht, dass auch Header_0 abgefragt wird. Jetzt werden alle Header angezeigt. Es entsteht kein leeres Bild mehr! Großes Dankeschön!
Jetzt muss ich nur noch rausfinden warum am oberen Rand 2mm des Bildes (bzw. Headerimages) abgeschnitten werden!
Das müsste doch eigentlich am page.tpl.php Code liegen oder? Habe ich den php code an die richtige Stelle eingefügt? Ich kann den ja auch in den Teil einfügen. Da ändert sich aber optisch leider gar nichts!
CSS
am 27.10.2006 - 13:46 Uhr
Das liegt eher am CSS.
md - drupalcenter
--
www.mdwp.de :: www.go-with-us.de
Die CSS Datei war es!
am 27.10.2006 - 14:11 Uhr
Durch den veränderten Eintrag schien die Größe der Bilder irgendwie nicht mehr zu stimmen. Ich habe durch Deinen Tipp (md) die Bildhöhe schrittweise erhöht und siehe da jetzt wird nichts mehr abgeschnitten!
Hier ist nochmal der Code, falls jemand das gleiche Problem hat:
/* Images */
body { background: url(images/kubrickbgcolor.jpg); }
#page { background: url(images/kubrickbg.jpg) repeat-y top; border: none; }
#header_0 { background: url(images/kubrickheader.jpg) no-repeat bottom center; }
#header_1 { background: url(images/kubrickheader_braun.jpg) no-repeat bottom center; }
#header_2 { background: url(images/kubrickheader_blau.jpg) no-repeat bottom center; }
#header_3 { background: url(images/kubrickheader.jpg) no-repeat bottom center; }
#footer { background: url(images/kubrickfooter.jpg) no-repeat bottom; border: none;}
/* Because the template is slightly different, size-wise, with images, this needs to be set here
If you don't want to use the template's images, you can also delete the following two lines. */
#header { margin: 0 !important; margin: 0 0 0 0px; padding: 1px; height: 198px; width: 758px; }
#headerimg { margin: 7px 9px 0; height: 203px; width: 740px; }
In der letzten Zeile #headerimg musste der Wert von 195px auf 203px hochgesetzt werden.
Mit besten Grüßen,
flashaddicted
P.S.: Vielen Dank nochmal für die gute und vor allem superschnelle Hilfe!!! Das ist echt ein super Forum!
Danke
am 27.10.2006 - 14:36 Uhr
Hören wir gerne :-)
md - drupalcenter
--
www.mdwp.de :: www.go-with-us.de