Hallo Leute,
mit dem unten stehenden Script bekommen alle Bilder automatisch ein Wasserzeichen, in Abhänigkeit zur Vergrößerung auch gleich mit einer Lupe.
Das gleiche möchte ich für die Bilder für tt_news erreichen. Leider geligt es mir einfach nicht das zu adaptieren. Kann jemand helfen?
############################################
# Wasserzeichen für aller Bilder
tt_content.image.20.1.file >
tt_content.image.20.1.file {
import.current = 1
width.field = imagewidth
m.mask.import.cObject = IMG_RESOURCE
m.mask.import.cObject.file = GIFBUILDER
m.mask.import.cObject.file {
XY = [10.w],[10.h]
format = jpg
10 = IMAGE
10.file {
import.current = 1
width.field = imagewidth
maxW = {$styles.content.imgtext.maxW}
maxW.override.data = register:maxImageWidth
maxWInText = {$styles.content.imgtext.maxWInText}
maxWInText.override.data = register:maxImageWidthInText
}
20 = BOX
20.dimensions = 0,0,[10.w],[10.h]
20.color = #FFFFFF
30 = IMAGE
30.file = fileadmin/template/img/mask_lupe.gif
30.align = l,b
30.if.isTrue.field = image_zoom
40 = TEXT
40.text.data = date:Y
40.text.noTrimWrap = |© Copyright | Firma ®|
40.align = right
40.offset = -7,[10.h]-7
40.fontSize = 14
40.fontColor = #333333
40.antiAlias = 1
}
m.bgImg.import.cObject = IMG_RESOURCE
m.bgImg.import.cObject.file = GIFBUILDER
m.bgImg.import.cObject.file {
XY = [10.w],[10.h]
format = gif
10 = BOX
10.dimensions = 0,0,10,10
10.color = #333333
}
}
############################################
## Wasserzeichen für vergrößertes Bild
tt_content.image.20 {
1 {
imageLinkWrap {
enable = 1
bodyTag = <body style="background:#FFF; margin: 0px; padding: 0px;">
wrap = <a href="javascript:close();"> | </a>
JSwindow = 1
JSwindow.expand = 20,20
JSwindow.newWindow = 1
JSwindow {
altUrl {
cObject = IMG_RESOURCE
cObject {
file = GIFBUILDER
file{
XY = [10.w],[10.h]
format = jpg
quality = 100
10 = IMAGE
10.file.import.current = 1
10.file.width = 800m
10.file.height = 600m
20 = TEXT
20.text.data = date:Y
20.text.noTrimWrap = |© Copyright | Firma ®|
20.align = right
20.offset = -7,[10.h]-7
20.fontSize = 14
20.fontColor = #333333
20.antiAlias = 1
}
}
}
}
}
}
}
Oh weh... ich sehe wohl den Wald vor lauter Bäumen nicht, bekomme das nicht gebacken. Hat keiner eine zündende Idee für mich? 😢
Naja, dann antworte ich mir mal selbst. o.O
Ich bin ein Stück weiter gekommen und die Bilder werden nun vom GIFBUILDER "angefasst"!
Jedoch wird das eigentliche Bild aus den tt_news nicht gerendert. Was mache ich falsch?
plugin.tt_news.displayList.image >
plugin.tt_news {
displayList.image{
stdWrap.cObject = IMAGE
stdWrap.cObject {
file = GIFBUILDER
file {
XY = [20.w],[20.h]
backColor = black
// ein Rahmen
10 = BOX
10.dimensions = 1,1,178,178
10.color = white
// Das funktioniert nicht, Bild wird nicht aus dem Datensatz geholt (??)
20 = IMGAGE
20.file = IMG_RESOURCE
// klappt!
30 = IMAGE
30.file = fileadmin/img/mask.gig
30.align = left
}
}
}
Es ist sehr betrüblich, wenn man hier auch nach Tagen überhaupt keine Antwort bekommt. Da stellt man sich die Frage, ob die Lösung zu simpel oder viel zu kompliziert ist. 🙁
Inzwischen habe ich es aber fast geschafft, - mehr oder minder durch ausprobieren - Denn über dieses Thema hat sich wohl noch niemand so den Kopf verbrochen wie ich.
Mein Ansatz funktioniert nun. Allerdings klappt das mit der Maskierung nicht richtig. Das Icon wird eingebaut, aber der restliche Hintergrund des Bildes ist weiß. Das hat wohl irgendwie mit bgImg zu tun aber ich finde einfach keinen weg das anzuwenden.
Ich hoffe, dass sich nun jemand damit ein wenig besser auskennt als ich. Hier mein Ansatz.
plugin.tt_news.displayList{
image >
image.stdWrap.cObject = IMAGE
image.stdWrap.cObject.file = GIFBUILDER
image.stdWrap.cObject.file {
XY = [10.w],[10.h]
10 = IMAGE
10.mask = fileadmin/img/watermark.gif
10.bgImg = fileadmin/img/watermark.gif
10.align = l,b
10.file {
import=uploads/pics/
import.data = field:image
import.listNum = 0
import.override.field = image
maxW = 150
maxH = 90
}
}
}
Hallo dfluess,
wahrscheinlich hast du mitlerweile eine Lösung für das Problem. Da ich dein Beitrag aber Interresant, Hilfreich und Amüsant fand Poste ich hier mal meinen Lösungsansatz.
Was mir nicht gelungen ist, ist das Wasserzeichen hochzuskalieren, abhängig von der Bildgröße. Aber ansonsten Funktioniert es bei mir..
plugin.tt_news.displayList{
image >
image.stdWrap.cObject = IMAGE
image.stdWrap.cObject.file = GIFBUILDER
image.stdWrap.cObject.file {
XY = [10.w],[10.h]
10 = IMAGE
10.file {
import=uploads/pics/
import.data = field:image
import.listNum = 0
import.override.field = image
maxW = 150
maxH = 90
}
#Wasserzeichen (140x40)px darüberlegen
#positionierung in der Mitte des Objektes 10 - 11/2
11 = IMAGE
11.offset = [10.w]/2-70,[10.h]/2-20
11.file = fileadmin/img/watermark.gif
}
}
Vielleicht ist der Code ja von nutzen..
Amüsant? Da zerbreche ich mir den Kopf und da findet das einer amüsant o.O Naja. Nein, ich habe das Projekt erst einmal zur Seite gelegt, hatte wichtigere Dinge zu erledigen. Aber Dein Lösungsansatz ist natürlich interessant 🙂
Dass mit der Größe des Wasserzeichens, stimmt, habe mir auch im Ansatz schon Gedanken gemacht. Vielleicht müsste man das Wasserzeichen in Abhängigkeit der Größe des Ausgangsbildes über den offset rendern lassen? Das Problem ist ja, dass das Wasserzeichen schon drauf ist, bevor das Bild in die gewünschte Größe skaliert wird. Große Bilder haben dann ein zu kleines Wasserzeichen..
Das mit dem Amüsant bitte nicht falsch verstehen, ich bin dir über diesen Beitrag sehr dankbar, er hat mich bei der konfiguration vom tt_news Modul entscheidend weitergebracht.
In dem unteren Beispiel habe ich ein wasserzeichen mit fester Größe genommen und es mit dem offest mittig positioniert.
Wenn man das wasserzeichen aber dynamisch der größe des Bildes anpassen will müsste man wie folgt vorgehen.
Wie gesagt, beim skalieren habe ich nur das Problem das ich das Wasserzeichen nicht Hochskalieren kann. Runterskalieren dagegen funktioniert schon.
Man müsste das Wasserzeichen nur groß genug erstellen und es würde dann über das gesamte Bild im richtigen Verhältnis gerändert. Es müsste dann aber ein über das gesamte Bild einheitliches Wasserzeichen sein, da man den Inhalt des Wasserzeichens dann nicht mehr unbedingt bewusst Positionieren kann.
plugin.tt_news.displayList{
image >
image.stdWrap.cObject = IMAGE
image.stdWrap.cObject.file = GIFBUILDER
image.stdWrap.cObject.file {
XY = [10.w],[10.h]
10 = IMAGE
10.file {
import=uploads/pics/
import.data = field:image
import.listNum = 0
import.override.field = image
maxW = 150
maxH = 90
}
#Wasserzeichen drüberlegen
11 = IMAGE
11.offset = 0,0
11.file.maxW = [10.w]
11.file.maxH = [10.h]
11.file = fileadmin/img/watermark.gif
}
}
Hallo,
da ich sehe, dass sich schon einige mit dem Thema beschäftigt haben, hat vielleicht einer eine Lösung für mein Problem. Wieso bekomme ich kein Bild bei Lightbox angezeigt? Hier mein bisheriger Code. Wenn ich an der Stelle 10 = IMAGE kein GIFBUILDER mache, dann funktioniert das, allerdings ohne Wasserzeichen.
plugin.tt_news.displaySingle {
imageCount = 10
image >
image.stdWrap.cObject = COA
image.stdWrap.cObject {
wrap = <div class="news-img-container">|</div>
10 = IMAGE
10.file = GIFBUILDER
10.file {
XY = [10.w],[10.h]
10 = IMAGE
10.file.import.data = TSFE:lastImageInfo|origFile
10.file.width = 300|*|86c
10.file.height = 300|*|86c
40 = TEXT
40.text = © TEST
40.align = right
40.offset = -7,[10.h]-7
40.fontSize = 12
40.fontColor = #aaaaaa
40.antiAlias = 1
}
5.imageLinkWrap = 1
5.imageLinkWrap {
JSwindow >
bodyTag >
height >
wrap >
width >
enable = 1
typolink {
parameter.cObject = IMG_RESOURCE
parameter.cObject {
file = GIFBUILDER
file{
quality = 100
format = jpg
XY = [10.w],[10.h]
10 = IMAGE
10 {
file.import.data = TSFE:lastImageInfo|origFile
file.maxW = {$styles.content.imgtext.linkWrap.width}
file.maxH = {$styles.content.imgtext.linkWrap.height}
}
/*
15= IMAGE
15 {
offset = [10.w]-170,[10.h]-40
file = {$filepaths.images}overlay.png
#mask = {$filepaths.images}mask.png
mask = {$filepaths.images}mask_i.png
#mask.width =
#mask.height =
}
*/
}
}
# rel-Attribut hinzufügen, für Galerie-Funktion
ATagParams = class="lightbox" rel="gallery" title="{field:title}"
ATagParams.insertData = 1
}
}
}
}
Freue mich über jede Idee bzw. Lösung.
Gruß
fkotzek4