TYPO3 - Responsive Design

Links

Ab Typo3 V6.2 sind Lösungen mit mehreren Bild Sourcen integriert. So funktioniert es:

http://t3n.de/magazin/typo3-6-2-lts-responsive-images-235194/

Das TypoScript wird in der offiziellen Doku im Image Objekt beschrieben:

http://docs.typo3.org/typo3cms/TyposcriptReference/latest/ContentObjects/Image/Index.html

Allgemeine Infos für ältere Typo3 Versionen und zum Verständnis

http://maddesigns.de/responsive-typo3

http://typo3blogger.de/responsive-design-mit-typo3/

http://t3n.de/news/responsive-webdesign-typo3-nutzt-446306/

Zu Hochauflösenden Screens mit 1,5 oder 2 Facher Pixeldichte:

http://typo3blogger.de/typo3-retina-images/

Extension die den noscript Ansatz nutzt:

https://github.com/rtp-ch/rtp_imgquery

Ansatz mit Skeleton Framework, Hinweise zu Arbeitszeiten und zur Extension: Responsive Content Elements (z. Zt. veraltet)

http://www.speedprogs.de/t3cs12/

http://typo3.org/extensions/repository/view/flexslider Responsiver Slider

Media Queries

Siehe: Media Queries

Screens

Ansätze

Bildschirmgrößen für Media Queries

Bildschirmauflösungen der verschiedenen Geräte:

DESKTOP meist mindestens 1024 x 768  -> je nach Browser / OS aber mind. 1003px verfügbar.
iPad 1&2 1024px * 768 px
iPhone * 320 Pixel

Die Retina Displays nutzen die logische Pixelanzahl und werden von den normalen Media Queries für IPad und IPhone unterstützt. Um explizit diese Displays anzusprechen, z.B. für Bilder in höhere Auflösung, muss die Query um die Bedingung

webkit-min-device-pixel-ratio: 2 

ergänzt werden.

folgende Breakpoints bieten sich an:

Smartphones:

@media only screen and (max-device-width: 480px) 

IPad (Hochformat)

@media only screen and (min-device-width: 480px) and (max-device-width: 768px)

Evtl. für kleine Tablets und Bildschirme / Browserfenster

@media only screen and (min-device-width:768px) and (max-device-width: 1002px)

Desktop, StandardCSS

Layout komplett bei max 1003 Pixeln (Bilder werden nicht skaliert).

Weiteres Beispiel

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
 
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
 
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
 
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
 
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
 
/* highres devices */
@media screen and (-moz-min-device-pixel-ratio:1.5),
	screen and (-o-min-device-pixel-ratio:3/2),
	screen and (-webkit-min-device-pixel-ratio:1.5),
	screen and (min-device-pixel-ratio:1.5){}

Bilder

Header Bilder

CSS3 Eigenschaft background-size

Problem Höhe -> zwei Container die mit z-index und position übereinander fixiert werden. Dadurch kann im hinterem Container der Header als normales Bild mit height: 100%, width: 100% eingesetzt werden, im Container darüber können wir später das Infomenü oder ein Logo plazieren.

Anpassungen für TYPO3

Responsive Images in TYPO3

TYPO3 - Responsive Images

• http://blog.teamgeist-medien.de/2016/04/typo3-responsive-images-mit-fluid-styled-content-fsc.html

Responsive Images ab v6.2

Gibt im Moment (2016/09) eine css_styled_content aber keine für fluid_styled_content.

• http://t3n.de/magazin/typo3-6-2-lts-responsive-images-235194/
• http://typo3worx.eu/2016/03/responsive-images-on-typo3-websites/

Extensions für Responsive Images

• https://typo3.org/extensions/repository/view/fluid_styled_responsive_images
• Tutorial: https://somethingphp.com/responsive-images-typo3/
• https://docs.typo3.org/typo3cms/extensions/fluid_styled_responsive_images/Index.html
• http://typo3worx.eu/2016/03/responsive-images-on-typo3-websites/
• http://www.felixnagel.com/blog/artikel/2016/03/30/typo3-responsive-images-in-fluid-using-typoscript/

