search

Gernott / mask

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

Make mask compatible with the bootstrap package #519

Open linawolf opened 1 year ago

linawolf commented 1 year ago

The bootstrap package requires it's own DataProcessors and layouts so that things like frame or padding-to-top settings work.

When I use mask I have to do the following steps manually:

Adjust the TypoScript:

# lib.contentElement defined in 
tt_content.mask_logo < lib.contentElement
tt_content.mask_logo {
    templateName = Logo
    dataProcessing.100 = MASK\Mask\DataProcessing\MaskProcessor
}

Move the Template into the path used by bootstrap package, i.e. EXT:my_sitepackage/Ressources/Private/Templates/ContentElements/

Add the layout to the template:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<f:section name="Header"> My Custom Mask Header </f:section>
<f:section name="Main">
    My custom Mask Body
</f:section>
</html>

As the bootstrap backage is wide-spread it would be nice if this worked out-of-the-box

nhovratov commented 1 year ago

I think integrating the bootstrap_package Layout should work the same as for FSC layouts. Check out this guide: https://docs.typo3.org/p/mask/mask/main/en-us/Guides/FluidStyledContent.html The only difference to your solution is, that you don't override the individual Mask CTypes, but adjust the lib.maskContentElement snippet.

linawolf commented 1 year ago

Unfortunary it does not really work like that as you need special DataProcessors etc for the bootstrap package:

image

nhovratov commented 1 year ago

Ah ok, I'm not that deep into bootstrap package. When I have some spare time, I will definately have a look into it. But first priority is compatibility with TYPO3 v12 now.

nhovratov commented 1 year ago

@linawolf For me this works by adding it to the sitepackage. The static template of the sitepackage must be after the bootstrap package. The only difference from the guide is the added dataProcessing. No need to move the Templates.

lib.maskContentElement {
    partialRootPaths.0 < lib.contentElement.partialRootPaths.0
    layoutRootPaths.0 < lib.contentElement.layoutRootPaths.0

    dataProcessing < lib.contentElement.dataProcessing
    dataProcessing.100 = MASK\Mask\DataProcessing\MaskProcessor

    settings < lib.contentElement.settings
}

Templates look like this:

<f:layout/>

<f:section name="Header"/>

<f:section name="Main">
    <!-- Mask -->
</f:section>
pstranghoener commented 1 year ago

@nhovratov Maybe also a good hint for the documentation?