Project

General

Profile

Actions
Copy link

Bug #83173

closed

f:uri.image inline viewhelper doesn't work like normal viewhelper

Added by Markus Dübbert over 6 years ago. Updated over 6 years ago.

Status:
Closed
Priority:
Should have
Assignee:
-
Category:
Fluid
Target version:
9.0
Start date:
2017-11-30
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
8
PHP Version:
7.0
Tags:
typo3 fluid viewhelper
Complexity:
Is Regression:
Sprint Focus:

Description

in the section HeaderAssets

the normal f:uri.image viewhelper works with media queries, the inline viewhelper does not.

@ <f:section name="HeaderAssets">
<style>
<f:for each="{v:page.resources.fal(field: 'media')}" as="media" iteration="iteration">

section {
                        background-image: url('{f:uri.image(src:'{media.url}', width: '288', height:'106', cropVariant: 'test')}');
                    }
@media (min-width: 640px) {
                         section {
                              background-image: url('{f:uri.image(src:'{media.url}', width: '320', height:'126', cropVariant: 'test')}');
                        }
                     }
}
&lt;/f:for&gt;
            &lt;/style&gt;
        &lt;/f:section&gt;@

in the @media (min-width: 640px) section there is no image src generated.

if i replace the inline viewhelper with:

<f:uri.image src="{media.url}" width="320" height="126" cropVariant="test" />

it works

Actions
Copy link
 #1

Updated by Markus Dübbert over 6 years ago 

<f:section name="HeaderAssets">
            <style>
                 <f:for each="{v:page.resources.fal(field: 'media')}" as="media" iteration="iteration">

                    section {
                        background-image: url('{f:uri.image(src:'{media.url}', width: '288', height:'106', cropVariant: 'test')}');
                    }

                     @media (min-width: 640px) {
                         section {
                              background-image: url('{f:uri.image(src:'{media.url}', width: '320', height:'126', cropVariant: 'test')}');
                        }
                     }

                </f:for>
            </style>
        </f:section>
Actions
Copy link
 #2

Updated by Claus Due over 6 years ago

  • Status changed from New to Closed

The problem is not the ViewHelper. The problem is that you use it inside CSS syntax which gets confused with Fluid syntax. There are two ways you can/should work around this; tag mode usage is not one of them:

1. You can use `f:format.raw` around the opening or closing CSS curly braces to disrupt the expression detection
2. You can use CDATA around (some of) the contents of the style tag (but this would require you to assign the image URI to a variable or it wouldn't be output)

Closing the issue since it isn't a bug; it's how the pattern detection works, hairy bits and all.

Actions
Copy link

Also available in: Atom PDF