Contao, Grid Systeme und schicke Layouts

Hallo!

Zur Zeit setze ich mein erstes Projekt mit Contao um, dafür habe ich mich für Foundation als Css Framework entschieden.

Für das Grid setzt Foundation - wie andere Gridsysteme auch "rows" vorraus:

Code:

---

row

- hero unit (twelve columns)

row

- teaser (four columns)

- teaser (four columns)

- teaser (four columns)

row

- some other stuff (twelve columns)

---

Wie setzt man dies am besten mit Contao um?

Da ich keine "Eigener HTML" Code Inhaltselemente in den Artikeln möchte (zu unsicher), tendiere ich zu einem Aufbau wie folgt:

Eigene Layoutbereiche binde ich in der fe_page selbst ein.

Code:

---

header
body

- Eigener Layoutbereich Hero Unit (.row)

- mod_article HeroUnit (.twelve .columns)

- Eigener Layoutbereich Teaser

- mod_article TeaserLeft (.four .columns)

- Inhaltselement Bild <-- Wichtig, ich möchte hier ein Inhaltselement, kein mit TinyMCE erzeugtes Bild (figure tag und einstellungsmöglichkeiten für laien)

- Headline

- Text mit Link

- mod-article TeaserMiddle

- mod-article TeaserLeft

...

footer

---

Was haltet ihr davon? Ich habe nun auf jeden fall 4 Artikel unter der Startseite im Backend, finde ich aber nicht weiter schlimm.

Zur Frage bewegt mich die Tatsache, dass die offizielle Contao Seite das Grid auf der Ebene der Inhaltselemente erzeugt, was natürlich geht da es die Voraussetzung für '.row' Elemente nicht gibt. Bilder werden mit CSS gesetzt, und sind nicht so leicht über da Backend konfigurierbar. Ich möchte mich aber an Konvention halten und nicht unbedingt mit Layoutbereichen jonglieren (auch wenn's es im Moment gut funktioniert).

Gibt es eine Möglichkeit das Layout mit nur einem Artikel zu realisieren und ein - Entschuldigung - idiotensicheres Backend zu erzeugen - ich habe mir den Kopf zerbrochen und komme einfach nicht drauf...

Viele Grüße, Kruemel

Noch ein kleines Ascii bild vom Layout:

Code:

---

--------------
  Hero Unit
--------------
 T1 | T2 | T3
--------------
    Stuff

---

Zitat:

---

die offizielle Contao Seite das Grid auf der Ebene der Inhaltselemente erzeugt,

---

Äh, nö.
Grid Klassen werden an den Artikeln geklammert. Innerhalb der Artikel kann man aber auch noch einmal die Grid Klassen verwenden um Elemente damit zu belegen.
Ich habe auch 2 Artikel um damit 2 Spalten zu bilden (left main) bzw. 3 wenn ich auch noch eine dritte Spalte brauche.

Wenns sein muss, inkl. Navi auch mal 4 :-)
http://contaogrid2.glen-langer.de/te...4-spalten.html
(Contao 2 Grid)

