cntpart teaser und yaml equal height boxes

Bitte alle templatebezogenen Beiträge in diesem Forum veröffentlichen.
Post Reply
hurgelwurz666
Posts: 11
Joined: Mon 1. Feb 2010, 21:12

cntpart teaser und yaml equal height boxes

Post by hurgelwurz666 »

Hallo,

hat schon einmal jemand versucht die Yaml Vorlage für equal height boxes zu einer Vorlage für das Contentpart Teaser/Artikellink umzubauen? Ich habe das versucht und bin dabei auf ein Problem gestoßen, an dem ich bisher nicht weiter komme.

Hier der Link zu der Beispielseite von Yaml:
http://www.yaml.de/fileadmin/examples/0 ... boxes.html

Mein Ziel ist es eine Vorlage zu erstellen, die der jeweils drei Boxen mit drei Teasern zu Artikeln enthält. Die Boxen sind div Container, die über CSS definiert werden.
Da die maximale Anzahl nebeneinander möglicher Boxen in der Vorlage festgelegt werden muss, kann man immer nur maximal drei Artikel in ein Contentpart Teaser packen. Da man das ganze nach unten aber beliebig wiederholen kann ist das kein Problem. In der Planung hätte ich dann einen Artikel der drei Mal das Contentpart Teaser/Artikellink mit jeweils drei Verweisen auf Artikel enthält. Also 9 Boxen untereinander.

Das Problem bei der Sache ist, dass jeweils der dritte div container eine andere Klasse zugewiesen bekommen muss als die beiden davor:

Code: Select all

<div class="c33l">
              <div class="subcl">
                <!-- Insert your subtemplate content here -->
              </div>
            </div>
            <div class="c33l">
              <div class="subc">
			    <!-- Insert your subtemplate content here -->
              </div>
            </div>
            <div class="c33r">
              <div class="subcr">
                <!-- Insert your subtemplate content here -->
              </div>
            </div>
          </div>
Das Problem ist

Code: Select all

<div class="c33r">
in der dritten Box. Im Grunde ist die Lösung einfach. Man müsste ein kleines Script schreiben, dass bis drei zählt und entsprechend html code ausgibt. Mit Javascript ist das auch kein Problem:

Code: Select all

<html>
<head>
</head>
<body>
<script type="text/javascript">
var counter = 0;
function count () {
	switch (counter) {
		case 0:
			document.write ('<div class="c33l">');
			counter ++;
			break;
		case 1:
			document.write ('<div class="c33l">');
			counter ++;
			break;
		case 2:
			document.write ('<div class="c33r">');
			counter = 0;
			break;
		default:
			counter = 0;
			break;
	}
}
</script>
<h1>Test</h1>
<script type="text/javascript">count();</script>
<p>Hallo 1</p>
</div>
<script type="text/javascript">count();</script>
<p>Hallo 2</p>
</div>
<script type="text/javascript">count();</script>
<p>Hallo 3</p>
</div>
</body>
</html>
Dieses Beispiel lässt sich in ein Template für das Contentpart Teaser einbauen. Allerdings ist es mir zu wacklig ein so zentrales Element der Seitengestaltung einem Javascript anzuvertrauen. Anders sähe es aus, wenn man die Zählerei PHP überlassen könnte. Allerdings bekomme ich PHP innerhalb einer Teaser Vorlage nicht ans laufen und habe bisher auch keinen Hinsweis im Netz gefunden, dass das gehen würde.

Gibt es eine Möglichkeit PHP in ein Template für das Contentpart Teaser/Artikellink einzubauen?
Oder gibt es eine andere am besten einfachere Lösung für mein Problem?

Viele Dank für Antworten und Ideen.
User avatar
Oliver Georgi
Site Admin
Posts: 9905
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: cntpart teaser und yaml equal height boxes

Post by Oliver Georgi »

