TYPO3 GIFBUILDER with image from FLUID

Question

I want to use the GIFBUILDER to make an image with an overlay. The image should therefore be delivered via FLUID.

This is what I have so far:

FLUID

<f:for each="{product.images}" as="image">
   <f:cObject typoscriptObjectPath="lib.overlay" data="{image: image.uid}" />
</f:for>

TypoScript

lib.overlay = IMAGE
lib.overlay {
    file = GIFBUILDER
    file {
        XY = 300,500
        format = jpg
        quality = 80
        10 = IMAGE
        10 {
            file.import = {field:image}
            file.import.insertData = 1
            file.import.treatReferenceAsId = 1
        }
        20 = TEXT
        20 {
            text = Copyright
            fontColor= #dddddd
            fontSize = 30
            offset = 100,100
            align = left
            antiAlias = 1
        }
    }
}

At the moment, I only get a white Background with the label Copyright on it. However if I do somethinge like

10 = IMAGE
10.file = fileadmin/path/to/file

all works just fine.

So my question is: How do I pass the Image from FLUID correctly to TypoScript?

And as addition to this, how do I pass a value from the Contentelement via FLUID to make the overlay text dynamic too?

Best regards and Thanks in advance

UPDATE:

output of {image} (one image):

Can you post the results of <f:debug>{image}</f:debug> inside your for loop? — Rudy Gnodde
@RudyGnodde I've updated the question with a screenshot of the debug output — th3r3alpr0

Rudy Gnodde Rudy Gnodde · Accepted Answer · 2020-05-19T07:12:12

Replace

10 = IMAGE
10 {
    file.import = {field:image}
    file.import.insertData = 1
    file.import.treatReferenceAsId = 1
}

with

10 = IMAGE
10 {
    file.import.field = image
    file.treatIdAsReference = 1
}

treatReferenceAsId should be treatIdAsReference. It's also a property of file, not of file.import. I'm not sure why file.import = {field:image} and insertData = 1 doesn't work, but file.import.field = image does. It's cleaner anyway, which is why I tried it.

You might also want to add a width and height or maxW and maxH to the image, unless you're 100% sure they're always 300x500 pixels.

TYPO3 GIFBUILDER with image from FLUID

1 Answers