Contao Community Documentation - Benutzerbeiträge [de]

Fullsize Background mit MooTools MooSizer

2012-07-22T12:17:49Z

Messa: /* Voraussetzung */

[[Category:Admin HOWTOS]]

=Einleitung=
Dieses Tutorial soll zeigen, wie man ein Fullsize Background mit Hilfe von MooTools und PageImages erstellt.<br />
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:
[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,

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

[[Datei:CoverImage_1.jpg|Neue Kategorie in PageImages|frame|center]]

Im nächste Schritt fügt man sein Background-Image ein.
* Add page image(s)

[[Datei:CoverImage_2.jpg|Seitenbilder hinzufügen|frame|center]]

# 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:

[[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.

Dazu geht man auf Layout -> Templates

[[Datei:moo_moosize_1.jpg|Template Ordner|frame|center]]

# 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">
<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>
</source>

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

[[Datei:moo_moosize_2.jpg|MooTools Templates|frame|center]]

=Modul für die Einbettung von PageImages erstellen=
Dazu geht man auf Layout -> Themes -> Module -> Neues Modul und erstellt ein Modul "Seitenbilder".

[[Datei:Modul_coverimage_1.jpg|Modul "Seitenbilder" erstellen|frame|center]]

# Titel - Background
# Modultyp - Seitenbilder
# Page image template - pageimages_default
# 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 -> sein Layout bearbeiten und in das Layout einfügen.

[[Datei:Modul_coverimage_2.jpg|Modul in das Layout einbinden|frame|center]]

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:

<source lang="php">
<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>
</source>

In "pageimages_default.tpl" kommt dieser Code:

<source lang="php">


<?php echo($this->pageimage); ?>


</source>

{{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)-

Diese Formatierungen kommt in diese CSS-Datei.

<source lang="css">
#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;
}
</source>

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 [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

2011-12-19T10:36:40Z

Messa: /* moo_moosize.tpl erstellen und einstellen */

[[Category:Admin HOWTOS]]

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

=Beispiel=
Als Beispiel ein Projekt bei dem diese Anleitung umgesetzt wurde:
[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]).

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

[[Datei:CoverImage_1.jpg|Neue Kategorie in PageImages|frame|center]]

Im nächste Schritt fügt man sein Background-Image ein.
* Add page image(s)

[[Datei:CoverImage_2.jpg|Seitenbilder hinzufügen|frame|center]]

# 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:

[[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.

Dazu geht man auf Layout -> Templates

[[Datei:moo_moosize_1.jpg|Template Ordner|frame|center]]

# 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">
<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>
</source>

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

[[Datei:moo_moosize_2.jpg|MooTools Templates|frame|center]]

=Modul für die Einbettung von PageImages erstellen=
Dazu geht man auf Layout -> Themes -> Module -> Neues Modul und erstellt ein Modul "Seitenbilder".

[[Datei:Modul_coverimage_1.jpg|Modul "Seitenbilder" erstellen|frame|center]]

# Titel - Background
# Modultyp - Seitenbilder
# Page image template - pageimages_default
# 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 -> sein Layout bearbeiten und in das Layout einfügen.

[[Datei:Modul_coverimage_2.jpg|Modul in das Layout einbinden|frame|center]]

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:

<source lang="php">
<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>
</source>

In "pageimages_default.tpl" kommt dieser Code:

<source lang="php">


<?php echo($this->pageimage); ?>


</source>

{{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)-

Diese Formatierungen kommt in diese CSS-Datei.

<source lang="css">
#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;
}
</source>

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 [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

2011-12-19T10:36:22Z

Messa: /* Voraussetzung */

[[Category:Admin HOWTOS]]

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

=Beispiel=
Als Beispiel ein Projekt bei dem diese Anleitung umgesetzt wurde:
[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]).

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

[[Datei:CoverImage_1.jpg|Neue Kategorie in PageImages|frame|center]]

Im nächste Schritt fügt man sein Background-Image ein.
* Add page image(s)

[[Datei:CoverImage_2.jpg|Seitenbilder hinzufügen|frame|center]]

# 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:

[[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.

Dazu geht man auf Layout -> Templates

[[Datei:moo_moosize_1.jpg|Template Ordner|frame|center]]

# 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">
<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: 480,
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>
</source>

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

[[Datei:moo_moosize_2.jpg|MooTools Templates|frame|center]]

=Modul für die Einbettung von PageImages erstellen=
Dazu geht man auf Layout -> Themes -> Module -> Neues Modul und erstellt ein Modul "Seitenbilder".

[[Datei:Modul_coverimage_1.jpg|Modul "Seitenbilder" erstellen|frame|center]]

# Titel - Background
# Modultyp - Seitenbilder
# Page image template - pageimages_default
# 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 -> sein Layout bearbeiten und in das Layout einfügen.

[[Datei:Modul_coverimage_2.jpg|Modul in das Layout einbinden|frame|center]]

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:

<source lang="php">
<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>
</source>

In "pageimages_default.tpl" kommt dieser Code:

<source lang="php">


<?php echo($this->pageimage); ?>


</source>

{{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)-

Diese Formatierungen kommt in diese CSS-Datei.

<source lang="css">
#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;
}
</source>

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 [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

2011-12-19T10:15:41Z

Messa: /* Voraussetzung */

[[Category:Admin HOWTOS]]

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

=Beispiel=
Als Beispiel ein Projekt bei dem diese Anleitung umgesetzt wurde:
[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 1920px wegen der automatischen Anpassung von Contao am besten über FTP uploaden ([http://lexikon.martinvogel.de/wqxga.html Hilfe zur Größe]).

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

[[Datei:CoverImage_1.jpg|Neue Kategorie in PageImages|frame|center]]

Im nächste Schritt fügt man sein Background-Image ein.
* Add page image(s)

[[Datei:CoverImage_2.jpg|Seitenbilder hinzufügen|frame|center]]

# 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:

[[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.

Dazu geht man auf Layout -> Templates

[[Datei:moo_moosize_1.jpg|Template Ordner|frame|center]]

# 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">
<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: 480,
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>
</source>

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

[[Datei:moo_moosize_2.jpg|MooTools Templates|frame|center]]

=Modul für die Einbettung von PageImages erstellen=
Dazu geht man auf Layout -> Themes -> Module -> Neues Modul und erstellt ein Modul "Seitenbilder".

[[Datei:Modul_coverimage_1.jpg|Modul "Seitenbilder" erstellen|frame|center]]

# Titel - Background
# Modultyp - Seitenbilder
# Page image template - pageimages_default
# 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 -> sein Layout bearbeiten und in das Layout einfügen.

[[Datei:Modul_coverimage_2.jpg|Modul in das Layout einbinden|frame|center]]

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:

<source lang="php">
<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>
</source>

In "pageimages_default.tpl" kommt dieser Code:

<source lang="php">


<?php echo($this->pageimage); ?>


</source>

{{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)-

Diese Formatierungen kommt in diese CSS-Datei.

<source lang="css">
#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;
}
</source>

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 [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

2011-06-09T11:40:07Z

Messa: hat „Cover Image Fullsize Background“ nach „Fullsize Background mit MooTools MooSizer“ verschoben

[[Category:Admin HOWTOS]]
[[Category:Module]]

== Einleitung ==

Dieses Tutorial soll euch zeigen wie ich ein Fullsize Backround mit hilfe von MooTools und PageImages erstellt habe.
So kann pro Seite ein Hintergrundbild ausgwählt werden und dieses wird automatisch
als Fullsize Bild verwendet.

== Beispiel ==

Als Beispiel zeige ich euch ein Projekt bei dem ich es so verwende.
[http://www.we-are.cc We-are.cc]

== Voraussetzung ==

Das Modul "PageImages" muss installiert sein.
[http://www.contao.org/erweiterungsliste/view/page_images.10010029.de.html PageImages]
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]

== Einrichten von PageImages ==

Als erstes erstellt ihr eine Neue Seitenbildkategorie in PageImages. Im Menü unter Inhalte -> Titelbilder.

[[Datei:CoverImage_1.jpg]]

Nächste Schritt ist wir fügen unser Background-Image ein.
* Add page image(s)

[[Datei:CoverImage_2.jpg]]

# Seitenbild(er) - Das hochgeladene Bild auswählen
# Seiten - Hier auswählen auf welcher Seite das Coverimage angezeigt werden soll
# 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.
# Speichern

Wenn Ihr mehrere Bilder eingefügt habe sollt es so bei euch 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:moo_moosize_1.jpg]]

# Neues Templates - Hier habe ich eines genommen mit moo_.... dieses dann speichern.
# 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!}}

<source lang="javascript">
<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: 480,
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>
</source>

# Anschließend müssen wir dies TPL auch in unserem Seitenlayout aktivieren.
# Dazu gehen wir auf Layout -> Themes -> Seitenlayouts -> Dann unser Layout bearbeiten
# Hier unten bei MooTools-Templates den Hacken bei unserem TPL machen "moo_moosize.tpl"
# Speichern

[[Datei:moo_moosize_2.jpg]]

== Modul für Einbettung des PageImages erstellen ==

# Dazu gehen wir auf Layout -> Themes -> Module -> Neues Modul
# 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"
# Speichern
# Diese Modul nun unter Layout -> Themes -> Seitenlayouts -> Dann unser Layout bearbeiten 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.

== PageImages Templates anpassen ==

# Nun gehen wir auf Layout -> Templates
# Und erstellen 2 neue Layouts
* pageimagesimage.tpl
* pageimages_default.tpl

In "pageimagesimage.tpl" kommt nun dieser Code.

<source lang="php">
<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>
</source>

In "pageimages_default.tpl" kommt nun dieser Code.

<source lang="php">


<?php echo($this->pageimage); ?>


</source>

{{Achtung|Speichern nicht vergessen ;)}}

== CSS einstellen ==

# 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">
#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;
}
</source>

Zum Schluß diese CSS-Datei nicht vergessen unter
Layout -> Themes -> Seitenlayout -> Seitenlayout bearbeiten -> Stylesheets
zu aktivieren, also den Hacken machen und speichern.

Wenn Ihr noch fragen habt Username: Messa -> http://www.contao-community.de

Cover Image Fullsize Background

2011-06-09T11:40:07Z

Messa: hat „Cover Image Fullsize Background“ nach „Fullsize Background mit MooTools MooSizer“ verschoben

#WEITERLEITUNG [[Fullsize Background mit MooTools MooSizer]]

Fullsize Background mit MooTools MooSizer

2011-06-09T10:52:16Z

Messa:

Fullsize Background mit MooTools MooSizer

2011-06-09T10:50:57Z

Messa:

Fullsize Background mit MooTools MooSizer

2011-06-09T10:48:29Z

Messa:

Fullsize Background mit MooTools MooSizer

2011-06-09T10:47:42Z

Messa:

[[Category:Admin HOWTOS]]
[[Category:Module]]

== Einleitung ==

Dieses Tutorial soll euch zeigen wie ich ein Fullsize Backround mit hilfe von MooTools und PageImages erstellt habe.
So kann pro Seite ein Hintergrundbild ausgwählt werden und dieses wird automatisch
als Fullsize Bild verwendet.

== Beispiel ==

Als Beispiel zeige ich euch ein Projekt bei dem ich es so verwende.
[http://www.we-are.cc We-are.cc]

== Voraussetzung ==

Das Modul "PageImages" muss installiert sein.
[http://www.contao.org/erweiterungsliste/view/page_images.10010029.de.html PageImages]
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]

== Einrichten von PageImages ==

Als erstes erstellt ihr eine Neue Seitenbildkategorie in PageImages. Im Menü unter Inhalte -> Titelbilder.

[[Datei:CoverImage_1.jpg]]

Nächste Schritt ist wir fügen unser Background-Image ein.
* Add page image(s)

[[Datei:CoverImage_2.jpg]]

# Seitenbild(er) - Das hochgeladene Bild auswählen
# Seiten - Hier auswählen auf welcher Seite das Coverimage angezeigt werden soll
# 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.
# Speichern

Wenn Ihr mehrere Bilder eingefügt habe sollt es so bei euch 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:moo_moosize_1.jpg]]

# Neues Templates - Hier habe ich eines genommen mit moo_.... dieses dann speichern.
# 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!}}

<source lang="javascript">
<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: 480,
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>
</source>

# Anschließend müssen wir dies TPL auch in unserem Seitenlayout aktivieren.
# Dazu gehen wir auf Layout -> Themes -> Seitenlayouts -> Dann unser Layout bearbeiten
# Hier unten bei MooTools-Templates den Hacken bei unserem TPL machen "moo_moosize.tpl"
# Speichern

[[Datei:moo_moosize_2.jpg]]

== Modul für Einbettung des PageImages erstellen ==

# Dazu gehen wir auf Layout -> Themes -> Module -> Neues Modul
# 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"
# Speichern
# Diese Modul nun unter Layout -> Themes -> Seitenlayouts -> Dann unser Layout bearbeiten 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.

== CoverImage Templates anpassen ==

# Nun gehen wir auf Layout -> Templates
# Und erstellen 2 neue Layouts
* pageimagesimage.tpl
* pageimages_default.tpl

In "pageimagesimage.tpl" kommt nun dieser Code.

<source lang="php">
<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>
</source>

In "pageimages_default.tpl" kommt nun dieser Code.

<source lang="php">


<?php echo($this->pageimage); ?>


</source>

{{Achtung|Speichern nicht vergessen ;)}}

== CSS einstellen ==

# 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">
#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;
}
</source>

Zum Schluß diese CSS-Datei nicht vergessen unter
Layout -> Themes -> Seitenlayout -> Seitenlayout bearbeiten -> Stylesheets
zu aktivieren, also den Hacken machen und speichern.

Fullsize Background mit MooTools MooSizer

2011-06-09T10:46:07Z

Messa:

[[Category:Admin HOWTOS]]
[[Category:Module]]

== Einleitung ==

Dieses Tutorial soll euch zeigen wie ich ein Fullsize Backround mit hilfe von MooTools und PageImages erstellt habe.
So kann pro Seite ein Hintergrundbild ausgwählt werden und dieses wird automatisch
als Fullsize Bild verwendet.

== Beispiel ==

Als Beispiel zeige ich euch ein Projekt bei dem ich es so verwende.
[http://www.we-are.cc We-are.cc]

== Voraussetzung ==

Das Modul "PageImages" muss installiert sein.
[http://www.contao.org/erweiterungsliste/view/page_images.10010029.de.html PageImages]
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]

== Einrichten von PageImages ==

Als erstes erstellt ihr eine Neue Seitenbildkategorie in PageImages. Im Menü unter Inhalte -> Titelbilder.

[[Datei:CoverImage_1.jpg]]

Nächste Schritt ist wir fügen unser Background-Image ein.
* Add page image(s)

[[Datei:CoverImage_2.jpg]]

# Seitenbild(er) - Das hochgeladene Bild auswählen
# Seiten - Hier auswählen auf welcher Seite das Coverimage angezeigt werden soll
# 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.
# Speichern

Wenn Ihr mehrere Bilder eingefügt habe sollt es so bei euch 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:moo_moosize_1.jpg]]

# Neues Templates - Hier habe ich eines genommen mit moo_.... dieses dann speichern.
# 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!}}

<source lang="javascript">
<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: 480,
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>
</source>

# Anschließend müssen wir dies TPL auch in unserem Seitenlayout aktivieren.
# Dazu gehen wir auf Layout -> Themes -> Seitenlayouts -> Dann unser Layout bearbeiten
# Hier unten bei MooTools-Templates den Hacken bei unserem TPL machen "moo_moosize.tpl"
# Speichern

[[Datei:moo_moosize_2.jpg]]

== Modul für Einbettung des Coverimage erstellen ==

# Dazu gehen wir auf Layout -> Themes -> Module -> Neues Modul
# 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"
# Speichern
# Diese Modul nun unter Layout -> Themes -> Seitenlayouts -> Dann unser Layout bearbeiten 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.

== CoverImage Templates anpassen ==

# Nun gehen wir auf Layout -> Templates
# Und erstellen 2 neue Layouts
* pageimagesimage.tpl
* pageimages_default.tpl

In "pageimagesimage.tpl" kommt nun dieser Code.

<source lang="php">
<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>
</source>

In "pageimages_default.tpl" kommt nun dieser Code.

<source lang="php">


<?php echo($this->pageimage); ?>


</source>

{{Achtung|Speichern nicht vergessen ;)}}

== CSS einstellen ==

# 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">
#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;
}
</source>

Zum Schluß diese CSS-Datei nicht vergessen unter
Layout -> Themes -> Seitenlayout -> Seitenlayout bearbeiten -> Stylesheets
zu aktivieren, also den Hacken machen und speichern.

Fullsize Background mit MooTools MooSizer

2011-06-09T10:45:44Z

Messa:

[[Category:Admin HOWTOS]]
[[Category:Module]]

== Einleitung ==

Dieses Tutorial soll euch zeigen wie ich ein Fullsize Backround mit hilfe von MooTools und Coverimage erstellt habe.
So kann pro Seite ein Hintergrundbild ausgwählt werden und dieses wird automatisch
als Fullsize Bild verwendet.

== Beispiel ==

Als Beispiel zeige ich euch ein Projekt bei dem ich es so verwende.
[http://www.we-are.cc We-are.cc]

== Voraussetzung ==

Das Modul "PageImages" muss installiert sein.
[http://www.contao.org/erweiterungsliste/view/page_images.10010029.de.html PageImages]
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]

== Einrichten von PageImages ==

Als erstes erstellt ihr eine Neue Seitenbildkategorie in PageImages. Im Menü unter Inhalte -> Titelbilder.

[[Datei:CoverImage_1.jpg]]

Nächste Schritt ist wir fügen unser Background-Image ein.
* Add page image(s)

[[Datei:CoverImage_2.jpg]]

# Seitenbild(er) - Das hochgeladene Bild auswählen
# Seiten - Hier auswählen auf welcher Seite das Coverimage angezeigt werden soll
# 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.
# Speichern

Wenn Ihr mehrere Bilder eingefügt habe sollt es so bei euch 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:moo_moosize_1.jpg]]

# Neues Templates - Hier habe ich eines genommen mit moo_.... dieses dann speichern.
# 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!}}

<source lang="javascript">
<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: 480,
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>
</source>

# Anschließend müssen wir dies TPL auch in unserem Seitenlayout aktivieren.
# Dazu gehen wir auf Layout -> Themes -> Seitenlayouts -> Dann unser Layout bearbeiten
# Hier unten bei MooTools-Templates den Hacken bei unserem TPL machen "moo_moosize.tpl"
# Speichern

[[Datei:moo_moosize_2.jpg]]

== Modul für Einbettung des Coverimage erstellen ==

# Dazu gehen wir auf Layout -> Themes -> Module -> Neues Modul
# 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"
# Speichern
# Diese Modul nun unter Layout -> Themes -> Seitenlayouts -> Dann unser Layout bearbeiten 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.

== CoverImage Templates anpassen ==

# Nun gehen wir auf Layout -> Templates
# Und erstellen 2 neue Layouts
* pageimagesimage.tpl
* pageimages_default.tpl

In "pageimagesimage.tpl" kommt nun dieser Code.

<source lang="php">
<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>
</source>

In "pageimages_default.tpl" kommt nun dieser Code.

<source lang="php">


<?php echo($this->pageimage); ?>


</source>

{{Achtung|Speichern nicht vergessen ;)}}

== CSS einstellen ==

# 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">
#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;
}
</source>

Zum Schluß diese CSS-Datei nicht vergessen unter
Layout -> Themes -> Seitenlayout -> Seitenlayout bearbeiten -> Stylesheets
zu aktivieren, also den Hacken machen und speichern.

Fullsize Background mit MooTools MooSizer

2011-06-09T10:31:19Z

Messa:

[[Category:Admin HOWTOS]]
[[Category:Module]]

== Einleitung ==

Dieses Tutorial soll euch zeigen wie ich ein Fullsize Backround mit hilfe von MooTools und Coverimage erstellt habe.
So kann pro Seite ein Hintergrundbild ausgwählt werden und dieses wird automatisch
als Fullsize Bild verwendet.

== Beispiel ==

Als Beispiel zeige ich euch ein Projekt bei dem ich es so verwende.
[http://www.we-are.cc We-are.cc]

== Voraussetzung ==

Das Modul "coverpicture" muss installiert sein.
[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]

== 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]]

# Seitenbild(er) - Das hochgeladene Bild auswählen
# Seiten - Hier auswählen auf welcher Seite das Coverimage angezeigt werden soll
# 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.
# Speichern

Wenn Ihr mehrere Bilder eingefügt habe sollt es so bei euch 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:moo_moosize_1.jpg]]

