Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Globally Image crop variant for mask builded Content Elements with Crop variant image partial #618

Open
ms-wa opened this issue Feb 6, 2024 · 1 comment

Comments

@ms-wa
Copy link

ms-wa commented Feb 6, 2024

I want to use image CropVariants like this:

<picture>
    <source media="(min-width: 1600px)"
            srcset="{f:uri.image(src:'{file.uid}',treatIdAsReference:'1',width:'1600',cropVariant:'default',treatIdAsReference: 'true')}">

    <source media="(min-width: 1200px)"
            srcset="{f:uri.image(src:'{file.uid}',treatIdAsReference:'1',width:'1200',cropVariant:'desktop',treatIdAsReference: 'true')}">

    <source media="(max-width: 1199px) and (min-width: 1024px) and (orientation: landscape)"
            srcset="{f:uri.image(src:'{file.uid}',treatIdAsReference:'1',width:'1024',cropVariant:'tablet-landscape',treatIdAsReference: 'true')}">

    <source media="(max-width: 1023px) and (min-width:768px) and (orientation:portrait)"
            srcset="{f:uri.image(src:'{file.uid}',treatIdAsReference:'1',width:'1024',cropVariant:'tablet-portrait',treatIdAsReference: 'true')}">

    <source media="(max-width: 767px) and (orientation:landscape)"
            srcset="{f:uri.image(src:'{file.uid}',treatIdAsReference:'1',width:'767',cropVariant:'smartphone-landscape',treatIdAsReference: 'true')}">

    <source media="(min-width: 567px) and (max-width: 768px)"
            srcset="{f:uri.image(src:'{file.uid}',treatIdAsReference:'1',width:'600',cropVariant:'smartphone-portrait',treatIdAsReference: 'true')}">

    <f:image src="{file.uid}"
             treatIdAsReference="true"
             title="{file.title}"
             alt="{file.alternative}"
             class="img-fluid w-100 mw-100 h-auto mh-auto"
             height="{dimensions.height}"
             width="{dimensions.width}"
             loading="lazy"
    />
</picture>

i want to move code like this in an own Partial-Folder, but i cant render the partial-Code in my Content Element .html-Template.

I changed the Partial Template path but the TYPO3 System show me an error like this:

(1/1) #1225709595 TYPO3Fluid\Fluid\View\Exception\InvalidTemplateResourceException
The Fluid template files “/provider_extension /Resources/Private/Extension/fluid_styled_content/Partials/DropIn/Before/All.html", " / provider_extension /Resources/Private/Extension/fluid_styled_content/Partials/DropIn/Before/All", " / provider_extension/Resources/Private/Mask/Frontend/Partials/DropIn/Before/All.html", "/ provider_extension/Resources/Private/Mask/Frontend/Partials/DropIn/Before/All" could not be loaded.

How can i solve this problem basicly?

@nhovratov
Copy link
Collaborator

You probably want to use fluid_styled_content partials, right? So you need to include them, too. Here is a guide for FSC integration: https://docs.typo3.org/p/mask/mask/8.3/en-us/Guides/FluidStyledContent.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants