Gridelements in TYPO3 Projekten einsetzten

Es gibt nur eine handvoll TYPO3 Extensions im TER die ich regelmäßig einsetzte. Ein "must have" ist für mich, neben realURL, gridelements. In Kombination mit ein paar Zeilen Javascript sind die Einsatzmöglichkeiten vielfältig.
Eine Auswahl:


Einrichtung der Extension gridelements

Um Gridelements nutzen zu können müsst Ihr natürlich zunächst die Extension mit dem Extensionmanager aus dem TER importieren und dann zu eurem Template hinzufügen. Danach - und das ist vielleicht das Verwirrenste an gridelements - passiert erst einmal nichts - die Extension taucht (fast) nirgendwo auf.

Um Gridelements zu nutzen, müssen immer zwei Dinge gemacht werden - erstens: anlegen eines neuen Grids - und zweitens: Definition des Renderings im Typoscript Setup.

Grids anlegen:
Ihr geht in die Listenansicht eurer Seite auf der das Setup liegt und wählt im oberen Menü "Datensatz hinzufügen". Im Auswahlbaum wählt ihr "CE Backend Layout" und könnt dann ein neues Grid hinzufügen.

 

 

Das Setup der Grids auf der Seite "Configuration" findet Ihr jeweils in den Beispielen.

Danach könnt ihr das Grid als normales Contentelemenet auf eurer Seite einfügen:

 

 

» nach oben


Gridelements - Einrichtung von Spalten Container

Ähnlich der Extension Multicolumn - ein Grid Container unterteilt die aktuelle Spalte in n-Unterspalten.

 

Grid Configuration:

backend_layout {
    colCount = 3
    rowCount = 1
    rows {
        1 {
            columns {
                1 {
                    name = left
                    colPos = 21
                }
                2 {
                    name = center
                    colPos = 22
                }
                3 {
                    name = Right
                    colPos = 23
                }
            }
        }
    }
}

Seiten Setup:

# GRIDELEMNTS ------------------------------------------------------------------#
tt_content.gridelements_pi1.20.10.setup {
# ID of gridelement
    1 < lib.gridelements.defaultGridSetup
    1 {
        columns {
            # colPos ID
            21 < .default
            21.wrap = <div class="three-cols first">|</div>
            22 < .default
            22.wrap = <div class="three-cols">|</div>
            23 < .default
            23.wrap = <div class="three-cols last">|</div>
                       
        }
        wrap = <div class="col-container">|</div>
    }

}

Ihr müsst natürlich eure CSS entsprechend ergänzen, also irgendwas wie:
.col-container .three-cols {float: left; width: 33%;}
und idealerweise einer Mediaquery für mobile Geräte.

Tipp:
Um im Backend unterschiedliche Spaltenbreiten (z.B. für Content und Sidebarspalte) darzustellen, könnt ihr im Grid-Setup colspan benutzen.
Ein Beispiel für eine breite Contentspalte:

backend_layout {
    colCount = 3
    rowCount = 1
    rows {
        1 {
            columns {
                1 {
                    name = content
                    colPos = 0
                    colspan = 2
                }
                2 {
                    name = sidebar
                    colPos =1
                }
            }
        }
    }
}

» nach oben


Gridelements - Teaser Kästen

Unter Teaser Kästen verstehe ich in diesem Zusammenhang irgendwelche Contentelemente, die über ein umschließendes DIV per CSS anders dargestellt werden, zum Beispiel Container mit Hintergrundeinfärbung, Rahmen etc.

Dies kann man auch über die CE Eigenschaft auf der Registerkarte "Appearance/Eigenschaften" -> "Indentation and Frames" erreichen, dann wird der csc Klasse z.B eine frame-1 angehangen.

Für Teaserkästen ein Gridelement einzusetzten hat für mich demgegenüber folgende Vorteile:
- Durch den Grid Rahmen ist es für den Redaktuer optisch im Backend erkennbar das dies ein "Teaser" ist.
- Es können mehrere Contentelemente in einem Teaser zusammengefasst werden.

Grids für Teaserkästen sind in der Regel einfache 1-Spalten Container:

Grid Configuration:

backend_layout {
    colCount = 1
    rowCount =1
    rows {
        1 {
            columns {
                1 {
                    name = Teaser
                    colPos = 0
                }
            }
       }
    }
}

Seitensetup:

# GRIDELEMNTS ------------------------------------------------------------------#
tt_content.gridelements_pi1.20.10.setup {
# ID of gridelement
    1 < lib.gridelements.defaultGridSetup
    1 {
        columns {
            # colPos ID
            0 < .default
            0.wrap = <div class="teaser-container">|</div>                       
        }
    }
}

» nach oben


Accordion Funktion mit Gridelements

Ein Grid ist ebenfalls ein guter Ausgangspunkt für eine Accordion Funktion (auf- und zuklappen von Content). Dafür geben wir den (sonst standardmäßig unterdrückten) Header des Grid aus und wrapppen diesen mit einem zusätzlichem div "accordion-headline".  Alle Elemente innerhalb dieses Grids werden von einem div "accordion-content" umschlossen. Damit können wir das Ein- und Ausblenden mit ein paar Zeilen jQuery realisieren.

