Zufälliges Hintergrundbild

jackennils

Hallo.

Ich verwende für meinen Blog das i3-Theme.
Ist es möglich das Hintergrundbild zufällig wechseln zu lassen?
Ich würde dann also mehrere Versionen erstellen und dann wird per Zufall entschieden, welches gerade geladen und angezeigt wird.

Ich denke mal schon dass es geht. Nur wie? Hab leider von solchen Sachen keine Ahnung. :(

LG,
Nils

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

marX

Kein Problem. Ich würde das in der header.php angehen, dort ein Style-Bereich in den <head>, und dort #page das background-image zuweisen. Das Bild (die URL/Dateiname) kommt vielleicht aus einem PHP-Array, dass du vorher zufällig sortierst, und dann den 1. Eintrag raus holst.

jackennils

Okay danke dir. Das hilft mir schon mal weiter.
Das Array sollte ich hinbekommen.

Aber kannst du mir das mit dem Style und dem #page noch etwas genauer erklären?

marX

HTML

<head>
...
<style type="text/css">
#page {
background-image('<?php echo $bgimg_array[0] ?>');
}
</style>
</head>

In $bgimg_array stehen deine Dateinamen.

jackennils

Achsooo.
Jetzt versteh auch ich das. :D
Vielen Dank.

jackennils

Ok... vielleicht klappt's auch nicht.
Ich hab Probleme das Array mit dem Codeschnipsel in Verbindung zu bringen. :(

Zumal im CSS Sheet ja auch #page definiert wid. Muss ich das dann dort noch entfernen, bzw ausklammern?

marX

Zitat von jackennils

Ich hab Probleme das Array mit dem Codeschnipsel in Verbindung zu bringen. :(

Wie sieht dein Code aus?

Zitat

Zumal im CSS Sheet ja auch #page definiert wid. Muss ich das dann dort noch entfernen, bzw ausklammern?

Nein, da Angaben direkt im HTML-Dokument spezifischer sind.

jackennils

Ich hab da eine Vorlage gefunden und sie mit meinen Bilderadressen ausgetauscht:

PHP

<?php


  $tmp=array("/images/main-bg2.jpg"=>1,"/images/main-bg3.jpg"=>2,"/images/main-bg4.jpg"=>3);
  $new=array();
  $c=count($tmp);


  $k=array_keys($tmp);
  $v=array_values($tmp);


   while($c>0) {
     $i=array_rand($k);
     $new[$k[$i]]=$v[$i];
     unset($k[$i]); #exlude selected number from list
     $c--;
   }


?>

Alles anzeigen

Die Datei heißt bg-array.php

marX

Nicht ein wenig übertrieben? ;-)
Das müsste reichen (ausgehend davon, dass sich die Bilder im images-Verzeichnis in deinem Theme befinden)

PHP

<head>
...
<style type="text/css">
<?php
// Array init
$bgimg_array=array(
  "/images/main-bg2.jpg",
  "/images/main-bg3.jpg",
  "/images/main-bg4.jpg",
);


//shuffle array
shuffle($bgimg_array);
?>
#page {
background-image('<?php echo get_bloginfo('template_url') . $bgimg_array[0] ?>');
}
</style>
</head>

Alles anzeigen

jackennils

Naja, wie gesagt, ich hab nicht wirklich Ahnung davon und war froh überhaupt eine Vorlage gefunden zu haben. ^^
Ich hab jetzt mal deinen Code in die header.php eingebunden, jedoch tut sich nichts.

marX

Die Sortierfunktion hatte ich doch oben verlinkt. ;-)

Ich seh in deiner Seite keine #page oder ähnliches von diesem Code.

jackennils

Ok, jetzt bin ich total verwirrt. :(
Was muss denn jetzt wo hin?

marX

Mein Code kommt in die header.php deines Themes, irgendwo zwischen <head> und </head>. Fertig.

jackennils

Ja genau, das hab ich gemacht. Aber es tut sich nichts.

marX

Ich seh den Code wie gesagt nicht, daher machst du wohl irgendwas beim Einbau falsch. Poste mal deine header.php bitte.

jackennils

Wo willst du denn den Code sehen? Du hast doch gar keinen Link zu meiner Seite.
Der Link am Anfang zeigt nur das Theme das ich verwende.

Die Seite um die es geht ist diese: dgn-clan.org

Hier ist meine header.php:

PHP

<!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">


<head profile="http://gmpg.org/xfn/11">
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />




<style type="text/css">
<?php
// Array init
$bgimg_array=array(
  "/images/main-bg2.jpg",
  "/images/main-bg3.jpg",
  "/images/main-bg4.jpg",
);


//shuffle array
shuffle($bgimg_array);
?>
#page {
background-image('<?php echo get_bloginfo('template_url') . $bgimg_array[0] ?>');
}
</style> 