# Neues Templates - Hier habe ich eines genommen mit moo_.... dieses dann speichern.
# 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!}}

<source lang="javascript">
<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: 480,
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>
</source>

# Anschließend müssen wir dies TPL auch in unserem Seitenlayout aktivieren.
# Dazu gehen wir auf Layout -> Themes -> Seitenlayouts -> Dann unser Layout bearbeiten
# Hier unten bei MooTools-Templates den Hacken bei unserem TPL machen "moo_moosize.tpl"
# Speichern

[[Datei:moo_moosize_2.jpg]]

== Modul für Einbettung des Coverimage erstellen ==

# Dazu gehen wir auf Layout -> Themes -> Module -> Neues Modul
# 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"
# Speichern
# Diese Modul nun unter Layout -> Themes -> Seitenlayouts -> Dann unser Layout bearbeiten 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.

== CoverImage Templates anpassen ==

# Nun gehen wir auf Layout -> Templates
# Und erstellen 2 neue Layouts
* pageimagesimage.tpl
* pageimages_default.tpl

In "pageimagesimage.tpl" kommt nun dieser Code.

<source lang="php">
<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>
</source>

In "pageimages_default.tpl" kommt nun dieser Code.

<source lang="php">


<?php echo($this->pageimage); ?>


</source>

