Aktuelle Version vom 22. Juli 2012, 13:17 Uhr

Inhaltsverzeichnis

1 Einleitung
2 Beispiel
3 Voraussetzung
4 Einrichten von PageImages
5 moo_moosize.tpl erstellen und einstellen
6 Modul für die Einbettung von PageImages erstellen
7 PageImages Templates anpassen
8 CSS einstellen

Einleitung

Dieses Tutorial soll zeigen, wie man ein Fullsize Background mit Hilfe von MooTools und PageImages erstellt.
So kann pro Seite ein Hintergrundbild ausgewählt werden und dieses wird automatisch als Fullsize Bild verwendet.

Beispiel

Als Beispiel ein Projekt bei dem diese Anleitung umgesetzt wurde: We-are.cc

Voraussetzung

Das Modul PageImages muss installiert sein.
Ein Backgroundbild 2560px x 1600px wegen der automatischen Anpassung von Contao am besten über FTP uploaden (Hilfe zur Größe). UPDATE: Bilder können auch kleiner sein. Wichtig ist nur das Seitenverhältnis. Starwert beim Script startwidth: 640, startheight: 400,

Einrichten von PageImages

Als erstes erstellt man eine neue Seitenbildkategorie in PageImages; zu finden im Backend-Menü unter Inhalte -> Titelbilder.

Neue Kategorie in PageImages

Im nächste Schritt fügt man sein Background-Image ein.

Add page image(s)

Seitenbilder hinzufügen

Seitenbild(er) - Das hochgeladene Bild auswählen
Seiten - Hier wird auswählt, auf welcher Seite das Coverimage angezeigt werden soll
Alt - Definiet den Alternativ Text (wichtig für SEO)
Seitenbilder nicht vererben - Das heißt, das dieses Bild nur auf diese Seite angezeigt wird und nicht auf den Unterseiten, die sich in dieser befinden.
Speichern

Wenn man mehrere Bilder eingefügt hat, sollt es so aussehen:

Eingebundene Seitenbilder

moo_moosize.tpl erstellen und einstellen

Als nächsten, wichtigen Schritt erstellt man ein eigenes Template für das MooSize-Script.

Dazu geht man auf Layout -> Templates

Template Ordner

Neues Templates - Hier wählt man ein Template, welches mit moo_ beginnt.
Danach auf bearbeiten gehen und den Namen auf moo_moosize ändern.
Als nächster Schritt bearbeitet man den Code des Templates. Dazu klickt man auf das 2 Symbol von rechts.
Anschliessend ersetzt man den vorhandenen Code mit dem nachstehenden:

<script type="text/javascript">
 
/*
MooSizer - a Mootools rewrite of: Supersized - Full Screen Background/Slideshow jQuery Plugin
 
License:
	MIT-style license.
 
Credits:
	Original jQuery supersized script By Sam Dunn ( <http://buildinternet.com> / <http://onemightyroar.com>	 )
	found here: <http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/>
	rewritten for Mootools 1.2 by Markus Timtner ( <http://mtness.net> ) 2009-03-27 1100-1500 GMT+1
*/
 
var DEBUG;(typeof(window.console) != "undefined")?DEBUG=1:DEBUG=0;//alert(DEBUG);
 
