Vorschaubild mit (Lupen-)Grafik versehen

Hallo,

ich habe folgendes Problem mit Graphicsmagick 1.1.6 und Typo3 4.0.1:

Ich möchte die Vorschaubilder, die per Klick vergrößert werden können, mit eine kleinen Grafik versehen - also ein kleines Bild darüberlegen bzw. rendern.

Der folgende Graphicsmagick-Befehl macht exakt das, was ich möchte auf der Kommandozeile - eine kleine Grafik mit einer Lupe (lupe.png) wird links unten auf das Vorschaubild (bild.jpg) gerendert und das Resultat als Datei (resultat.jpg) gespeichert:
gm composite -gravity SouthWest \
"/pfad/zum/bild/lupe.png" \
"/pfad/zum/bild/bild.jpg" \
"/pfad/zum/bild/resultat.jpg"

Nun habe ich versucht diesen Befehl in die TS-Konfiguration einer Extension zu "übersetzen" und habe Folgendes in der Datei ext_typoscript_setup.txt eingetragen (was leider nicht klappt - es wird gar kein Bild mehr dargestellt):

images_single.file.params = composite -gravity SouthWest -compose over "/pfad/zum/bild/lupe.png"

Der folgende Befehl hingegen, als Test an gleicher Stelle eingefügt, funktioniert (das Bild wird um 45 Grad gedreht:

images_single.file.params = -rotate 45

Hat jemand eine Idee was ich noch probieren könnte? Ich sitze schon geraume Zeit daran und habe bereits einige TryAndError-Kombinationen durch :-)
Oder mache ich da etwas grundsätzlich verkehrt?

Gibt es vielleicht eine ganz andere Lösung, in Typo3 ein Bild über ein anderes zu rendern?

Guck mal bei typo3tutorials.org.

Das Thema wurde auch in diversen anderen Posts behandelt:
- #14135
- #35375

Danke adventuremaker, die Links sind sehr interessant. Aber das ist nicht ganz was ich wollte, oder ich verstehe es noch nicht so umzusetzen wie ich es bräuchte.

Die unicef-Lösung ist sicherlich geschickt gemacht, aber ich würde lieber die Lupe direkt auf das Bild rendern, als eine kleine Lupengrafik per CSS mit negativem margin über das Vorschaubild zu schieben. Wenn sich das nicht anders lösen lässt würde ich zur Not aber darauf zurückkommen.

Die andere Lösung unter http://www.typo3tutorials.org (31. Bilder in Inhaltselementen mit Grafik versehen) schaffe ich nicht für meine Erfordernisse umzusetzen. Bei dieser Lösung muss die Lupengrafik immer genauso groß sein wie die Vorschaugrafik. Leider sind die Vorschaubilder aber unterschiedlich groß.

Hier noch einmal genauer, wie ich mir das vorstelle. Am liebesten wäre mir, wenn alle Grafiken der Domain, die per "imageLinkWrap" als Vorschaugrafiken dienen, automatisch mit der Lupe versehen würden. Da ich keine Ahnung habe, wie man das machen könnte (vielleich ist das per "Hook" ganz einfach, aber wo müsste ich da suchen?), dachte ich daran, es erst einmal in den Dateien "ext_typoscript_setup.txt" der Extensions zu versuchen, in denen ja die Grafiken der Extensions per TS konfiguriert werden.

Hier ein Ausschnitt der Datei ext_typoscript_setup.txt einer Extensison, mit dem von mir versuchten Ansatz, per images_single.file.params einen Graphicsmagick-Befehl abzusetzen:

plugin.tx_obcookingrecipes_pi1 {
  ...
  images_single = IMAGE
  images_single.file.width = 200
  images_single.file.params =  composite -gravity SouthWest -compose over "/pfad/zum/bild/lupe.png"

  images_single {
    imageLinkWrap = 1
    imageLinkWrap {
      bodyTag = <body style="background-color:#000000;margin:0px;">
      wrap = <a href="javascript:close();">|</a>
      width = 800
      height = 800
      JSwindow = 1
      JSwindow.newWindow = 1
      JSwindow.expand = 0,0
      enable = 1
    }
  }
  ...
}

Inzwischen glaube ich, dass das so einfach nicht möglich ist. Ich finde aber auch nirgends eine Erklärung, wofür "file.params" eigentlich da ist. Wie oben gesagt funktioniert z.B. "file.params = -rotate 45".

Sorry, ich steh total auf der Leitung. Hat noch jemand einen kleinen Tip? Danke für die Hilfe.

Ich habe nun zwei Lösungen, wie ich eine Lupe über die Vorschaubilder von Extensions rendern lassen kann.

Hier meine Vorgehensweise:

Im "Master-Template" meiner Typo3-Installation definiere eine der folgenden Konstanten (muss nicht sein, erleichtert aber später evtl. Änderungen am Design):

