TYPO3 Fluid FAL images get wrong path if I will show it as background image

Question

Hi I'm working with FluidTYPO3 and the latest TYPO3 Core 7.6 and Flux/Fluid Extensions.

I'm using a FAL-relation with:

<flux:field.inline.fal name="backgroundimage" minItems="1" maxItems="1" />

Now I can show my Image in frontend with the following snippet (the for/each is obsolet, I only have one image):

<f:for each="{v:content.resources.fal(field: 'backgroundimage')}" as="image">
    <f:image treatIdAsReference="1" src="{image.id}" alt=""/><br/>
</f:for>

The image will be rendering like <img src="fileadmin/user_upload/.."

But I need my Image as a Background Image, so I've tried:

<f:for each="{v:content.resources.fal(field: 'backgroundimage')}" as="image">
 <div class="back" style="background-image: url('{image.id}');"></div>
</f:for>

But I'll get .. <div class="back" style="background-image: url('1:/Editors_English/image.jpg');"></div>

I think the treatIdAsReference is missing, but how does it works? I don't know .. thanks for your help.

Answer 1

You need to do basically the same thing as you did with the image in a <img>-tag: Use a ViewHelper to render the image URL for you. In this case, you want only the URL, without the <img> tag around it, so you have to use the ViewHelper f:uri.image instead. It's also helpful to use it in inline notation, which will look like this:

<f:for each="{v:content.resources.fal(field: 'backgroundimage')}" as="image">
  <div class="back" style="background-image: url('{f:uri.image(src: image.id, treatIdAsReference: 1)}');"></div>
</f:for>

I'm not sure if you actually need the treatIdAsReference parameter, you can probably leave it out.