<script language="JavaScript"> 
<!-- 
function Stammspieler() 
{ 
 var breite=670; 
 var hoehe=450; 
 var positionX=((screen.availWidth / 2) - breite / 2); 
 var positionY=((screen.availHeight / 2) - hoehe / 2); 
 var url='http://dgn-clan.org/stamm.htm'; 
 pop=window.open('','xkt111','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=0,fullscreen=0,width='+breite+',height='+hoehe+',top=0,left=0'); 
 pop.resizeTo(breite,hoehe); 
 pop.moveTo(positionX,positionY); 
 pop.location=url; 
 }
onerror = stopError;
function stopError()
{return true;}
//--> 
</script> 


<title><?php if(is_home()) { echo bloginfo('name'); } else { wp_title(''); } ?></title>


<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->


<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/print.css" type="text/css" media="print" />


<!-- Sidebar docking boxes (dbx) by Brothercake - http://www.brothercake.com/ -->
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/dbx.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/dbx-key.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/dbx.css" media="screen, projection" />


<!--[if lt IE 7]>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/ie-gif.css" type="text/css" />
<![endif]-->


<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />


<?php wp_head(); ?>
</head>
<body>
<div id="page">
  <div id="wrapper">
    <div id="header">
      <h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
      <div class="description"><?php bloginfo('description'); ?></div>
      <?php include (TEMPLATEPATH . '/searchform.php'); ?>
    </div><!-- /header -->


    <?php 
    $current_page = $post->ID; // Hack to prevent the no sidebar error
    include_once("sidebar-left.php"); 
    ?>
    
    <div id="left-col">
      <div id="nav">
        <ul>
          <li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="Home">Home</a></li>
          <li class="page_item <?php if ( is_page('regeln') ) { ?>current_page_item<?php } ?>"><a href="/regeln" title="Regeln">Regeln</a></li>
          <li class="page_item <?php if ( is_page('css-server') ) { ?>current_page_item<?php } ?>"><a href="/css-server" title="CS:S Server">CS:S Server</a></li>
          <li class="page_item <?php if ( is_page('d2only-server') ) { ?>current_page_item<?php } ?>"><a href="/d2only-server" title="Dust2 Only Server">Dust2 Only Server</a></li>
          <li class="page_item <?php if ( is_page('cod4-server') ) { ?>current_page_item<?php } ?>"><a href="/cod4-server" title="Call of Duty 4 Server">Call of Duty 4 Server</a></li>
          <li class="page_item <?php if ( is_page('stats') ) { ?>current_page_item<?php } ?>"><a href="/stats/" title="HLstatsX">HLstatsX</a></li>
        </ul>
      </div><!-- /nav -->


    <?php /* Menu for subpages of current page (thanks to K2 theme for this code) */
    global $notfound;
    if (is_page() and ($notfound != '1')) {
        // Code Remove: to prevent the no sidebar error.
        while($current_page) {
            $page_query = $wpdb->get_row("SELECT ID, post_title, post_status, post_parent FROM $wpdb->posts WHERE ID = '$current_page'");
            $current_page = $page_query->post_parent;
        }
        $parent_id = $page_query->ID;
        $parent_title = $page_query->post_title;


        // if ($wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_parent = '$parent_id' AND post_status != 'attachment'")) {
        if ($wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_parent = '$parent_id' AND post_type != 'attachment'")) {
    ?>






    <div id="subnav">
      <ul>
        <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=&child_of='. $parent_id); ?>
      </ul>
    </div><!-- /sub nav -->
    <?php } } ?>

Alles anzeigen

marX

Achso, und ich dachte die ganze der Link oben *ist* deine Seite... sorry. :-D Jaja, wer lesen kann... bin eindeutig überarbeitet ^^ Ws man auch hieran sehen kann:

PHP

background-image[COLOR="Red"][B]:url[/B][/COLOR]('<?php echo get_bloginfo('template_url') . $bgimg_array[0] ?>');

jackennils

Wie gut, dass ich diese Woche Urlaub habe.
Das hätte ich jetzt vielleicht nicht sagen sollen. :p

Ich habs mal abgeändert. Und es gibt Fortschritte.

Füge ich nur den korrigierten Code ein tut sich nichts.
Klammere ich die entsprechenden Zeilen in der style.css aus werden die Zufallsbilder angezeigt. Allerdings wiederholen sie sich.
Füge ich dann deinem Code noch "no-repeat center top" hinzu geht wieder gar nichts.

PHP

background-image[COLOR=black]:url[/COLOR]('<?php echo get_bloginfo('template_url') . $bgimg_array[0] ?>') no-repeat center top;

marX

PHP

background[COLOR="Red"]-image[/COLOR][COLOR=black]:url[/COLOR]('<?php echo get_bloginfo('template_url') . $bgimg_array[0] ?>') no-repeat center top;

Wenn du das machst, dann ist das "-image" vorn zuviel. ;-)
Hintergrundbilder: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Wenns dann noch nicht klappt - aber nur dann! - noch ein "!important" hintendran vorm ";".

jackennils

D'oh! :oops:

Jetzt klappt's.
Wunderbar.

Vielen lieben Dank! :)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Zufälliges Hintergrundbild

Jetzt mitmachen!