tt_news und ImageMagic

Jeder kennt in der tt_news die userPageBrowserFunc mit der man einen eigenen Pagebrowser programmieren kann. Auch für die Bilder gibt es mit der imageMarkerFunc die Möglichkeit, Einfluss auf die Ausgabe der Bilder zu nehmen. Mit Hilfe von ImageMagic lassen sich so sogar völlig neue Bilder kreieren. In der Datei example_imageMarkerFunc.php im res-Verzeichnis der tt_news findet sich ein schönes Beispiel für eine eigene imageMarkerFunc, auf das ich hier aufbauen werden.

Einer unserer Kunden wollte, dass alle Bilder in der LIST-View zunächst ausgegraut sind und erst beim überfahren mit der Maus farbig werden. Außerdem sollte hinter jedem Bild ein 93x92px großer Rahmen sein, da die Bilder unterschiedlich groß sein können. In der Detail-Ansicht einer News sollten dann aber wieder die Originalbilder ohne den Rahmen zu sehen sein. Zunächst einmal habe ich eine Kopie der Bilder im jpg-Format erstellt, da es sich in einem späteren Schritt als günstiger herausgestellt hat, nur mit jpgs zu arbeiten.

$imgInfo = $imgObj-> imageMagickConvert($lConf['image.']['file'],'',$lConf['image.']['file.']['maxW'],$lConf['image.']['file']['maxH'],'-quality 100','0','');
$cmd = $imgObj-> imageMagickPath.'convert -colorspace RGB -normalize -quality
100 '.$imgObj->wrapFileName($imgInfo[3]).' '.$imgObj->wrapFileName((substr($imgInfo[3],
0, -4)).'_SMALL.jpg');
exec($cmd);

Danach hab ich noch eine Kopie des Bildes erstellt, diesmal aber als Graustufenbild („-colorspace GRAY“):

$cmd = $imgObj->imageMagickPath.'convert -colorspace
GRAY -normalize -quality 100 '.$imgObj->wrapFileName((substr($imgInfo[3],
0, -4)).'_SMALL.jpg').' '.$imgObj->wrapFileName((substr($imgInfo[3],
0, -4)).'_SMALL_GRAY.jpg');
exec($cmd);

Nun kommt der Hintergrund:

$bgFile = 'fileadmin/template/img/square_gold.jpg';
$bgInfo = $imgObj->imageMagickConvert($bgFile,'',93,92,'-quality
100','0','');

Zuerst zum farbigen Bild…

$cmd = $imgObj->imageMagickPath.$imgObj->combineScript.'
-quality 100 '.$imgObj->wrapFileName($bgInfo[3]).' '.$imgObj->wrapFileName((substr($imgInfo[3],
0, -4)).'_SMALL.jpg').' -gravity center -geometry -1-2 '.$imgObj->wrapFileName((substr($imgInfo[3],
0, -4)).'_SMALL.jpg');
exec($cmd);

…und dann zum Graustufenbild.

$cmd = $imgObj->imageMagickPath.$imgObj->combineScript.'
-quality 100 '.$imgObj->wrapFileName($bgInfo[3]).' '.$imgObj->wrapFileName((substr($imgInfo[3],
0, -4)).'_SMALL_GRAY.jpg').' -gravity center -geometry -1-2 '.$imgObj->wrapFileName((substr($imgInfo[3],
0, -4)).'_SMALL_GRAY.jpg');
exec($cmd);

Das Bild auf dem Hintergrund wird zentriert („-gravity center“) und dann, aufgrund eines Schattens, noch mal leicht verschoben („-geometry -1-2“).

Nun füge ich die beiden erzeugten Bilder noch nebeneinander zu einem Bild zusammen („+append“):

$cmd = $imgObj->imageMagickPath.'convert
-quality 100 '.$imgObj->wrapFileName((substr($imgInfo[3], 0, -4)).'_SMALL_GRAY.jpg').'
'.$imgObj->wrapFileName((substr($imgInfo[3], 0, -4)).'_SMALL.jpg').'
+append '.$imgObj->wrapFileName((substr($imgInfo[3], 0, -4)).'_SMALL.jpg');
exec($cmd);