Problem Image Attribute

Hinweis die Width-Attribute im Image Tag lassen sich nicht in V 4.x entfernen. Evtl. kann man sie über JavaScript aus der fertig gerenderten Seite werden:

JS

$('img').removeAttr('width').removeAttr('height');

Ansonsten muß man schauen daß man mit CSS weiterkommt.

Anpassungen Typo3 4.5

Evtl. mindest Typo3 Version 4.7 voraussetzen ? Quelle: http://typo3blogger.de/responsive-design-mit-typo3/

Das Layout sollte optimalerweise flexibel angelegt sein, also keine Pixelwerte. Folgende Typoscript-Snippets müssen ins Typoscript-Setup Template eingetragen werden:

tt_content.image.20 {
  imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap"> | </div>
  imageColumnStdWrap.dataWrap = <div class="csc-textpic-imagecolumn"> | </div>
}

Auch beim Rendering selbst muss das style-Attribut entfernt werden.

tt_content.image.20 {
  rendering {
    dl {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"> | </div>
      imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
      oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###" > | </dl>
    }
    ul {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"><ul> | </ul></div>
      imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"><ul> | </ul></div>
      oneImageStdWrap.dataWrap = <li class="csc-textpic-image###CLASSES###"> | </li>
    }
    div {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"> | </div>
      imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
      oneImageStdWrap.dataWrap = <div class="csc-textpic-image###CLASSES###"> | </div>
    }
    simple {
      imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap csc-textpic-single-image"> | </div>
    }
  }
}

Optional kann man auf das HTML5 Markup für Bilder mit Bildunterschrift umstellen.

tt_content.image.20 {
  renderMethod = figure
  rendering {
    figure {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"> | </div>
      imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
      noRowsStdWrap.wrap = 
      oneImageStdWrap.dataWrap = <figure class="csc-textpic-image"> | </figure>
      imgTagStdWrap.wrap =   |  
      editIconsStdWrap.wrap = <div> | </div>
      caption.wrap = <figcaption> | </figcaption>
      caption.required = 1
    }
  }
}

Das wichtigste ist allerdings, dass zusätzlich Anpassungen am CSS getätigt werden. Für flexible Bilder muss folgende Regel zugewiesen werden:

img, embed, object, video {
  max-width: 100%;
  height: auto;
  width: auto;
}

Die Anweisung legt fest, dass Bilder (sowie embed-, object, und video-Tags) eine max. Breite von 100% haben, also so groß wie die CSC-Konstante styles.content.imgtext.maxW her gibt. Zudem müssen die Höhe und Breite auf auto gesetzt werden. Desweiteren müssen einige CSS-Styles von css_styled_content mit dem eigenen Stylesheet überschrieben werden:

DIV.csc-textpic-above DIV.csc-textpic-imagewrap,
DIV.csc-textpic-below DIV.csc-textpic-imagewrap,
DIV.csc-textpic DIV.csc-textpic-imagewrap UL LI,
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image {
	float: none;
}

Anpassungen TYPO3 4.7

Obige Anpassungen müßten auch hier passen.

Noscript Ansatz (siehe auch Responsive Webdesign)

Hat bei mir unter TYPO3 4.7 nicht funktioniert. Müßte man mal genauer anschauen

#adaptive images lib for TYPO3
lib.adaptive-images = COA
lib.adaptive-images {
1 = TEXT
1.value = <figure class="csc-textpic-imagecolumn###CLASSES###"><noscript
10 = IMG_RESOURCE
10 {
file.import.current = 1
file.maxW = 480
file.override.data = {$styles.content.imgtext.maxW}
stdWrap.noTrimWrap = | data-small="|" |
}
20 = IMG_RESOURCE
20 {
file.import.current = 1
file.maxW = {$styles.content.imgtext.maxW}
file.override.data = register:maxImageWidth
stdWrap.noTrimWrap = | data-large="|" |
}
1000 = TEXT
1000.value = >|</noscript>###CAPTION###</figure>
}

IE 7 und 8

Hier funktionieren keine Media Queries. Helfen kann respond.js das inzwischen auch in Modernizr eingeflossen ist.