{{Achtung|Speichern nicht vergessen ;)}}

== CSS einstellen ==

# 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">
#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;
}
</source>

Zum Schluß diese CSS-Datei nicht vergessen unter
Layout -> Themes -> Seitenlayout -> Seitenlayout bearbeiten -> Stylesheets
zu aktivieren, also den Hacken machen und speichern.

Fullsize Background mit MooTools MooSizer

2011-06-09T10:05:09Z

Messa: Cover Image Fullsize Background CoverImage für ein 100% Hintergrund

== Einleitung ==

Dieses Tutorial soll euch zeigen wie ich ein Fullsize Backround mit hilfe von MooTools und Coverimage erstellt habe.
So kann pro Seite ein Hintergrundbild ausgwählt werden und dieses wird automatisch
als Fullsize Bild verwendet.

== Beispiel ==

Als Beispiel zeige ich euch ein Projekt bei dem ich es so verwende.
[http://www.we-are.cc We-are.cc]

== Voraussetzung ==

Das Modul "coverpicture" muss installiert sein.
[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]

== 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]]

# Seitenbild(er) - Das hochgeladene Bild auswählen
# Seiten - Hier auswählen auf welcher Seite das Coverimage angezeigt werden soll
# 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.
# Speichern

Wenn Ihr mehrere Bilder eingefügt habe sollt es so bei euch 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:moo_moosize_1.jpg]]

