Gernott / mask

TYPO3 Extension Mask
https://www.facebook.com/typo3mask
GNU General Public License v2.0
126 stars 86 forks source link

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

Open ms-wa opened 7 months ago

ms-wa commented 7 months ago

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 commented 7 months ago

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