var mooSizer = new Class({
 
	Implements: [Options, Events],
	options: {
		startwidth: 640,  
		startheight: 400,
		minsize: .5,
		slideshow: 1,
		slideinterval: 5000,
		bgElement: ''
	},
 
	initialize: function(options){													//if(DEBUG==1)console.log("class initialised");
        this.setOptions(options);
 
		//Define image ratio & minimum dimensions
		var minwidth	= this.options.minsize*(this.options.startwidth);			//if(DEBUG==1)console.log("minwidth	"+minwidth	);
		var minheight	= this.options.minsize*(this.options.startheight);			//if(DEBUG==1)console.log("minheight	"+minheight	);
		var ratio		= this.options.startheight/this.options.startwidth;		//if(DEBUG==1)console.log("ratio		"+ratio		);
 
		this.resizenow(minwidth,minheight,ratio);
 
 		window.addEvent('resize', function(){										//if(DEBUG==1)console.log("resizenow event fired");
			this.resizenow(minwidth,minheight,ratio);
		}.bind(this));
 
	},
 
	resizenow: function(minwidth,minheight,ratio) {								// if(DEBUG==1)console.log("resizenow called");
 
		//Gather browser and current image size
		var imagesize		= $(this.options.bgElement).getSize();
		var imagewidth		= imagesize.x;											//if(DEBUG==1)console.log("imagewidth		"+imagewidth	);
		var imageheight		= imagesize.y;											//if(DEBUG==1)console.log("imageheight	"+imageheight	);
		var clientsize		= window.getSize();
		var browserwidth	= clientsize.x;											//if(DEBUG==1)console.log("browserwidth	"+browserwidth	);
		var browserheight	= clientsize.y;											//if(DEBUG==1)console.log("browserheight	"+browserheight	);
 
 		//Check for minimum dimensions
		if ((browserheight < minheight) && (browserwidth < minwidth)){				//if(DEBUG==1)console.log("within minimum dimensions");
				//$(this).height(minheight);
				$(this.options.bgElement).setStyle('height',minheight);
				//$(this).width(minwidth);
				$(this.options.bgElement).setStyle('width',minwidth);
		}
		else{	
			//When browser is taller	
			if (browserheight > browserwidth){										//if(DEBUG==1)console.log("browserheight > browserwidth");
				imageheight = browserheight;
					$(this.options.bgElement).setStyle('height',browserheight);
				imagewidth = browserheight/ratio;									//if(DEBUG==1)console.log("imagewidth		"+imagewidth	);
					$(this.options.bgElement).setStyle('width',imagewidth);
 
				if (browserwidth > imagewidth){										//if(DEBUG==1)console.log("browserheight > imagewidth");
					imagewidth = browserwidth;										//if(DEBUG==1)console.log("imagewidth		"+imagewidth	);
						$(this.options.bgElement).setStyle('width',browserwidth);
					imageheight = browserwidth * ratio;								//if(DEBUG==1)console.log("imageheight	"+imageheight	);
						$(this.options.bgElement).setStyle('height',imageheight);
				}
			}			
			//When browser is wider
			if (browserwidth >= browserheight){										//if(DEBUG==1)console.log("browserwidth >= browserheight");
				imagewidth = browserwidth;											//if(DEBUG==1)console.log("imagewidth		"+imagewidth	);
					$(this.options.bgElement).setStyle('width',browserwidth);
				imageheight = browserwidth * ratio;									//if(DEBUG==1)console.log("imageheight	"+imageheight	);
					$(this.options.bgElement).setStyle('height',imageheight);
 
				if (browserheight > imageheight){									//if(DEBUG==1)console.log("browserheight > imageheight");
					imageheight = browserheight;									//if(DEBUG==1)console.log("imageheight	"+imageheight	);
						$(this.options.bgElement).setStyle('height',browserheight);
					imagewidth = browserheight/ratio;								//if(DEBUG==1)console.log("imagewidth		"+imagewidth	);
						$(this.options.bgElement).setStyle('width',imagewidth);
				}
			}
		}
	}
 
});
 
/*************************************************************/
 
document.addEvent('domready', function(){
 
 	moosizer = new mooSizer({ bgElement:'supersize' });
 
});
 
</script>

Im Anschluss muss dieses Template auch im Seitenlayout aktiviert werden:

Dazu geht man auf Layout -> Themes -> Seitenlayouts -> Dann sein Layout bearbeiten
Im Abschnitt Skript-Einstellungen bei MooTools-Templates den Haken bei dem zuvor erstellten Template moo_moosize.tpl setzen.
Speichern

MooTools Templates

Modul für die Einbettung von PageImages erstellen

Dazu geht man auf Layout -> Themes -> Module -> Neues Modul und erstellt ein Modul "Seitenbilder".

Modul "Seitenbilder" erstellen

Titel - Background
Modultyp - Seitenbilder
Page image template - pageimages_default
Seitenbilderkategorie - Hier wird die Kategorie gewählt, die zuvor unter Einrichten von PageImages erstellt wurde.
Speichern

Diese Modul nun unter Layout -> Themes -> Seitenlayouts -> sein Layout bearbeiten und in das Layout einfügen.

Modul in das Layout einbinden

In dieser Anleitung wurde es in den "Footer" gepackt (Fußzeile), aber ist egal, an welcher Stelle es eingebunden wird.

PageImages Templates anpassen

Nun geht man auf Layout -> Templates und erstellt 2 neue Templates:

