$typoscript = '
  10 = TEXT
  10.value = Hallo Welt!
';

$parserInstance = t3lib_div::makeInstance('t3lib_tsparser');
$parserInstance->parse($typoscript);

$output = $this->cObj->COBJ_ARRAY($parserInstance->setup);

Voila: Wir haben mit ein paar Zeilen Code ein COA-Objekt instanziert, konfiguriert und den gerenderten Inhalt in der PHP-Variable $output abgelegt.

Beim Design der neuen Seite habe ich mich diesemal auf folgende Punkt konzentriert:

• Weg mit allem Überflüssigen: Fokus auf dem Inhalt
• Inhaltsabhängiges Layout: Bilder müssen anders präsentiert werden als normale Posts
• Große Überschriften, viel Whitespace
• Mehr Fokus auf die (zugegebenermaßen selteneren) Textposts – Die sollen nicht zwischen den vielen Bildern verloren gehen

Die Umsetzung sollte folgende Kriterien erfüllen

• Lean HTML
• Sauberes CSS
• Saubere Umsetzung in WordPress Theme-Infrastruktur

Meiner Meinung nach ist mir das ganz gut gelungen: Mal schauen, wie sich die Seite weiter bewährt und bei den Leuten auf Dauer ankommt.

Die Funktionsbeschreibung

Generell nimmt KB Content Slide die TypoScript-Definition eines Contentelements entgegen und sucht zuerst auf der aktuellen und danach allen übergeordneten Seiten danach. Wird das definierte Element gefunden, wird es zurückgeliefert. Das entspricht einer Vererbung: Ist das gesuchte Element auf einer Elternseite definiert, wird es auch auf allen Unterseiten dargestellt.

Die Standardnutzung

Wie auch in der Dokumentation beschrieben, ist es ein einfaches zB. die rechte Contentspalte auf allen Unterseiten darzustellen. Dazu definiert man nur den entsprechenden Marker im Template (zB. ###RECHTE_SPALTE###) und weist diesem den Inhalt des Plugins zu:

page.10.marks.RECHTE_SPALTE < plugin.tx_kbcontentslide_pi1

Da das Plugin ja noch nicht wissen kann, welche Spalte man angezeigt haben möchte, muß man das direkt danach noch konfigurieren:

page.10.marks.RECHTE_SPALTE {
  content.select.where = colPos=2
}

Jetzt wird es interessant

Nach Blick in das (sehr schlanke) Plugin selber offenbart sich seine Eleganz: In das Attribut content darf in Wirklichkeit alles reindefiniert werden: KB Content Slide geht in einer Schleife alle Seiten der Vererbungslinie durch, setzt die globale Variable $GLOBALS["TSFE"]->contentPid und läßt Typo3 das definierte Inhaltselement instanzieren. Wird ein Inhaltselement zurückgegeben wird die Schleife gestoppt: Wir haben, was wir suchten.

Hier die TypoScript-Standarddefinition des content-Attributs:

plugin.tx_kbcontslide_pi1 {
  content = CONTENT
  content {
    table = tt_content
    select {
      pidInList = this
      where = colPos=0
      orderBy = sorting
    }
  }
}

Page Resource Bilder vererben und ausgeben

Mit solchem Wissen ausgestattet lassen sich natürlich ganz lässige Dinge erledigen. Hiermit gebe ich zB. ein zentral hinaufgeladenes Bild (Page Properties / Resources / Files) auf allen Unterseiten aus:

tpl.image = COA
tpl.image {

  10 = TEXT
  10.value = <div id="image">

  20 < plugin.tx_kbcontslide_pi1
  20.content.table = pages
  20.content.select.where >

  20.content.renderObj = IMAGE
  20.content.renderObj {
    file.import = uploads/media/
    file.import.field = media
    file.import.listNum = 0
  }

  30 = TEXT
  30.value = </div>

}

Create a page template file

So let’s start with our new page template: Create a file named tpl.yapb.mosaic.php in your current theme folder.

Throw in some WP Metadata

As a first step we define a standard PHP comment at top with meta data so WordPress can identify this file as template:

<?php /* Template Name: YAPB Photo Mosaic Page (Prototype) */ ?>

Create some infrastructure

Now some default infrastructure for WP templates like calling the header, starting the WP loop, displaying the page title and content:

<?php
  get_header(); ?>
  <!-- Let's start the WordPress loop -->
  <?php if (have_posts()): while (have_posts()): the_post(); ?>
    <?php global $post; ?>
    <div class="post">
      <h1><a href="<?php echo get_permalink() ?>"><?php the_title(); ?></a></h1>
      <?php the_content('read more...'); ?>

Define what you want

To display the thumbnails of all our photos, we need to know what we want to fetch exactly. In my case, i assign each photoblog post to a special category “photoblog”. That category is configured in YAPB – so i can ask for it’s id and get all (or at least the last 1000) posts of that category with a simple WordPress function. Additionally i use this php part to define the format of the thumbnails i want to display on this page:

<?php
  // Let's get the last 1000 photoblog entries
  $photoblog_posts = get_posts( 'category=' . get_option('yapb_default_post_category') . '&numberposts=1000' );
  // Let's define the needed thumbnail format
  $thumbConfig = array( 'h=80', 'q=100', 'fltr[]=usm|60|0.5|3' );
?>

Loop through the fetched posts

Since we should have all needed posts now, we simply cycle through all of them, get the image and display the thumbnails. In this sample i use a unordered list as structure for the images:

<ul>
  <?php foreach($photoblog_posts as $photoblog_post): ?>
    <?php if (!is_null($image = YapbImage::getInstanceFromDb($photoblog_post->ID))): ?>
      <li><a title="<?php echo $photoblog_post->post_title ?>" href="<?php echo get_permalink($photoblog_post->ID) ?>"><img src="<?php echo $image->getThumbnailHref($thumbConfig) ?>" width="<?php echo $image->getThumbnailWidth($thumbConfig) ?>" height="<?php echo $image->getThumbnailHeight($thumbConfig) ?>" alt="<?php echo $photoblog_post->post_title ?>" /></a></li>
    <?php endif ?>
  <?php endforeach ?>
</ul>

Close the previously created infrastructure

To cleanly finalize the page template we now close the previously opened WordPress loop and call the footer.

<?php endwhile; endif; ?><!-- end of the WP loop -->
<?php get_footer(); ?>

The complete file may be found in this .zip file (275 KB).

Finally just use the new page template

To use the page template, just go to your admin panel, write a new page and choose your newly created page template – Voila: You have your first YAPB mosaic page!