[pageimage]- Bild als background-image einbinden

**operatorone** · 18.03.2010, 13:28

Hallo zusammen,

ich habe mich gefragt, ob es mit der Extension pageimage funktionieren würde, die zu einer Seite zugeordneten Bilder in CSS im body als background-image einzubinden. Die normale Funktionsweise stellt ja ein div mit image-container zur Verfügung.

Vielen Dank für eure Antworten,
operator

**schman** · 18.03.2010, 14:25

also falls es dir darum geht, dass jede Seite einen eigenen Hintergrund erhält würde ich dir diess Tutorial empfehlen

**operatorone** · 18.03.2010, 14:46

Hi schman,

so mache ich das sonst auch immer unddas funktioniert prima. Doch ist es für einen Redakteur eher umständlich die Bilder entweder mit dem page-alias oder mit der page-id zu benennen und anbzulegen. Gerade bei sich wiederholenden Bildern. Genau da wäre es supercool, wen man mit pageimage einfach ein background-image pro Seite im Backend definieren könnte. Kann von mie aus auch direkt am body kleben. Das wäre die Lösung.

Viele Grüße,
operator

**andreas.schempp** · 19.03.2010, 09:55

Das geht natürlich schon, braucht aber etwas Handarbeit.

Das Template des Moduls so anpassen das nur eine CSS-Anweisung ausgegeben wird.
An passender Stelle diese Ausgabe mittels {{insert_module::id}} ausgeben.

**operatorone** · 19.03.2010, 10:45

Hi Andreas,

danke für den Tip. Ich habe folgenden Code in das Modul-Template gepackt

HTML-Code:

style="background-image:url(<?php echo $this->src; ?>); background-position:left top; background-repeat:no-repeat;">

und ins fe_page.tpl habe ich dann noch folgendes eingebaut:

HTML-Code:

<body {{insert_module::5}} id="top" ...

und es scheint gut zu funktionieren. Auch die übergeordneten Bilder für Unterseiten ohne Bilder werden übernommen.

Klasse. Vielen Dank für den Tip. Ich hoffe, dass ich anderen damit auch ein wenig weiterhelfen kann, weil es die Zuordnung von background-images in der Pflege doch wesentlich erleichtert.

Viele Grüße,
operator

**Bobi** · 30.12.2011, 19:08

Zitat von operatorone

Ich habe folgenden Code in das Modul-Template gepackt

HTML-Code:

style="background-image:url(<?php echo $this->src; ?>); background-position:left top; background-repeat:no-repeat;">

und ins fe_page.tpl habe ich dann noch folgendes eingebaut:

HTML-Code:

<body {{insert_module::5}} id="top" ...

und es scheint gut zu funktionieren. Auch die übergeordneten Bilder für Unterseiten ohne Bilder werden übernommen.

...Ich hoffe, dass ich anderen damit auch ein wenig weiterhelfen kann, weil es die Zuordnung von background-images in der Pflege doch wesentlich erleichtert.

Viele Grüße,
operator

Hallo operator,
kannst du mir dies bitte nochmals ein wenig genauer erklären?
Welchen Code man hierfür jetzt direkt braucht?
Bei mir will das einfach nicht wirklich klappen, kapiere allerdings auch nicht wirklich was nun in dem Code steckt.
Wäre echt nett - da ich genau das gleiche benötige.

LG
Bobi

**Daniel Eicher** · 21.01.2012, 07:31

Hallo Bobi

Falls noch nicht beantwortet oder gelöst, hier ein kleines Tutorial, weil ich es auch gerade gebraucht habe ;-).

Backend-Module --> Themes --> Frontend-Module --> Neu erstellen: Modultyp: Bild der Seite, Bildbreite und Bildhöhe eingeben. Datensatz ID merken!

Backend-Module --> Templates: mod_pageimage.html5 anpassen. Alles ersetzen mit

PHP-Code:


style="background-image:url(<?php echo $this->src; ?>); background-position:left top; background-repeat:no-repeat;">

Backend-Module --> Templates: fe_page.html5 anpassen. Beim Body-Tag insert_module einfügen:

PHP-Code:


<body {{insert_module::Datensatz_ID_einfügen}} id="top"