# Neues Templates - Hier habe ich eines genommen mit moo_.... dieses dann speichern.
# 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!}}

<source lang="javascript">
<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: 480,
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>
</source>

# Anschließend müssen wir dies TPL auch in unserem Seitenlayout aktivieren.
# Dazu gehen wir auf Layout -> Themes -> Seitenlayouts -> Dann unser Layout bearbeiten
# Hier unten bei MooTools-Templates den Hacken bei unserem TPL machen "moo_moosize.tpl"
# Speichern

[[Datei:moo_moosize_2.jpg]]

== Modul für Einbettung des Coverimage erstellen ==

# Dazu gehen wir auf Layout -> Themes -> Module -> Neues Modul
# 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"
# Speichern
# Diese Modul nun unter Layout -> Themes -> Seitenlayouts -> Dann unser Layout bearbeiten 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.

== CoverImage Templates anpassen ==

# Nun gehen wir auf Layout -> Templates
# Und erstellen 2 neue Layouts
* pageimagesimage.tpl
* pageimages_default.tpl

In "pageimagesimage.tpl" kommt nun dieser Code.

<source lang="php">
<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>
</source>

In "pageimages_default.tpl" kommt nun dieser Code.

<source lang="php">


<?php echo($this->pageimage); ?>


</source>