Warum füge ich die Bilder zusammen? Nun, ich werde das News-Template so umbauen, dass ich das zusammengefügte Bild als Hintergrund eines <span>-Tags mit einer festen Größe von 93x92px in einem <a>-Tag einfügen kann. Bei einem Mousover über das <a>-Tag verschiebe ich einfach das Hintergrundbild im <span>-Tag um 93px nach links. Außerdem wird das Template so umgebaut, dass sowohl das Bild als auch der Text darunter in ein <a>-Tag kommen und nur durch <span>-Tags getrennt werden. Dadurch kann ich, wenn die Maus über dem Bild ist, sowohl das Bild als auch den Text beeinflussen und umgekehrt. Außerdem ist das dann noch W3C-Konform! 😉

Hier das umgebaute News-LIST-Template. Außerhalb des äußeren <div class=“news-list-item“>-Tag ist alles wie im Standard-Template!

<div class="news-list-item">
<!--###LINK_ITEM###-->
<span class="h2"><a>###NEWS_TITLE###</a></span>
<span class="p"><a>###NEWS_SUBHEADER###</a></span><!--###LINK_ITEM###--></div>

Und hier das CSS dazu:

.gold .news-list-item a span.image {
  float: left;
  width: 93px;
  height: 92px;
  background-position: 0 0;
  background-repeat: no-repeat;
  margin-left: 6px;
  margin-top: 0;
  margin-bottom: 3px;
}
.gold .news-list-item a:hover span.image {
  background-position: -93px 0;
}
.gold .news-list-item a span {
  font-weight: normal;
  font-size: 11px;
  text-align: center;
  font-family: Arial, sans-serif;
  border: none;
  text-decoration: none;
  padding: 0;
  margin: 0;
  margin-top: 3px;
  color: #8F8F8F;
}
.gold .news-list-item a span.h2 {
  font-weight: bold;
  display: block;
  border-top: 1px dashed #D7CDCC;
  margin-top: 10px;
  padding-top: 4px;
  margin-bottom: 2px;
  clear: left;
}
.gold .news-list-item a:hover span {
  color: #9B5300;
}

Somit brauche ich weder Javascript noch versteckte Layer oder solche Geschichten. Und wenn die Bilder nach dem ersten Aufruf gecached sind, ist die Performance auch nicht schlecht, da das Bild ja schon komplett geladen ist und bloß
noch um ein paar Pixel verschoben wird. Achtung: Die ImageMagic-Befehle, die ich hier verwende, gelten für die Version
4.2.9, Bei der v6 schaut die Sache schon wieder leicht anders aus. Aber für die v6 gibt’s hier: http://www.imagemagick.org/Usage/ ne recht tolle Anleitung mit vielen Beispielen. Gibt es so etwas auch für die v4? Ich hab verzweifelt danach gesucht, aber leider nichts gefunden und musste nach dem Try-and-Error-Verfahren
arbeiten, was dann doch recht zeitintensiv war.

Nun ja, vielleicht ist dieser Artikel ja eine kleine Anregung für den ein oder anderen, was man so mit den News und ImageMagic machen kann… 😉

Euer Marco

Veröffentlicht unter TYPO3 Technik
4 Kommentare auf “tt_news und ImageMagic
  1. julia sagt:

    Hallo Marco,

    ich habe mit großem Interesse Dein tt_news / ImageMagic Tutorial gelesen.

    Frage:
    Die ganze Programmierung findet ja in der in der example_imageMarkerFunc.php statt. Wie und in welcher Form muss diese Datei dann includiert bzw. angesprochen werden? Über Typoscript oder über eine andere PHP-Datei?

    … oder ist ein spezielles Ansprechen / includieren der Datei gar nicht nötig?

    Liebe Grüße
    Julia

  2. Marco sagt:

    Hallo Julia,

    in der example_imageMarkerFunc.php findest du ganz obern ein paar auskommentierte Zeilen in denen steht, wie das ganze einzubinden ist.

    Im TypoScript-Setup benötigst Du so ne Zeile damit die Funktion zur Verfügung steht:
    includeLibs.imageMarkerFunc = EXT:tt_news/res/example_imageMarkerFunc.php

    und das hier, damit die Funktion auch verwendet wird:
    plugin.tt_news {
    # call user function
    imageMarkerFunc = user_maskImages
    }

    Ich hoffe, das hilft die weiter…

    P.S.: Ich musste grade feststellen, dass unser Blog ein paar zeichen in die HTML-Codes umwandelt, &gt; meint also > und &lt; meint <

  3. Steffen sagt:

    Hallo Marco,
    erst einmal Danke für die Anleitung. Könntest Du bitte noch erklären wie Du die Listenbilder jeweils als Hintergrundbild eingebunden hast?

    Danke und Gruß

  4. Tamela sagt:

    This website really has all the information I wanted concerning this subject and didn’t know
    who to ask.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*