© Bakual

wechselndes Bilder im Header background-image

Mehr
2 Jahre 9 Monate her #5085 von Jochen Ebert
wechselndes Bilder im Header background-image wurde erstellt von Jochen Ebert
Hallo,
ich versuche gerade wechselnde Bilder im Header (background-image) einzubauen.

Dazu habe ich im der templateDetails.xml (logofields) folgendes eingebaut:
Code:
                <field                     name="showheaderimage"                     type="radio"                     default="0"                     label="Bildershow als Headerbackground"                     layout="joomla.form.field.radio.switcher"                 >                     <option value="0">No</option>                     <option value="1">Yes</option>                 </field>                          <field                     name="headerimage"                     type="text"                     default="2"                     filter="integer"                     showon="showheaderimage:1"                     label="Anzahl der Bilder"                 />
Das funktioniert schon mal.
Habe zwei passende Bilder unter /media/templates/site/allrounder/images/show/ (001 + 002.jpg) abgelegt.

Jetzt möchte ich in der index.php dieses so einbauen, das bei jedem click auf der Seite ein neues background-images angezeigt wird.

Habe es bisher allerdings noch nicht geschafft, über die Index.php behaupt ein Bild im Header anzeigen zu lassen. Über die user.css funktioniert es.

Ein kleiner Tip wäre super.

In meinem alten Template wurde das in der index.php wie folgt gelöst:
Code:
if ($tempViewCorner) {     echo "     .corner { background:url(".$this->baseurl."/templates/modellheliflieger/corner/".sprintf("%03d",rand(1,$tempCornerImage)).".jpg) top left no-repeat; }     "; .................. und weiterer Code ....................
Hier wurde das Bild links oben ".corner" angezeigt.

"tempViewCorner" und "tempCornerImage" habe ich schon in "showheaderimage" und "headerimage" geändert.

Vielen Dank

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
2 Jahre 9 Monate her #5086 von Thomas Hunziker
Thomas Hunziker antwortete auf wechselndes Bilder im Header background-image
Am besten machst du es analog dem was ich im Template hier mache:
github.com/Bakual/Allrounder/blob/57bb03.../index.php#L182-L192

Also mit "addStyleDeclaration". Dann kommt es automatisch ans richtige Ort.
Wenns in der user.css funktioniert, dann müsste dieselbe Regel hier auch funktionieren.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
2 Jahre 9 Monate her #5087 von Jochen Ebert
Jochen Ebert antwortete auf wechselndes Bilder im Header background-image
Hallo Thomas,

vielen Dank für Deinen Tip.
Leider verstehe ich das was Du dort machst noch nicht. Ich arbeite noch daran das zu verstehen.

Habe es jetzt erstmal so versucht:
www.modellheliflieger.de/joomla4

Die zwei Bilder wechseln zwar, werden aber noch nicht angezeigt.
Da habe ich bestimmt noch nicht die richtige Position bzw. den falschen Syntax verwendet.

Danke

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
2 Jahre 9 Monate her #5088 von Thomas Hunziker
Thomas Hunziker antwortete auf wechselndes Bilder im Header background-image
Mit "$this->addStyleDeclaration()" kann man CSS Regeln in den <head> Teil der HTML Seite laden mit dem entsprechenden <style> Tag. Das ist ne praktische Joomla Funktion welche du nutzen solltest :-)

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
2 Jahre 9 Monate her #5089 von Jochen Ebert
Jochen Ebert antwortete auf wechselndes Bilder im Header background-image
Danke, werde ich mal versuchen.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
2 Jahre 9 Monate her #5090 von Jochen Ebert
Jochen Ebert antwortete auf wechselndes Bilder im Header background-image
Habe es mit Deinem Tip jetzt hinbekommen. Vielen Dank.
Code:
if ($showHeaderImage) { $this->addStyleDeclaration('     #header {         background-image:url("'.$this->baseurl."/media/templates/site/allrounder/images/show/".sprintf("%03d",rand(1,$HeaderImage)).'.jpg");         background-size: cover;         } '); }
Das Ganze steht vor:
?>
<!DOCTYPE html>

Link

Es funktioniert zwar, ist das aber so korrekt?

Jetzt noch die richtigen Bilder und es wird so langsam.

Danke

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Ladezeit der Seite: 0.118 Sekunden