Ich habe ein JavaScript für solche Zwecke. Habe das mal schematisch angepaßt:

// Mootools 1.2

Code: Select all

<div id="outer">
  <div class="row">
    <div class="item">1</item>
    <div class="item">1<br />2</item>
    <div class="item">1<br />2<br />3</item>
    <div class="clear-both"></div>
  </div>
  <div class="row">
    <div class="item">4</item>
    <div class="item">4<br />5</item>
    <div class="item">4<br />5<br />6<br />7</item>
    <div class="clear-both"></div>
  </div>
</div>
<script type="text/javascript">
window.addEvent('domready', function() {

	// Search for teaser box and equalize height
	var outer = $('outer').getElements('div.row');
	if(outer.length > 0) {
		outer.each(function(row) {
			var row_items = row.getElements('div[class^=item]');
			if(row_items.length > 1) {
				var row_height = row.getSize();
				row_items.each(function(item){
					item.setStyle('height', (row_height.y)+'px');
				});
			}
		});
	}
});
</script>
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
hurgelwurz666
Posts: 11
Joined: Mon 1. Feb 2010, 21:12

Re: cntpart teaser und yaml equal height boxes

Post by hurgelwurz666 »

Danke! Ich probiere das mal aus. :D
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Re: cntpart teaser und yaml equal height boxes

Post by santscho »

Ich werde die YAML-Variante ausprobieren und Bescheid geben.
[edit]Schwierig. Kaum umzusetzen, das der cp teaser die s boxen dynamisch aufbaut. JavaScript scheint da die beste Lösung zu sein. Oder... Die Anzahl erlaubten Worte im Summary begrenzen, dann die durchschnittliche Höhe austüfteln, einen Sicherheitswert Höhe hinzufügen (falls ein Summary viele lange Worte aufweist) und dann eine feste Höhe festlegen.

Beispiel hier: http://www.dev.asiangeojunior.com/no-1- ... 2009.phtml
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
User avatar
Oliver Georgi
Site Admin
Posts: 9905
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: cntpart teaser und yaml equal height boxes

Post by Oliver Georgi »

siehe meine Lösung, ansonsten mit negativem Padding/Margin arbeiten. Das habe ich auch schon mit phpwcms gemacht, kann leider den Link hier nicht posten.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: cntpart teaser und yaml equal height boxes

Post by update »

Ich habe das mit float gelöst und innerhalb der auf feste Höhe definierten Boxen ein overflov hidden eingesetzt. Ergebnis endlos viele Boxen untereinander, beliebig in Spalten einteilbar (*), die überflüssigen Wörter abgeschnitten. Wenn man da dann noch ein gefadetes png drüberlegt, sieht das schon gut aus :)
(*) je nach Spaltenzahl wähle ich ein anderes Template: 100%, 50%, 33%, usw...
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
Oliver Georgi
Site Admin
Posts: 9905
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: cntpart teaser und yaml equal height boxes

Post by Oliver Georgi »

Also hier ein Link mit einer per JavaScript realisierten dynamischen Höhenanpassung – die Teaserboxen unter Sehenswertes etc., das ganz e ist multirow-fähig.
http://www.dercityinsider.de/index.php? ... aden-Baden

Gleiches Prinzip auf der IBA-Home für die dort verwendeten Teaserboxen
http://www.iba-stadtumbau.de/index.php?iba2010-de

Da muss nix overfloaten oder vorgedacht werden, was Textlängen betrifft. Die IBA ist die beste Lösung, da diese auch noch IE-spezifisch reagiert. Falls Ihr da Hilfe benötigt, man kann mich (fast) jedereit buchen, JavaScripts auf jQuery oder MooTools Basis zu erarbeiten.

Oliver
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: cntpart teaser und yaml equal height boxes

Post by update »

Ok ok - ich dachte, es ginge um immer absolut gleiche Höhen, egal, wieviel Text da drin ist ;)
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Post Reply