Monat: Dezember 2014

wordpress – how to write responsive posts-part 2

30. Dezember 2014 - wordpress

Responsive posts/ YAML framework with WP shortcodes

In this follow-up to the first part we will write a plugin to create responsive posts. The plugin provides the following shortcodes:

‚cap‘ for caption right to or under an image
‚img_f‘ for caption under image, both floating left
‚2c_l‘ for column right
‚2c_r‘ for column left

In diesem Beitrag wollen wir ein Plugin schreiben, um responsive Posts zu erzeugen . Es unterstützt folgende shortcodes:

‚cap‘ Bildtext rechts oder darunter
‚img_f‘ Bildtext unter einem Bild, beide floaten links
‚2c_l‘ rechte Spalte
‚2c_r‘ linke Spalte

The code:

/*
Plugin Name: nf_post_styler
Plugin URI: http://www.it-in-a-box.com/
Description: some simple styles for posts
Author: Norbert Felgendreher
Version: 1.0
Author URI: http://www.it-in-a-box.com/ 
*/

if ( !function_exists('add_action') ) {
	header('Status: 403 Forbidden');
	header('HTTP/1.1 403 Forbidden');
	exit();
}
if ( !class_exists('simple_styles_for_posts') ) { 
	class simple_styles_for_posts {

	function __construct() {
	
		add_shortcode('cap', array(&$this, 'caption_right_or_below'));
		add_shortcode('img_f', array(&$this, 'image_floats_in_text'));
		add_shortcode('2c_l', array(&$this, 'two_columns_left'));
		add_shortcode('2c_r', array(&$this, 'two_columns_right'));
		
	}

	function caption_right_or_below( $atts, $content = null) {
		return '<div class="ym-contain-dt">' . $content . '</div>';
		}
	function image_floats_in_text( $atts, $content = null) {
		return '<div class="float-left">' . $content . '</div>';
		}
	function two_columns_left( $atts, $content = null) {
		return '<section class="ym-grid linearize-level-2">'.
		'<article class="ym-g50 ym-gl"><div class="ym-gbox">' . $content . '</div></article>';
		}
	function two_columns_right( $atts, $content = null) {
		return '<article class="ym-g50 ym-gr">'.
			'<div class="ym-gbox">'. $content . '</div></article></section>';
		}
	
	} // End Class
	$simple_styles_for_posts = new simple_styles_for_posts();
} 

Examples:

Please use shortcodes whithout whitespace inside square brackets
Caption left or under image:
[ cap ]
your image.jpg
your caption
[ /cap ]
Image with caption, both floating left:
[ img_f ]
your image.jpg
your caption
[ /img_f ]
lorem ipsum ...

two columns:
[ 2c_l ]
column left content
[ /2c_l ]
[ 2c_r ]
column right content
[ /2c_r ]

Both, 2c_l and 2c_r shortcodes must be present, otherwise a markup error will happen.
Download of plugin here

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

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

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

It-in-a-box: neues responsive WordPress Blog Theme mit YAML 4

11. Dezember 2014 - wordpress

Back to the roots

It-in-a-box.com hat sich ein neues Layout verpasst. Es ist responsiv geworden und sollte nun auch auf einem Smartphone seinen Platz finden. Die roots waren WordPress und YAML4. Beide sind genial und nicht allzu schwer zu verheiraten.

Man erstellt sich interaktiv ein YAML Layout (bei YAML 4 mit thinkintags.com)
und zerlegt die Index-Datei in header, main und footer. In header und footer baut man die für WordPress wichtigen Tags ein.

Das ist an vielen Stellen schon beschrieben worden und muss nicht wiederholt werden.

Viel Spaß damit

English Summary: this is a short note of how to combine WordPress with YAML 4 framework in my blog. If You need more information please leave a comment.