{{Achtung|Speichern nicht vergessen ;)}}

== CSS einstellen ==

# 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">
#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;
}
</source>

Zum Schluß diese CSS-Datei nicht vergessen unter
Layout -> Themes -> Seitenlayout -> Seitenlayout bearbeiten -> Stylesheets
zu aktivieren, also den Hacken machen und speichern.

Datei:Modul coverimage 2.jpg

2011-06-09T09:41:18Z

Messa: Modul_coverimage_2

Modul_coverimage_2

Datei:Modul coverimage 1.jpg

2011-06-09T09:36:50Z

Messa: Modul_coverimage_1

Modul_coverimage_1

Datei:Moo moosize 2.jpg

2011-06-09T09:20:29Z

Messa: moo_moosize_2

moo_moosize_2

Datei:Moo moosize 1.jpg

2011-06-09T09:05:05Z

Messa: moo_moosize_1

moo_moosize_1

Datei:CoverImage 3.jpg

2011-06-09T09:01:05Z

Messa: CoverImage_3

CoverImage_3

Datei:CoverImage 2.jpg

2011-06-09T08:57:10Z

Messa: CoverImage_2

CoverImage_2

Datei:CoverImage 1.jpg

2011-06-09T08:55:25Z

Messa: CoverImage_1

CoverImage_1

Datei:CoverImage.pdf

2011-06-09T08:53:29Z

Messa: CoverImage.pdf

CoverImage.pdf