Search code examples
typo3fluxfluidview-helpers

TYPO3: How to use flux:field.inline.fal image as background

In a template in my extension I use the field.inline.fal viewhelper: Documentation

Now I want to use this as a background image. I tried:

// This is the input in the configuration section
<flux:field.inline.fal name="image" required="1" maxItems="1" minItems="1"/>

//This is the output
{v:content.resources.fal(field: 'image') -> v:iterator.first() -> v:variable.set(name: 'image')}
<div class="image" style="background: url({image.id});">

For some reason the frontend output is:

<div class="image" style="background: url(1:/data/images/path/image.jpg);">

but it should be

<div class="image" style="background: url(/rootfolder/data/images/path/image.jpg);">

Why doesn't it display as described in the Documentation? What did I do wrong?

Solution

  • Found the answer. Via <f:debug>{image} I found the variable {image.url} which gives the whole path.

    Working code:

      <div class="image" style="background: url(/{image.url});">