wordpress – how to write responsive posts-part 1

18. Dezember 2014 - wordpress

Wer bereits einen responsiven Blog hat und komplexere Beiträge mit Bildtexten unter den Bildern oder sogar mit Spaltenlayout schreiben möchte, findet hier ein paar Anregungen.
Strukturierte Beiträge mit Bildern, Bildtexten oder Spalten können trotz sorgfältig aufgebautem responsiven Layout der gesamten Seite schnell auf schmaleren Displays unleserlich werden.
Dagegen hilft nur eins: man muß auch den Post mit dem responsiven Framework stylen, mit dem die Seiten erzeugt wurden.
Im vorliegenden Fall ist dies YAML.

Many people don't need resposive posts as long as the basic framework of their blog is responsive enough.
But if you want to write more complex posts, it may become a concern.
In the following we describe how to create responsive posts with images, image captions and even colums using the YAMl framework.

Example 1:

Bild und Bildtext

image and caption

Lissabon037 600x400

Bildtext neben oder unter dem Bild, caption on the right side or below

Markup

<div class='ym-contain-dt'> 
your image.jpg
your caption
</div>

Das nach links gefloatete Bild und der Bildtext werden mit einem Div umgeben, das das Floaten beendet. ym-contain-dt ist eine Klasse des YAML Frameworks

The div around left floated image and caption stops floating of subsequent content. ym-contain-dt is a class of YAML Framework

Example 2:

Bild und Bilduntertext mit umfließendem Text

image and fixed caption below, floating in block of text

Lissabon037 600x400

Bildtext unter dem Bild, caption always below image

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Markup

<div class='float-left'>
your image
your caption
</div>
your text floating around image and caption

Ein Div umschließt Bild und Bildunterschrift und floated es nach links. Der Text läuft herum.

div encompasses image and fixed caption below, both floating in block of text

Example 3:

Zwei Spalten; ab einer bestimmten Display-Breite stehen die Spalten untereinander

two colums; from a certain display width on, the colums appear one below the other

Lissabon037 600x400

Bildtext unter dem Bild, caption below image

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Lissabon037 600x400

captionunder image, aditional text below image

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Markup for left column:

<div class='ym-grid linearize-level-2'>
<div class='ym-g50 ym-gl'>
<div class='ym-gbox'>
your image
your caption
you text
</div>
</div>

Markup for right column:

<div class='ym-g50 ym-gr'>
<div class='ym-gbox'>
your image
your caption
you text
</div>
</div>
</div>

Dies ist das aufwändigste Markup aller Beispiele. Im Post wird ein YAML Grid erzeugt. Die Klasse linearize-level-2 stellt die beiden Spalten unter einer bestimmten Display-Breite untereinander

This is the most sophisticated markup of all examples. We create a YAML grid that falls back to a linearized representation if display width is getting very small

Dies ist die zeitraubenste Methode, seine komplexen Beiträge zu schreiben. Alles muss im Textmodus des Editors angelegt werden. Im nächsten Teil schauen wir nach, welche Hilfsmittel WordPress und der Editor tinymce uns zur Verfügung stellen

As we have to create all this responsive blog structures in the text modus of the wordpress editor, we will investigate in the second part of this post what wordpress and it's tinymce editor offers us lazy people for help

Part 2 of this post