pageimagesimage.tpl
pageimages_default.tpl

In "pageimagesimage.tpl" kommt nun dieser Code:

<div id="passepartout">
<div id="supersize"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>>
<?php if ($this->href): ?>
<a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>">
<?php endif; ?>
<img class="activeslide"  src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />
<?php if ($this->href): ?>
</a>
<?php endif; ?>
<?php if ($this->caption): ?>
<div class="caption"><?php echo $this->caption; ?></div>
<?php endif; ?>
</div>
</div>

In "pageimages_default.tpl" kommt dieser Code:

<!-- indexer::stop -->
 
<?php echo($this->pageimage); ?>
 
<!-- indexer::continue -->

Achtung: Speichern nicht vergessen ;)

CSS einstellen

Man kann die folgenden CSS-Anweisungen in einer existierenden CSS hinzufügen, oder man erstellt eine eigene CSS-Datei (z.B. moosizer)-

Diese Formatierungen kommt in diese CSS-Datei.

#passepartout
{
	height:100%;
	position:relative;
	display:block;
}
#supersize
{
	top:0;
	left:0;
	position:fixed;
	z-index: -1;
}
#supersize img,
#supersize a
{
	width:100%;
	height:100%;
	display:none;
}
#supersize .activeslide,
#supersize .activeslide img
{
	display:inline;
}

Sollte man eine eigene CSS-Datei erstellt haben, darf nicht vergessen werden, diese zum Schluß unter Layout -> Themes -> Seitenlayout -> Seitenlayout bearbeiten -> Stylesheets zu aktivieren (Hacken setzen) und speichern.

Bei Fragen zu dieser Anleitung kann der Autor Messa kontaktiert werden.
Ein Diskussionsthread zu dieser Anleitung ist im deutschen Contao-Forum zu finden.

