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
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
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
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.
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