Ich rede von der Startseite von contao.org (#main .inside mod_article.block ce_text.g6)

Aber das Beispiel zeigt genau das, was ich gerne hätte - bzw. auch habe.

Ich bin aber daran gebunden, dass um die Spalten (im Beispiel .g*) ein Element mit der Klasse 'row' liegt da ich das Foundation Framework einsetze. Im Beispiel müsste das Element '.inside' diese zusätzliche Klasse bekommen. Da '.inside' nur ein Helferchen für Contao's HolyGrail ist und Foundation sowas nicht braucht, flieg das in meiner fe_page raus. Ich definiere dann die Reihen (.row) auf Layoutbereich Ebene. Für mehrere Reihen benötige ich natürlich entsprechend viele (eigene) Layoutbereiche was mir nicht wirklich gefällt - was besseres fällt mir aber nicht ein. :-(

na dann mach ein artikel pro "row", dem kannste ja ne klasse geben.
man kann ja auch mehrere artikel untereinander stellen.

Schau dir mal die Erweiterung semantic_html5 an, damit habe ich das umgesetzt und brauche nur einen Artikel, zudem musste ich nur ein Template anpassen, das dann die Klasse bekommen hat.

Gesendet von meinem Nexus 7 mit Tapatalk 2

Zitat:

---

Zitat von KATgirl

Schau dir mal die Erweiterung semantic_html5 an, damit habe ich das umgesetzt und brauche nur einen Artikel, zudem musste ich nur ein Template anpassen, das dann die Klasse bekommen hat.

Gesendet von meinem Nexus 7 mit Tapatalk 2

---

Die Erweiterung sieht sehr interessant aus. Weißt du ob sie auch für Contao 3.* funktioniert? Offiziell ist 2.11.8 unterstützt.

[edit] habe es grade kurz ausprobiert. Scheint nicht so gut zu klappen. Wenn man etwas aus den Dropdowns wählt landet man immer auf einer leeren Seite. Schade, diese Erweiterung ist sehr mächtig - danke für den Tipp, ich hoffe das wir bald eine Version für Contao 3 bekommen.

Das ist ein bisschen komplizierterhttp://imagenaked.com/i/images/smilies.gif

Zitat:

---

Zitat von Johannes546

Das ist ein bisschen komplizierterhttp://imagenaked.com/i/images/smilies.gif

---

Was ist komplizierter?

Update: Es ist auch möglich die FrontendTemplate.php anzupassen. Damit spart man sich die manuelle Einbindung in fe_page. Zur Identifikation der Bereiche wird in dem Fall die id - das ist dann der Name den man im Backend definiert hat verwendet, was nicht unbedingt schön ist.

Gibt es eine von Contao vorgesehen Möglichkeit auch für eigene Layoutbereiche eine ID zu mappen?

Im Falle der 'Hauptspalte' ist die zugehörige ID ja 'main'.

Nochmals ein Update, möchte meine neusten Erkenntnisse mit euch teilen :-)

Das Anpassen der FrontendTemplate.php ist ein gangbarer Weg - bei Updates muss man eben aufpassen. (Kann man Core Dateien updatesicher erweitern, so wie Module?)

Meine Anpassung sieht wie folgt aus:

Die getCustomSections-Methode sieht jetzt so aus:

PHP-Code:

---

public function getCustomSections($strKey=null)
{
    if ($strKey != '' && $this->sPosition != $strKey)
    {
        return '';
    }

    $tag = 'div';

    if ($strKey == 'main')
    {
        global $objPage;

        // Use the section tag in HTML5
        if ($objPage->outputFormat == 'html5')
        {
                $tag = 'div';
        }
    }

    $sections = '';

    // Standardize the IDs (thanks to Tsarma) (see #4251)
    foreach ($this->sections as $k=>$v)
    {
        if($this->sections[$k]){
            $sectionid = standardize($k, true);
            $count = substr($sectionid, -1);
            $sections .= "\n" . '<' . $tag . ' id="' . $strKey . '-row' . $count . '" class="row">' . "\n" . $v . "\n" . "\n" . '</' . $tag . '>' . "\n";
        }
    }

    if ($sections == '')
    {
        return '';
    }

    return "\n" . $sections . "\n";
} 


---

Das div mit der Klasse 'custom' wurde entfernt, sodass eigene Layoutbereiche auf der gleichen ebene landen wie die Hauptspalte.
Das '.inside' Element wurde gelöscht, aus section habe ich ein gewöhnliches div gemacht und die Klasse "row" hinzugefügt.

Die if abfrage in der Schleife verhindert dass leere Bereiche ausgegeben werden.

Die ID ist ein böser Hack. Hier wird der $strKey verwendet ('main', 'before', 'after') mit dem wort '-row' konkateniert und dann :cool: der letzte Buchstabe der Backend ID darangehängt :D

D.h. wenn der Layoutbereich im Backend 'Hauptspalte - Reihe 1' heißt, in der Hauptspalte angezeigt und mit

Code:

---

getCustomSections('main')

---

eingebunden ist wird die zugehörige ID 'main-row1'. Das reicht für meine Bedürfnisse vollkommen aus.

Der große Vorteil ist dass man in gewohnter Contao-Manier beliebig viele Layoutbereiche anlegen kann ohne das Template anfassen zu müssen, diese werden sofort korrekt als 'row' gerendert.

Hier noch der relevante Ausschnitt der fe_page:

HTML-Code:

---

<?php echo $this->getCustomSections('main'); ?>

<?php if($this->main): ?>
<div class="row default">
<?php echo $this->main; ?>
</div>
<?php endif; ?>

---