@@ Zeile 1: / Zeile 1: @@
-== Einleitung ==
+[[Category:Admin HOWTOS]]
-Dieses Tutorial soll euch zeigen wie ich ein Fullsize Backround mit hilfe von MooTools und Coverimage erstellt habe.
+=Einleitung=
-So kann pro Seite ein Hintergrundbild ausgwählt werden und dieses wird automatisch
+Dieses Tutorial soll zeigen, wie man ein Fullsize Background mit Hilfe von MooTools und PageImages erstellt.<br />
-als Fullsize Bild verwendet.
+So kann pro Seite ein Hintergrundbild ausgewählt werden und dieses wird automatisch als Fullsize Bild verwendet.
+=Beispiel=
-== Beispiel ==
+Als Beispiel ein Projekt bei dem diese Anleitung umgesetzt wurde:
-Als Beispiel zeige ich euch ein Projekt bei dem ich es so verwende.
 [http://www.we-are.cc We-are.cc]
+=Voraussetzung=
+Das Modul [http://www.contao.org/erweiterungsliste/view/page_images.10010029.de.html PageImages] muss installiert sein.<br />
+Ein Backgroundbild 2560px x 1600px wegen der automatischen Anpassung von Contao am besten über FTP uploaden ([http://lexikon.martinvogel.de/wqxga.html Hilfe zur Größe]).
+'''UPDATE:''' Bilder können auch kleiner sein. Wichtig ist nur das Seitenverhältnis. Starwert beim Script startwidth: 640,
+startheight: 400,
-== Voraussetzung ==
+=Einrichten von PageImages=
+Als erstes erstellt man eine neue Seitenbildkategorie in PageImages; zu finden im Backend-Menü unter Inhalte -> Titelbilder.
-Das Modul "coverpicture" muss installiert sein.
+[[Datei:CoverImage_1.jpg|Neue Kategorie in PageImages|frame|center]]
-[http://www.contao.org/erweiterungsliste/view/coverpicture.10000089.de.html CoverImage]
-Ein Backgroundbild 2560px x 1600 px am besten über FTP, wegen der automatischen Anpassung von Contao, uploaden.
-[http://lexikon.martinvogel.de/wqxga.html Hilfe zur Größe]
+Im nächste Schritt fügt man sein Background-Image ein.
-== Einrichten von CoverImage ==
-Als erstes erstellt ihr eine Neue Seitenbildkategorie im Modul CoverImage. Im Menü unter Inhalte -> Seitenbilder.
-[[Datei:CoverImage_1.jpg]]
-Nächste Schritt ist wir fügen unser Background-Image ein.
 * Add page image(s)
-[[Datei:CoverImage_2.jpg]]
+[[Datei:CoverImage_2.jpg|Seitenbilder hinzufügen|frame|center]]
 # Seitenbild(er) - Das hochgeladene Bild auswählen
-# Seiten - Hier auswählen auf welcher Seite das Coverimage angezeigt werden soll
+# Seiten - Hier wird auswählt, auf welcher Seite das Coverimage angezeigt werden soll
-# Alt - Definiet den Alternativ Text. Wichtig für SEO.
+# Alt - Definiet den Alternativ Text (wichtig für SEO)
-# Seitenbilder nicht vererben - Das heißt, das diese Bild nur auf diese Seite wirkt und nicht auf die Unterseiten, die sich in dieser befinden.
+# Seitenbilder nicht vererben - Das heißt, das dieses Bild nur auf diese Seite angezeigt wird und nicht auf den Unterseiten, die sich in dieser befinden.
 # Speichern
-Wenn Ihr mehrere Bilder eingefügt habe sollt es so bei euch aussehen.
+Wenn man mehrere Bilder eingefügt hat, sollt es so aussehen:
-[[Datei:CoverImage_3.jpg]]
-== moo_moosize.tpl erstellen und einstellen ==
-Wichtig ist jetzt, dass wir für unser Vorhaben ein eigenes Template für den MooSize script erstllen.
-Dazu geht ihr auf Layout -> Templates
+[[Datei:CoverImage_3.jpg|Eingebundene Seitenbilder|frame|center]]
+=moo_moosize.tpl erstellen und einstellen=
+Als nächsten, wichtigen Schritt [[Templates_bearbeiten|erstellt]] man ein eigenes Template für das MooSize-Script.
-[[Datei:moo_moosize_1.jpg]]
+Dazu geht man auf Layout -> Templates
-# Neues Templates - Hier habe ich eines genommen mit moo_.... dieses dann speichern.
+[[Datei:moo_moosize_1.jpg|Template Ordner|frame|center]]
-# Danach auf bearbeiten gehen und denn Namen auf moo_moosize ändern.
-# Nächster Schritt wir bearbieten den Coder im TPL. (Dazu klickt ihr auf das 2 Symbol von Rechts)
-{{Achtung|Diesen Code in moo_moosize.tpl einfügen und speichern!}}
+# Neues Templates - Hier wählt man ein Template, welches mit moo_ beginnt.
+# Danach auf bearbeiten gehen und den Namen auf moo_moosize ändern.
+# Als nächster Schritt bearbeitet man den Code des Templates. Dazu klickt man auf das 2 Symbol von rechts.
+# Anschliessend '''ersetzt''' man den vorhandenen Code mit dem nachstehenden:
 <source lang="javascript">
@@ Zeile 78: / Zeile 69: @@
 	options: {
 		startwidth: 640,
-		startheight: 480,
+		startheight: 400,
 		minsize: .5,
 		slideshow: 1,
@@ Zeile 163: / Zeile 154: @@
 </source>
-# Anschließend müssen wir dies TPL auch in unserem Seitenlayout aktivieren.
+Im Anschluss muss dieses Template auch im Seitenlayout aktiviert werden:
-# Dazu gehen wir auf Layout -> Themes -> Seitenlayouts -> Dann unser Layout bearbeiten
+# Dazu geht man auf Layout -> Themes -> Seitenlayouts -> Dann sein Layout bearbeiten
-# Hier unten bei MooTools-Templates den Hacken bei unserem TPL machen "moo_moosize.tpl"
+# Im Abschnitt ''Skript-Einstellungen'' bei MooTools-Templates den Haken bei dem zuvor erstellten Template ''moo_moosize.tpl'' setzen.
 # Speichern
-[[Datei:moo_moosize_2.jpg]]
+[[Datei:moo_moosize_2.jpg|MooTools Templates|frame|center]]
-== Modul für Einbettung des Coverimage erstellen ==
+=Modul für die Einbettung von PageImages erstellen=
+Dazu geht man auf Layout -> Themes -> Module -> Neues Modul und erstellt ein Modul "Seitenbilder".
-# Dazu gehen wir auf Layout -> Themes -> Module -> Neues Modul
+[[Datei:Modul_coverimage_1.jpg|Modul "Seitenbilder" erstellen|frame|center]]
-# Und erstellen uns ein Modul "Seitenbilder"
-[[Datei:Modul_coverimage_1.jpg]]
 # Titel - Background
 # Modultyp - Seitenbilder
 # Page image template - pageimages_default
-# Seitenbilderkategorie - Nehmen wir die, die wir erstellt haben "Backround"
+# Seitenbilderkategorie - Hier wird die Kategorie gewählt, die zuvor unter [[#Einrichten_von_PageImages|Einrichten von PageImages]] erstellt wurde.
 # Speichern
-# Diese Modul nun unter Layout -> Themes -> Seitenlayouts -> Dann unser Layout bearbeiten in das Layout einfügen.
+Diese Modul nun unter Layout -> Themes -> Seitenlayouts -> sein Layout bearbeiten und in das Layout einfügen.
-[[Datei:Modul_coverimage_2.jpg]]
-Bei mir habe ich es in den "Footer" gepackt (Fußzeile), aber ist egal an welcher Stelle es eingebunden wird.
+[[Datei:Modul_coverimage_2.jpg|Modul in das Layout einbinden|frame|center]]
-== CoverImage Templates anpassen ==
+In dieser Anleitung wurde es in den "Footer" gepackt (Fußzeile), aber ist egal, an welcher Stelle es eingebunden wird.
-# Nun gehen wir auf Layout -> Templates
+=PageImages Templates anpassen=
-# Und erstellen 2 neue Layouts
+Nun geht man auf Layout -> Templates und erstellt 2 neue Templates:
 * pageimagesimage.tpl
 * pageimages_default.tpl
-In "pageimagesimage.tpl" kommt nun dieser Code.
+In "pageimagesimage.tpl" kommt nun dieser Code:
 <source lang="php">
@@ Zeile 214: / Zeile 201: @@
 </source>
-In "pageimages_default.tpl" kommt nun dieser Code.
+In "pageimages_default.tpl" kommt dieser Code:
 <source lang="php">
@@ Zeile 224: / Zeile 211: @@
 </source>
- {{Achtung|Speichern nicht vergessen ;)}}
+{{Achtung|Speichern nicht vergessen ;)}}
+=CSS einstellen=
+Man kann die folgenden CSS-Anweisungen in einer existierenden CSS hinzufügen, oder man [[CSS|erstellt]] eine eigene CSS-Datei (z.B. moosizer)-
-== CSS einstellen ==
+Diese Formatierungen kommt in diese CSS-Datei.
-# Ich emphele euch eine neue CSS-Datei zuerstellen.
-# Unter Layout -> Themes -> CSS -> Neues Stylesheet
-# Nennt dieses Stylesheet moosizer
-Diese Formatierungen kommen in diese CSS-Datei.
 <source lang="css">
@@ Zeile 263: / Zeile 246: @@
 </source>
-Zum Schluß diese CSS-Datei nicht vergessen unter
+Sollte man eine eigene CSS-Datei erstellt haben, darf nicht vergessen werden, diese zum Schluß unter Layout -> Themes -> Seitenlayout -> Seitenlayout bearbeiten -> Stylesheets zu aktivieren (Hacken setzen) und speichern.
-Layout -> Themes -> Seitenlayout -> Seitenlayout bearbeiten -> Stylesheets
-zu aktivieren, also den Hacken machen und speichern.
+Bei Fragen zu dieser Anleitung kann der Autor [http://www.contao-community.de/member.php?5598-Messa Messa] kontaktiert werden.<br />
+Ein Diskussionsthread zu dieser Anleitung ist im deutschen [http://www.contao-community.de/showthread.php?20317-Cover-Image-Fullsize-Background-MooSize Contao-Forum] zu finden.

Fullsize Background mit MooTools MooSizer: Unterschied zwischen den Versionen

Aus Contao Community Documentation

Aktuelle Version vom 22. Juli 2012, 13:17 Uhr

Inhaltsverzeichnis

Einleitung

Beispiel

Voraussetzung

Einrichten von PageImages

moo_moosize.tpl erstellen und einstellen

Modul für die Einbettung von PageImages erstellen

PageImages Templates anpassen

CSS einstellen

Ansichten

Meine Werkzeuge

Suche

Navigation

Verstehen

Verwenden

Entwickeln

Verschiedenes

Werkzeuge