https://de.contaowiki.org/api.php?action=feedcontributions&user=Andre.5tz&feedformat=atomContao Community Documentation - Benutzerbeiträge [de]2024-03-29T00:30:37ZBenutzerbeiträgeMediaWiki 1.22.6https://de.contaowiki.org/Fullsize_Background_mit_MooTools_MooSizerFullsize Background mit MooTools MooSizer2012-01-31T19:21:27Z<p>Andre.5tz: /* Einleitung */</p>
<hr />
<div>[[Category:Admin HOWTOS]]<br />
<br />
=Einleitung=<br />
Dieses Tutorial soll zeigen, wie man ein Fullsize Background mit Hilfe von MooTools und PageImages erstellt.<br /><br />
So kann pro Seite ein Hintergrundbild ausgewählt werden und dieses wird automatisch als Fullsize Bild verwendet.<br />
<br />
=Beispiel=<br />
Als Beispiel ein Projekt bei dem diese Anleitung umgesetzt wurde:<br />
[http://www.we-are.cc We-are.cc]<br />
<br />
=Voraussetzung=<br />
Das Modul [http://www.contao.org/erweiterungsliste/view/page_images.10010029.de.html PageImages] muss installiert sein.<br /><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]).<br />
<br />
=Einrichten von PageImages=<br />
Als erstes erstellt man eine neue Seitenbildkategorie in PageImages; zu finden im Backend-Menü unter Inhalte -> Titelbilder.<br />
<br />
[[Datei:CoverImage_1.jpg|Neue Kategorie in PageImages|frame|center]]<br />
<br />
Im nächste Schritt fügt man sein Background-Image ein.<br />
* Add page image(s)<br />
<br />
[[Datei:CoverImage_2.jpg|Seitenbilder hinzufügen|frame|center]]<br />
<br />
# Seitenbild(er) - Das hochgeladene Bild auswählen<br />
# Seiten - Hier wird auswählt, auf welcher Seite das Coverimage angezeigt werden soll<br />
# Alt - Definiet den Alternativ Text (wichtig für SEO)<br />
# 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.<br />
# Speichern<br />
<br />
Wenn man mehrere Bilder eingefügt hat, sollt es so aussehen:<br />
<br />
[[Datei:CoverImage_3.jpg|Eingebundene Seitenbilder|frame|center]]<br />
<br />
=moo_moosize.tpl erstellen und einstellen=<br />
Als nächsten, wichtigen Schritt [[Templates_bearbeiten|erstellt]] man ein eigenes Template für das MooSize-Script.<br />
<br />
Dazu geht man auf Layout -> Templates<br />
<br />
[[Datei:moo_moosize_1.jpg|Template Ordner|frame|center]]<br />
<br />
# Neues Templates - Hier wählt man ein Template, welches mit moo_ beginnt.<br />
# Danach auf bearbeiten gehen und den Namen auf moo_moosize ändern.<br />
# Als nächster Schritt bearbeitet man den Code des Templates. Dazu klickt man auf das 2 Symbol von rechts.<br />
# Anschliessend '''ersetzt''' man den vorhandenen Code mit dem nachstehenden:<br />
<br />
<source lang="javascript"><br />
<script type="text/javascript"><br />
<br />
/*<br />
MooSizer - a Mootools rewrite of: Supersized - Full Screen Background/Slideshow jQuery Plugin<br />
<br />
License:<br />
MIT-style license.<br />
<br />
Credits:<br />
Original jQuery supersized script By Sam Dunn ( <http://buildinternet.com> / <http://onemightyroar.com> )<br />
found here: <http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/><br />
rewritten for Mootools 1.2 by Markus Timtner ( <http://mtness.net> ) 2009-03-27 1100-1500 GMT+1<br />
*/<br />
<br />
var DEBUG;(typeof(window.console) != "undefined")?DEBUG=1:DEBUG=0;//alert(DEBUG);<br />
<br />
var mooSizer = new Class({<br />
<br />
Implements: [Options, Events],<br />
options: {<br />
startwidth: 640, <br />
startheight: 400,<br />
minsize: .5,<br />
slideshow: 1,<br />
slideinterval: 5000,<br />
bgElement: ''<br />
},<br />
<br />
initialize: function(options){ //if(DEBUG==1)console.log("class initialised");<br />
this.setOptions(options);<br />
<br />
//Define image ratio & minimum dimensions<br />
var minwidth = this.options.minsize*(this.options.startwidth); //if(DEBUG==1)console.log("minwidth "+minwidth );<br />
var minheight = this.options.minsize*(this.options.startheight); //if(DEBUG==1)console.log("minheight "+minheight );<br />
var ratio = this.options.startheight/this.options.startwidth; //if(DEBUG==1)console.log("ratio "+ratio );<br />
<br />
this.resizenow(minwidth,minheight,ratio);<br />
<br />
window.addEvent('resize', function(){ //if(DEBUG==1)console.log("resizenow event fired");<br />
this.resizenow(minwidth,minheight,ratio);<br />
}.bind(this));<br />
<br />
},<br />
<br />
resizenow: function(minwidth,minheight,ratio) { // if(DEBUG==1)console.log("resizenow called");<br />
<br />
//Gather browser and current image size<br />
var imagesize = $(this.options.bgElement).getSize();<br />
var imagewidth = imagesize.x; //if(DEBUG==1)console.log("imagewidth "+imagewidth );<br />
var imageheight = imagesize.y; //if(DEBUG==1)console.log("imageheight "+imageheight );<br />
var clientsize = window.getSize();<br />
var browserwidth = clientsize.x; //if(DEBUG==1)console.log("browserwidth "+browserwidth );<br />
var browserheight = clientsize.y; //if(DEBUG==1)console.log("browserheight "+browserheight );<br />
<br />
//Check for minimum dimensions<br />
if ((browserheight < minheight) && (browserwidth < minwidth)){ //if(DEBUG==1)console.log("within minimum dimensions");<br />
//$(this).height(minheight);<br />
$(this.options.bgElement).setStyle('height',minheight);<br />
//$(this).width(minwidth);<br />
$(this.options.bgElement).setStyle('width',minwidth);<br />
}<br />
else{ <br />
//When browser is taller <br />
if (browserheight > browserwidth){ //if(DEBUG==1)console.log("browserheight > browserwidth");<br />
imageheight = browserheight;<br />
$(this.options.bgElement).setStyle('height',browserheight);<br />
imagewidth = browserheight/ratio; //if(DEBUG==1)console.log("imagewidth "+imagewidth );<br />
$(this.options.bgElement).setStyle('width',imagewidth);<br />
<br />
if (browserwidth > imagewidth){ //if(DEBUG==1)console.log("browserheight > imagewidth");<br />
imagewidth = browserwidth; //if(DEBUG==1)console.log("imagewidth "+imagewidth );<br />
$(this.options.bgElement).setStyle('width',browserwidth);<br />
imageheight = browserwidth * ratio; //if(DEBUG==1)console.log("imageheight "+imageheight );<br />
$(this.options.bgElement).setStyle('height',imageheight);<br />
}<br />
} <br />
//When browser is wider<br />
if (browserwidth >= browserheight){ //if(DEBUG==1)console.log("browserwidth >= browserheight");<br />
imagewidth = browserwidth; //if(DEBUG==1)console.log("imagewidth "+imagewidth );<br />
$(this.options.bgElement).setStyle('width',browserwidth);<br />
imageheight = browserwidth * ratio; //if(DEBUG==1)console.log("imageheight "+imageheight );<br />
$(this.options.bgElement).setStyle('height',imageheight);<br />
<br />
if (browserheight > imageheight){ //if(DEBUG==1)console.log("browserheight > imageheight");<br />
imageheight = browserheight; //if(DEBUG==1)console.log("imageheight "+imageheight );<br />
$(this.options.bgElement).setStyle('height',browserheight);<br />
imagewidth = browserheight/ratio; //if(DEBUG==1)console.log("imagewidth "+imagewidth );<br />
$(this.options.bgElement).setStyle('width',imagewidth);<br />
}<br />
}<br />
}<br />
}<br />
<br />
});<br />
<br />
/*************************************************************/<br />
<br />
document.addEvent('domready', function(){<br />
<br />
moosizer = new mooSizer({ bgElement:'supersize' });<br />
<br />
});<br />
<br />
</script><br />
</source><br />
<br />
Im Anschluss muss dieses Template auch im Seitenlayout aktiviert werden:<br />
# Dazu geht man auf Layout -> Themes -> Seitenlayouts -> Dann sein Layout bearbeiten<br />
# Im Abschnitt ''Skript-Einstellungen'' bei MooTools-Templates den Haken bei dem zuvor erstellten Template ''moo_moosize.tpl'' setzen.<br />
# Speichern<br />
<br />
[[Datei:moo_moosize_2.jpg|MooTools Templates|frame|center]]<br />
<br />
=Modul für die Einbettung von PageImages erstellen=<br />
Dazu geht man auf Layout -> Themes -> Module -> Neues Modul und erstellt ein Modul "Seitenbilder".<br />
<br />
[[Datei:Modul_coverimage_1.jpg|Modul "Seitenbilder" erstellen|frame|center]]<br />
<br />
# Titel - Background<br />
# Modultyp - Seitenbilder<br />
# Page image template - pageimages_default<br />
# Seitenbilderkategorie - Hier wird die Kategorie gewählt, die zuvor unter [[#Einrichten_von_PageImages|Einrichten von PageImages]] erstellt wurde.<br />
# Speichern<br />
Diese Modul nun unter Layout -> Themes -> Seitenlayouts -> sein Layout bearbeiten und in das Layout einfügen.<br />
<br />
[[Datei:Modul_coverimage_2.jpg|Modul in das Layout einbinden|frame|center]]<br />
<br />
In dieser Anleitung wurde es in den "Footer" gepackt (Fußzeile), aber ist egal, an welcher Stelle es eingebunden wird.<br />
<br />
=PageImages Templates anpassen=<br />
Nun geht man auf Layout -> Templates und erstellt 2 neue Templates:<br />
* pageimagesimage.tpl<br />
* pageimages_default.tpl<br />
<br />
In "pageimagesimage.tpl" kommt nun dieser Code:<br />
<br />
<source lang="php"><br />
<div id="passepartout"><br />
<div id="supersize"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>><br />
<?php if ($this->href): ?><br />
<a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>"><br />
<?php endif; ?><br />
<img class="activeslide" src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" /><br />
<?php if ($this->href): ?><br />
</a><br />
<?php endif; ?><br />
<?php if ($this->caption): ?><br />
<div class="caption"><?php echo $this->caption; ?></div><br />
<?php endif; ?><br />
</div><br />
</div><br />
</source><br />
<br />
In "pageimages_default.tpl" kommt dieser Code:<br />
<br />
<source lang="php"><br />
<!-- indexer::stop --><br />
<br />
<?php echo($this->pageimage); ?><br />
<br />
<!-- indexer::continue --><br />
</source><br />
<br />
{{Achtung|Speichern nicht vergessen ;)}}<br />
<br />
=CSS einstellen=<br />
Man kann die folgenden CSS-Anweisungen in einer existierenden CSS hinzufügen, oder man [[CSS|erstellt]] eine eigene CSS-Datei (z.B. moosizer)-<br />
<br />
Diese Formatierungen kommt in diese CSS-Datei.<br />
<br />
<source lang="css"><br />
#passepartout<br />
{<br />
height:100%;<br />
position:relative;<br />
display:block;<br />
}<br />
#supersize<br />
{<br />
top:0;<br />
left:0;<br />
position:fixed;<br />
z-index: -1;<br />
}<br />
#supersize img,<br />
#supersize a<br />
{<br />
width:100%;<br />
height:100%;<br />
display:none;<br />
}<br />
#supersize .activeslide,<br />
#supersize .activeslide img<br />
{<br />
display:inline;<br />
}<br />
</source><br />
<br />
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.<br />
<br />
Bei Fragen zu dieser Anleitung kann der Autor [http://www.contao-community.de/member.php?5598-Messa Messa] kontaktiert werden.<br /><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.</div>Andre.5tz