Prevent Div-Wrapping on Inline-Elements

Hi,
in SourceCode there are a lot of

-Wrapper surounding Inline-Elements like <h1> in Headline.
Is it possible to prevent this behavior?
Would I have to write own NodeTypes for this?
Or is it inpossible, because of inline-edititing?

I can’t find an easy solution. Only found some typo3-neos-chats few years old.

Hey @mad,

could you specify a bit more? It depends on the nodetype you use. In general you could for instance disable the the classes that are added:
https://github.com/neos/neos/blob/master/Resources/Private/TypoScript/Prototypes/Content.ts2#L18

But could you give a more concret example? It might depends on the NodeType you use.

Hey stolle,

Headlines with [h1],[h2],[h3],…Text with [p] and form wrapped with 1 (form) or 2 (h1,…p) Div-Tags. Maybe more, that I don’t realize so far…
With large number of content items, the additional Dom-elements will multiply and makes the page unnecessary heavy.
How could I disable best the the classes that are added. Or where I have them added by mistake?
Thanks for all your help!

I did the classes disabling, i guess :persevere:
I create a NeosContent.ts2 in NodeTypes and include this with include: NodeTypes/* in my Root.ts2
Within:

# prevent neos default div wrapping each inline editable item
##
prototype(TYPO3.Neos:Content) {
    attributes.class.@process.nodeType >
}

Unfortunately in SourceCode, the wrapper are still there and exact the same amount of. Although without a value in class, but not disappeared.
Did I something wrong?

Nope. the attributes.class.@process.nodeType > removes the class. If you want to get rid of the whole div you can overrite the template and just remove. But the div with the class attributes is pretty often cool because you can wrap classes in their via typoscript based on inspector settings and so on

Thank you stolle,
I found the probebly right templates under:
/Packages/Application/TYPO3.Neos.NodeTypes/Resources/Private/Templates/NodeTypes/Headline.html, Text, …

Would like to overwrite this with own Template in own Site-Packages

##
# prevent default class in neos default div wrapping each inline editable item
##
prototype(TYPO3.Neos:Content) {
    attributes.class.@process.nodeType >
}

##
# overwrite the default Headline-Template: so unnecessary div-wrap will prevented
##
prototype(TYPO3.Neos.NodeTypes:Headline){
    templatePath = 'resource://Ms.MySite/Resources/Private/Templates/NodeTypes/Headline.html'
}

But this doesn’t work :
Error :

 Template file "resource://Ms.MySite/Resources/Private/Templates/NodeTypes/Headline.html" could not be loaded                 

Path seems to be right, because with a typo in path Ms.MySite > Mt.MySite

Invalid
 resource URI 
"resource://Mt.MySite/Resources/Private/Templates/NodeTypes/Headline.html":
 Package "Sm.SmarterDesign" is not available.

Maybe there is an streight forward way to overwrite the Template in own Site-Package? I can’t find in docu, forum-search or google.


###Is this the right template for headline in neos?

{namespace neos=TYPO3\Neos\ViewHelpers}
<div{attributes -> f:format.raw()}>
    {neos:contentElement.editable(property: 'title')}
</div>

###AND
if I delete Line 2 and 4 in Headline.html in the origional Template, the outer div-wrapper disapeared, but the inner one is still there
###AND
after deleting, Inline-Editing doesn’t work … <div{attributes -> f:format.raw()}>back in place Inline-Editing works fine again.

Maybe I had missanderstood the meaning of [quote=“stolle, post:5, topic:1015”]
If you want to get rid of the whole div you can overrite the template and just remove.
[/quote]
I can’t find a working solution for

  • remove and for
  • do it in the Site-Package .

Maybe someone knows, how I could overwrite the Template for a NodeType, so both <div>-wrapper will gone and Inline-Editing will still work?

Would be great!

Hi @mad,
so in general the override is correct. Just set templatePath for that nodeType. The error just says that it can not find your custom template. Where is it located in your filesystem?

You do need indeed a wrapper for the inline editing to work. If you check the https://github.com/neos/neos/blob/master/Classes/TYPO3/Neos/ViewHelpers/ContentElement/EditableViewHelper.php you can see the $tag property wich defaults to div. You could override that with anohter tag.

What you could also do is to render 2 templates. One for the editors and one for the frontend.

{namespace neos=TYPO3\Neos\ViewHelpers}
<f:if condition="{neos:rendering.inBackend()}">
<f:then>
    <div{attributes -> f:format.raw()}>
       {neos:contentElement.editable(property: 'title')}
    </div>
<f/then>
<f:else>
     {title}
</f:else

something like this. You could also add an @if or somethint in your prototype and render different sections or html files

1 Like

Thank you,
now it rocks -> Source-Code without needless <div>-Tags

Solution for other reader:

Content Root.ts2 or included file

###
# overwrite the default Headline-Template: so unnecessary div-wrap will prevented
###
prototype(TYPO3.Neos.NodeTypes:Headline){
    templatePath = 'resource://VendorName.VendorSite/Private/Templates/NodeTypes/Headline.html'
}

#IMORTANT:
Don’t know why, but in resource://-path is not the real path (real path would be VendorName.VendorSite/Resources/Private/Templates/NodeTypes/Headline.html)
##Delete «Resources» in path!

Content in Headline.html

{namespace neos=TYPO3\Neos\ViewHelpers}
<f:if condition="{neos:rendering.inBackend()}">
    <f:then>
        <div{attributes -> f:format.raw()}>
        {neos:contentElement.editable(property: 'title')}
        </div>
    </f:then>
    <f:else>
        {title -> f:format.raw()}
    </f:else>
</f:if>
  • Inline-Editor works
  • div are gone
    ###Hope will help others!

Great stolle, thanks again!

1 Like

That’s what resource:// implies. It is a resource and basically you have to read that as two separate things like in a url “Package” and then the path in resources (which could even be a different one than “Resources” if the package declares it differently).

Hey christianm,
Knowing the context and term resource:// => flexible and logical.
Thank you for explanation.

And then there is this: https://github.com/million12/M12.Utils
Haven’t checked it out, but these extra-<div>s are buggin me too.

Hi fgrell,
thanks for the link.
Because of my needs for Foundation F6 Grid, I was M12.Foundation (with M12.Utils dependencies) testing yesterday. Looked to heavy for my simple demands (only F6 Grid and | and in particular, to Foundation M12 works with F5).
The overwriting with own template works pretty fine for me.

Usually with clever design of node types it can already fit very well and you can remove most of the divs in frontend if you want to.

With «my» clever and smart design, sometimes I have to fight in Neos-Universe :confounded:.
There is a big amount of new stuff, thinking-approaches, tools and shortened explanations for insiders in docs and most of the time little to no strikes in Google. So, it is often difficult to dividing up and find a clear and reusable path through for a beginner like me and to think it could be a bit of clever what I tinker.

###But all in all I like the Neos-wayOfLife. There are so many big benefits I guess/hope/andSometimesKnowAllready.

Maybe unbelievable for pros like you, but occasionally all this typoscript vs. typoscript2, how to use in this fancy curly brackets and DollarSign in prototype, and why, what the hell with Eel and fluid-template, composer- and ./flow-stuff and all the nested and sometimes cryptic-looking configs.

When, what, why, and not less often how?
But with all the friendly help in forum, maybe it will happen :dancers:
Also my own «clever» design with less undesired div’s :ghost:

1 Like

Hi,

could you please elaborate how this works? Unfortunately I couldn’t find information on that in the documentation.

Overwriting all templates looks very dirty for me. Why is the wrapper there? Why can i not simply disable it? It Breaks my whole design.

Example:
Template
<h3 class="semibold">{neos:contentElement.editable(property: 'projects')}<sup>+</sup></h3>
expected output
<h3 class="semibold">1000<sup>+</sup></h3>
actual output
<h3 class="semibold"><div>1000</div><sup>+</sup></h3>
In the backend, it is acceptable, but not in the frontend. A block element inside a inline element is just crap.

I didn’t read all of the answers. It is not possible to remove the tags in editing mode. It’s an a aloha thing. But you can say it should be a span and not a div. Perhaps this helps.

Another way I do it quite often is to add something like this:

@process.clean = ${node.context.live ? String.pregReplace(value, '/<(\/)?div>/', '') : value}