phpwcms Support Forum

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.

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>

Danke! Ich probiere das mal aus.

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

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.

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

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

Ok ok - ich dachte, es ginge um immer absolut gleiche Höhen, egal, wieviel Text da drin ist

phpwcms Support Forum

cntpart teaser und yaml equal height boxes

cntpart teaser und yaml equal height boxes

Re: cntpart teaser und yaml equal height boxes

Re: cntpart teaser und yaml equal height boxes

Re: cntpart teaser und yaml equal height boxes

Re: cntpart teaser und yaml equal height boxes

Re: cntpart teaser und yaml equal height boxes

Re: cntpart teaser und yaml equal height boxes

Re: cntpart teaser und yaml equal height boxes