TYPO3: CONTENT-ELEMENTE FÜR BESTIMMTE AUFLÖSUNGEN "AUS- UND EINBLENDEN"

Responsives Webdesign ist nicht mehr aufzuhalten und wegzudenken – und das ist auch gut so. Webseiten, die sich dem jeweiligen Ausgabegerät anpassen, erhöhen nicht nur für den Nutzer den Anzeigekomfort sondern bieten auch dem Webseiten-Betreiber die Möglichkeit, die Inhalte zeilgerichtet über das jeweilige Ausgabegerät auszugeben.

Da mein Herz an TYPO3 hängt und dieses von Haus aus keine solche Funktion mitbringt, musste ich selber Hand anlegen und dafür eine Lösung entwickeln.

Ziel:
Usern, die eine Seite mit einem Smartphone aufrufen soll ein anderer Inhalt angezeigt werden, als solchen, die dieselbe Seite mit einem PC aufrufen.

>> Voraussetzung für diese Lösung ist, dass eure TYPO3-Seite mit Media Querys aufgebaut ist und somit eher einen adaptiven Webdesign-Ansatz verfolgt als einen responsiven.

Unsere To-Dos:
> als allererstes müssen wir nachdenken
> folgend sind die entsprechenden Content-Elemente zu erzeugen, über die wir uns in Punkt 1 klargeworden sind
> dann ein paar Zeilen TypoScript in unser Template einfügen
> noch etwas CSS anlegen
> und fleißig testen

Worüber müssen wir nachdenken?
Bevor wir beginnen, ist erstmal festzulegen, abb welcher Auflösung welches Element angezeigt werden soll und welches nicht.
Für unser Beispiel möchten wir, dass das Bild auf Smartphones mit einer Auflösung von 640px Breite angezeigt wird, ab einer Breite von 641px jedoch durch ein anderes ersetzt wird.

Wir erzeugen die Content-Elemente bzw. legen um die Content-Elemente herum eine mobile / not-mobile-CSS-Klasse. Dafür nutzen wir die „Sections Frames“, in dem wir dem Redakteur die Möglichkeit bieten, einem Content-Element eine mobile / not-mobile zuzuordnen.

Hierzu gehen wir in eure Root-Seite, in der euer Haupttemplate eingesetzt wurde.

Unter Seiteneigenschaften > Ressources fügen wir in das "Page TSConfig“ die folgenden Zeilen TypoScript:

TCEFORM.tt_content {
    section_frame{
        altLabels{
          0 = Normal
         }
        addItems {
        200 = mobile 0-640px
        201 = not mobile 641 - open end px
      }
        removeItems = 5,6,7,8,9,10
    }
}


In unser Template fügen wir dann och folgendes TypoScript ein:

tt_content.stdWrap.innerWrap.cObject = CASE
tt_content.stdWrap.innerWrap.cObject {
  key.field = section_frame
  200 = TEXT
  200.value = <div class="mobile">|</div>
  201 = TEXT
  201.value = <div class="not-mobile">|</div>
}


Jetzt nur noch ein paar Zeilen CSS und es ist geschafft:



@media screen and (min-width: 641px)  {

.mobile {
display: none;
}
.not-mobile {
display: block;
}
}

@media screen and (min-width: 240px) and (max-width: 640px) {

.not-mobile {
display: none;
}
.mobile {
display: block;
}
/* HIER ÜBERSCHRIEBEN WIR DIE VON TYPO3 HAUSEIGENEN CSC-KLASSEN, UM FLOATS, MARGINS UND PADDINGS AUF NULL ZU SETZEN */
/* Float the columns */
    div.csc-textpic div.csc-textpic-imagecolumn { float: none; }
/* Positioning of images: */
    /* Center (above or below) */
    div.csc-textpic-center .csc-textpic-imagewrap, div.csc-textpic-center figure.csc-textpic-imagewrap { overflow: hidden; }
    div.csc-textpic-center .csc-textpic-center-outer { position: relative; float: none; left: 0%; }
    div.csc-textpic-center .csc-textpic-center-inner { position: relative; float: none; left: 0%; }
    /* Right (above or below) */
    div.csc-textpic-right .csc-textpic-imagewrap { float: none; }
    div.csc-textpic-right div.csc-textpic-text { clear: both; }
    /* Left (above or below) */
    div.csc-textpic-left .csc-textpic-imagewrap { float: none; }
    div.csc-textpic-left div.csc-textpic-text { clear: both; }
    /* Left (in text) */
    div.csc-textpic-intext-left .csc-textpic-imagewrap { float: none; }
    /* Right (in text) */
    div.csc-textpic-intext-right .csc-textpic-imagewrap { float: none; }
    /* Right (in text, no wrap around) */
    div.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap { float: none; }
    /* Left (in text, no wrap around) */
    div.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap { float: none; }
    div.csc-textpic div.csc-textpic-imagerow-last, div.csc-textpic div.csc-textpic-imagerow-none div.csc-textpic-last { margin-bottom: 0; }

    /* Browser fixes: */
    /* Fix for unordered and ordered list with image "In text, left" */
    .csc-textpic-intext-left ol, .csc-textpic-intext-left ul { padding-left: 0px; overflow: auto; }
    /* specific page styles for extension "tx_cssstyledcontent" */
    .csc-textpic-intext-right-nowrap .csc-textpic-text { margin-right: 0px; }
    .csc-textpic-intext-left-nowrap .csc-textpic-text { margin-left: 0px; }
    .csc-textpic-intext-left-nowrap-260 .csc-textpic-text { margin-left: 0px; }
div.csc-textpic-intext-left .csc-textpic-imagewrap, div.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap {
    margin-right: 0px;
}
}

Wie ihr die Media Queries bestückt, bleibt selbstverständlich euch überlassen. Ich zeige euch hier nur das Prinzip auf, wie man Elemente aus- bzw. einblenden kann, sobald eure Seite mit einer bestimmten Geräteauflösung  aufgerufen wird.

Zum Schluss:
Ich freue mich sehr über euer Feedback und hoffe, dass es euch bei eurer Arbeit hilft. Schreibt mir gern, wenn ihr eine Lösung habt, die vielleicht um Längen besser ist oder ihr Ideen habt wie man das Ganze noch verbessern kann!Her damit, ich bin gespannt!

Wer schreibt hier?

Wanja Scholz, arbeitet als freier Grafiker mit den Schwerpunkten Webdesign, Typo3 und Online-Marketing in Hamburg und Berlin.

Newsletter Abonnieren

Abonnieren Sie jetzt meinen Newsletter rund um Gestaltung, Web und Technik.


Kontakt / Anfrage

Kontakt
Ich freue mich auf Ihre Fragen, Anregungen und Projekte.

Wanja Scholz

Telefon  0179 - 46 70 895
E-Mail web@wanjascholz.de