# Eine Lupengrafik mit Graphicsmagick über die Vorschaugrafik rendern.
privateConstants.imageTransforms.addEnlargeIconString = -draw 'image Over 5,5 0,0 /pfad/zur/lupengrafik/lupe.png'

ODER (was mir inzwischen besser gefällt)

# Eine Lupe mit den internen Zeichenfunktionen von Graphicsmagick zeichnen.
privateConstants.imageTransforms.addEnlargeIconString = -matte -fill '#aaaaaa' -draw 'rectangle 0,0 22,22' -fill white -stroke black -draw 'circle 7,7 3,3' -draw 'line 12,12 20,20'

Den Graphicsmagick-Befehl im Template-Setup (oder im Setup der Extensions - in der Regel in der Datei ext_typoscript_setup.txt) für die Vorschaugrafik zur Anwendung eintragen:

plugin.tx_obcookingrecipes_pi1.images_single.file.params = {$privateConstants.imageTransforms.addEnlargeIconString}

Für tt_news z.B. wäre dafür (IMO) im Template-Setup folgende Angabe notwendig:
plugin.tt_news.displaySingle.image.file.params = {$privateConstants.imageTransforms.addEnlargeIconString}

Einziges Manko bei beiden Lösungen: die Lupe befindet sich in der linken oberen Ecke. Ich kann sie so nicht sauber in der linken unteren Ecke plazieren. Falls ich dafür noch die Lösung finde poste ich sie hier.

hey wusel,
ich musst diesen Thread hier noch einmal aufwärmen, denn ich komme bei dem Thema absolut nicht voran.
Deinen Typoscript Code habe ich ausprobiert nur leider greifen beide Varainten nicht...Zum Beispiel habe ich den folgenden Code-Snippet in Constants eingebunden:

privateConstants.imageTransforms.addEnlargeIconString = -draw 'image Over 5,5 0,0 /pfad/zur/lupengrafik/lupe.png'

Leider verändern sich die tt_news Bilder nicht.... #angry#
Hast du vielleicht oder irgend jemand sonst einen Tip`?

Dank für die Antworten im voraus!

Hallöchen rob-master,

ich gehe dann mal davon aus, dass du eine vorhandene Lupengrafik über bzw. auf dein tt_news-Vorschaubild zeichnen lassen willst und Graficmagick korrekt eingerichtet ist und funktioniert. Du musst dazu natürlich keine Konstanten definieren - ich fand das einfach nur praktisch, um den Graphicmagick-Befehl mehrfach zu verwenden (bei anderen Extension-Vorschaubildern).

Du kannst es z.B. mal im Template-Setup von tt_news folgende Angabe versuchen:

# Eine Lupengrafik mit Graphicsmagick über die Vorschaugrafik rendern.
plugin.tt_news.displaySingle.image.file.params = -draw 'image Over 5,5 0,0 /pfad/zur/lupengrafik/lupe.png'

Natürlich muss der Pfad zur Lupengrafik auch stimmen, d.h. dort muss auch eine Grafik (z.B. im GIF- oder PNG-Format) liegen. Falls du keine Lupengrafik hast kannst du die zweite Variante probieren, mit der die Lupe von Graficsmagick gezeichnet wird. Näheres zu den command-line-Befehlen findest du unter http://www.graphicsmagick.org/www/GraphicsMagick.html.

Die Lösung von mir ist keine sehr saubere Lösung, da sie das TYPO3-System komplett umgeht. Es ist keinesfalls gewährleistet, dass das so bei künftigen Versionen (TYPO3 und Graficmagicks) noch funktioniert.

Falls du damit Probleme hast würde ich an deiner Stelle vielleicht eher auf eine andere Lösung zurückgreifen. Es gibt eventuell eine Extension, mit der du per Style-Sheet eine Lupengrafik über das Vorschaubild legen kannst. Das wird so auch bei www.unicef.de eingesetzt, glaube ich. Schau mal in diesem Thread #1463972
Du musst eventuell ein wenig nach der Extension suchen, ich weiß nicht wie sie heißt und ob man das noch irgendwo runterladen kann.

Viel Glück,
Ottmar

so für alle anderen die vor ähnlichem Problem stehen. Ich habe meine Lupe jetzt mit folgendem TS eingebunden:

displaySingle.image.wrap = | <div class="lupe"><img src="clear.gif" width="20" height="20" border="0" /></div>

Mit CSS habe ich dann die Klasse lupe mit folgenden Styles angesteuert:

.lupe {
	background: url( '../../pics/zoom.gif' ) bottom left no-repeat;
	position: relative;
	margin: -25px 0px 0px 5px !important;
	width: 19px;
	height: 20px;
	background-position:1 2;
}

Das ganze ist natürlich keine elegante Lösung, aber zumindest half es den tt_news Bildern eine Lupe zu verpassen.

Andere Lösungen die ich hier im Forum fand halfen mir bez. tt_news nicht weiter, da in meiner tt_news Version der Befehl caption_stdWrap nicht interpretiert wird.

Ich hoffe es hilft jemandem!