Jetzt via Seitenstruktur --> Seitendefinition pro Seite das gewünschte Bild zuordnen und schon klappt's.

Mit Gruss
Daniel

**Stockinger01** · 13.08.2013, 13:15

Hallo,

kann jemand evtl. noch mal genau erklären wie man mit der Erweiterung Seitenbilder / pageimage das Bild als Hintergrund einbauen kann?
Ich bekomm es irgendwie nicht hin.

vielen Dank

**chrizdee** · 13.08.2013, 15:43

Einfache Lösung

Lege einfach im /templates-Ordner eine Datei mod_pageimage.html5 (oder .xhtml, falls Du kein html5 benutzt) an und kopiere folgenden Inhalt rein:

PHP-Code:


<?php 

$GLOBALS['TL_HEAD'][] = '

<style type="text/css">

    body { background: url('.<?php echo $this->src; ?>. ') no-repeat; }

</style>

'; 

?>

Erweiterte Lösung

Solltest Du ein Javascript zum dynamischen Skalieren der Hintergrundbilder verwenden, dann kannst Du obigen Code ja entsprechend umbauen.

Beispiel SuperBGImage (http://dev.andreaseberhard.de/projects/superbgimage/):

HTML-Code:

<div id="superbgimage"> 
<img src="<?php echo $this->src; ?>" alt="<?php echo $this->alt; ?>" /> 
</div>

Anschließend müsstest Du natürlich noch dein SuperBGImage-Script einbinden und im Seitenlayout oder einer eingebundenen Javascript-Datei initieren:

Code:

// SuperBGImage
jQuery('#thumbs').superbgimage().hide();

**Stockinger01** · 17.08.2013, 14:15

Hallo chrizdee,

erst einmal vielen Dank für deine Hilfe, aber wenn ich das wie oben beschrieben

als code :

<?php
$GLOBALS['TL_HEAD'][] = '
<style type="text/css">
body { background: url('.<?php echo $this->src; ?>. ') no-repeat; }
</style>
';
?>

angebe, bekomme ich fim Backendeditor in Zeile 4: Syntax error, unexpectedt T_ECHO
und im Frondend: Parse error: syntax error, unexpected

hast du evtl. eine Idee woran das liegt?

Mfg
Steffen

**Spooky** · 17.08.2013, 14:57

Zitat von Stockinger01

Hallo chrizdee,

erst einmal vielen Dank für deine Hilfe, aber wenn ich das wie oben beschrieben

als code :

<?php
$GLOBALS['TL_HEAD'][] = '
<style type="text/css">
body { background: url('.<?php echo $this->src; ?>. ') no-repeat; }
</style>
';
?>

angebe, bekomme ich fim Backendeditor in Zeile 4: Syntax error, unexpectedt T_ECHO
und im Frondend: Parse error: syntax error, unexpected

hast du evtl. eine Idee woran das liegt?

Mfg
Steffen

->

PHP-Code:


<?php 

$GLOBALS['TL_HEAD'][] = '

<style type="text/css">

    body { background: url('.$this->src.') no-repeat; }

</style>

'; 

?>

**Stockinger01** · 17.08.2013, 15:35

Hallo Spooky,

jetzt habe ich zwar keinen Fehlercode mehr, aber es wird nur ein weißer Hintergrund angeziegt nicht das Bild welches ich in der Erweiterung Pageimage für die Seite definiert hab. Wie gesagt ich möchte das Bild in der Spalte Main als Hintergund anzeigen lassen. Habt Ihr eine Idee was ich falsch mache?

das waren meine Schritte:

mod_pageimages.html5 erstellt, code von Spooky reinkopiert
in Frondendmodule ein Modul vom Typ Pageimage / Seitenbilder erstellt
in der Erweiterung Pageimage für die Seiten Bilder definiert
im Theme Layout das Frontendmodul Pageimage / Seitenbilder der Spalte Main / Hauptspalte zugewiesen

mittels firebug, kann ich mir kann ich mir für den Container Main die CSS Regeln ansehen, hier sehe ich keine Definition für den Backgrund, welche aus der Erweiertung kommen müsste.

Mfg
Steffen