Dynamisches (rotierendes) Logo bei Joomla

Mittwoch, den 10. Juni 2009 um 01:04 Uhr

Das folgende Tutorial haben wir von unseren User Crispin bekommen und beschreibt, wie man einfach ein dynamisches oder rotierendes Logo in eine Joomla Seite einbaut. Vielen dank Crispin für diese Beschreibung.

Es gibt unzählige Tips und Tricks für wechselnde Logos im Headerbereich, welche mitunter kompliziert sind und Scripterfahrung abverlangen. In diesem Tutorial wird eine einfache Möglichkeit beschrieben, um wechselnde Logos in dem Joomla Template einzubinden.

1. Das gewünschte Template in Joomla installieren.

2. Unter Erweiterungen ? Templates ? das neue Template anklicken.

3. „CSS bearbeiten“ ? template.css öffnen.

4. Suchen nach dem Abschnitt „div.art-Header-jpeg“ in Artisteer 2.2 oder „div.Header-jpeg“ in Artisteer 2.1.

5. Der Code sieht wie folgt aus:

div.Header-jpeg (in Artisteer 2.2 „div.art-Header-jpeg)
{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 874px; (je nach Breite des Templates variiert dieser width-Wert)
height: 150px; (je nach Höhe des Templates variiert dieser height-Wert)
background-image: url('../images/Header.jpg'); (Der wichtige Background-Image Pfad)
background-repeat: no-repeat;
background-position: center center;
}

6. Der Pfad background-image: url('../images/Header.jpg'); wird geändert in background-image: url('../images/random/rotate.php');

Die rotate.php ist das PHP Script, welches die wechselnden Logos ermöglicht.

7. Eine PHP Datei erstellen mit dem folgenden Code:

<?php
/*
By Matt Mullenweg > http://photomatt.net
Inspired by Dan Benjamin > http://hiveware.com/imagerotator.php
Latest version always at:
http://photomatt.net/scripts/randomimage
*/// Make this the relative path to the images, like "../img" or "random/images/".
// If the images are in the same directory, leave it blank.
$folder = '';
// Space seperated list of extensions, you probably won't have to change this.
$exts = 'jpg jpeg png gif';
$files = array(); $i = -1; // Initialize some variables
if ('' == $folder) $folder = './';
$handle = opendir($folder);
$exts = explode(' ', $exts);
while (false !== ($file = readdir($handle))) {
foreach($exts as $ext) { // for each extension check the extension
if (preg_match('/\.'.$ext.'$/i', $file, $test)) { // faster than ereg, case insensitive
$files[] = $file; // it’s good
++$i;
}
}
}
closedir($handle); // We’re not using it anymore
mt_srand((double)microtime()*1000000); // seed for PHP < 4.2
$rand = mt_rand(0, $i); // $i was incremented as we went along
header('Location: '.$folder.$files[$rand]); // Voila!
?>

Die PHP Datei kann auch hier herunter geladen werden.

8. Jetzt auf den FTP connecten und im Verzeichnis www. deinehompage. de/templates/deintemplate/images/ den neuen Ordner random erstellen.

9. In dem random Ordner wird jetzt die rotate.php hochgeladen samt den gewünschten Logos.

10. Es kann vorkommen, das die hoch geladenen Logos zu groß sind und nur Ausschnitte als Logo gezeigt werden.

Beispiel: Ein in Artisteer erstelltes Template mit einer 900px Breite und dem Logo. Das Logo kann nach dem Export aus Artisteer weniger als 900px breit sein, z.b. nur 838px.

Grund: Wenn Rahmen oder Schatten im Template verwendet werden, schrumpft das Logo etwas.

Tip: Schaut nach dem Export aus Artisteer die Breite des Logos an. Wenn ihr nicht nur Ausschnitte im fertigen Template sehen wollt, empfehle ich, die weiteren Logos auf die genauen Maße (z.b. 838px x 125px) auszuschneiden (z.b. mit Photoshop oder PhotoImpact) und dann in den random Ordner hochzuladen. Die Bezeichnung der Bilder sind irrelevant, es müssen aber jpeg, jpg, png oder gif Dokumente sein.

Viel Spass!

Als Favorit markieren

Lesezeichen setzen

Kommentare (8) add comment

RSS feed Kommentare

Nexxo said:

Wechselbanner clickbar machen

Hallo Zusammen,

kann man die wechselnden Banner auch mit einem hinterlegten Link "Klickbar" gestalten?

Beste Grüsse aus Hamburg

Februar 25, 2010

derglobetrotter said:

arbeiten mit artisteer
hallo, wie kann ich dann im nach hinein das template im programm "artisteer" nochmal bearbeiten???

November 26, 2009

schloety said:

einfach genial
eingebaut und..... funktioniert !!!
schönen Dank

PS: gibt es vielleicht noch einen solchen super Tip für die Einbindung einer Slideshow im Header???

November 17, 2009