Gridsetup:

backend_layout {
    colCount = 1
    rowCount =1
    rows {
        1 {
            columns {
                1 {
                    name = Accordion
                    colPos = 0
                }
            }
       }
    }
}

Seitensetup:

# GRIDELEMNTS ------------------------------------------------------------------
## grid header ausgeben und wrap
tt_content.gridelements_pi1.10 =< lib.stdheader
tt_content.gridelements_pi1.10.wrap = <div class="accordion-headline icon-close">|</div>

# normales grid setup
tt_content.gridelements_pi1.20.10.setup {
    # ID of gridelement
    5 < lib.gridelements.defaultGridSetup
    5 {
        columns {
            # colPos ID
            0 < .default
            0.wrap = <div class="accordion-content hidden">|</div>
            }
    }

jQuery Script:

 $('.accordion-headline').click(function(e)  { 
        if($(this).hasClass('icon-close')){
            //content is closed
            $(this).removeClass('icon-close');
            $(this).addClass('icon-open');
            $(this).closest('.csc-default').find('.accordion-content').removeClass('hidden');
        } else {
            //content is visibel
            $(this).removeClass('icon-open');
            $(this).addClass('icon-close');
            $(this).closest('.csc-default').find('.accordion-content').addClass('hidden');
        }
    });

» nach oben


Tabs mit Gridelements

Tabs verhalten sich ähnlich wie der Accordion-Effekt - auch hier wird der Content ausgeblendet und bei Klick auf den Header sichtbar.

Als Grundgerüst nehmen wir ein 3-spaltiges Tab in dem wir eine "row" für Tab Titel hinzufügen. Mit Typoscript "allowed = header" können wir die erlaubten CE-Elemente festlegen.

Der Code ist für ein einfaches verständliches Beispiel bei dem Tabs nur einmal auf einer einzelnen Seite eingebunden werden.

Das Gridsetup:

backend_layout {
    colCount = 3
    rowCount = 2
    rows {
        1 {
            columns {
                1 {
                    name = Tab 1
                    colPos = 11
                    allowed = header
                }
                2 {
                    name = Tab 2
                    colPos = 12
                    allowed = header
                }
                3 {
                    name = Tab 3
                    colPos = 13
                    allowed = header
                }
            }
        }
        2 {
            columns {
                1 {
                    name = Tab 1 Content
                    colPos = 21
                    allowed = text,textpic
                }
                2 {
                    name = Tab 2 Content
                    colPos = 22
                    allowed = text,textpic
                }
                3 {
                    name = Tab 3 Content
                    colPos = 33
                    allowed = text,textpic
                }
            }
        }
    }
}

Seitensetup:

tt_content.gridelements_pi1.20.10.setup {
# ID of gridelement
    5 < lib.gridelements.defaultGridSetup
    5 {
        columns {
            # colPos ID
            11 < .default
            11.wrap = <div id="tab-1" class="tab active">|</div>
            12 < .default
            12.wrap = <div id="tab-2" class="tab">|</div>
            13 < .default
            13.wrap = <div id="tab-3" class="tab">|</div><div class="clear"></div>
            21 < .default
            21.wrap = <div class="tab-content tab-1-content">|</div>
            22 < .default
            22.wrap = <div class="tab-content tab-2-content hidden">|</div>
            23 < .default
            23.wrap = <div class="tab-content tab-3-content hidden">|</div>
        }
        wrap = <div class="tab-container">|</div>
    }
}

jQuery Script:

     $('.tab').click(function(e)  { 
        $('.tab').removeClass('active');
        $(this).addClass('active');
        
        var tab = $(this).attr('id');
        $('.tab-content').hide();
        $( '.' + tab + '-content').show();
    });

CSS

.tab-container {
    width: 90%;
    margin: 10px 20px;
}
.tab {
    width: 100px;
    float: left;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    margin-right: 10px;
    background-color: #ededed;
    cursor: pointer;
}
.tab.active {
    background-color: #fff;
    border-bottom: 1px solid #fff;
   
}
.tab-content {
    dispay: block;
    width: 100%;
    border: 1px solid #ccc;
    margin-top: -1px;
}

Im Backend sieht das Grid dann so aus:

Weitere Artikel zu diesem Thema:

Empfehlenswerte Lektüre:

Schrödinger lernt HTML5, CSS3 ...

Die Buchfigur Schrödinger lernt hier auf sehr unterhaltsameweise html, CSS und Javascript. Da er dabei nahezu bei null beginnt, holt er auch Einsteiger punktgenau ab. Selbst "Alte Hasen",  für die html 5 und CSS3 zum Tagesgeschäft gehören, werden das ein oder andere Neue erfahren oder einfach nur perfekt von der Story unterhaten. Fazit: überaus lesenswert.

Kommentare

keine Kommentare vorhanden


Kommentar verfassen

Die Email Adresse wird nicht veröffentlicht.