typoscriptfusionneoscms

Neos CMS NodeTypes: How to make href link editable in UI


I would like to make a content element in Neos for a teaser. The whole teaser box should be linked to an existing page inside of Neos or extern. How can I define the href link in the right panel in the backend of the Neos UI?

Also if I click on an element inside the teaser box for inline editing in the Neos backend it should not jump to the link.

Here is what I have so far:

Teaserbox.html:

{namespace neos=Neos\Neos\ViewHelpers}
<a href="#" {attributes -> f:format.raw()}>
    <neos:contentElement.editable property="title" tag="p" class="medium" />
    <neos:contentElement.editable property="text" tag="p" />
    <p class="link">
        <neos:contentElement.editable property="link" tag="span" />
    </p>
</a>

NodeTypes.Teaserbox.yaml:

'Test.Package:Teaserbox':
  superTypes:
    'Neos.Neos:Content': true
  ui:
    label: Teaser Box
    icon: icon-newspaper
    inspector:
      groups:
        teaser:
          label: Teaser Box
  properties:
    title:
      type: string
      ui:
        label: 'Title Label'
        inlineEditable: true
        aloha:
          placeholder: 'Title'
    text:
      type: string
      ui:
        label: 'Text Label'
        inlineEditable: true
        aloha:
          placeholder: 'Text'
    link:
      type: string
      ui:
        label: 'Link Label'
        inlineEditable: true
        aloha:
          placeholder: 'Link'

Solution

  • Apparently I was on the wrong track. Meanwhile I found out that my request can be solved easily with the rendering conditions of Neos. Now I have a different code part for the backend and frontend view. In the preview mode my button does not have a href tag so I can use inline editing.

    Teaserbox.html

    {namespace neos=Neos\Neos\ViewHelpers}
    <f:if condition="{neos:rendering.inPreviewMode()}">
        <f:then>
            <a class="teaser">
        </f:then>
        <f:else>
            <a class="teaser" href="{linkUrl}">
        </f:else>
    </f:if>
    

    NodeTypes.Teaserbox.yaml:

    'Test.Package:Teaserbox':
      superTypes:
        'Neos.Neos:Content': true
      ui:
        label: Teaser Box
        icon: icon-newspaper
        inspector:
          groups:
            teaser:
              label: Teaser Box
      properties:
        linkUrl:
          type: string
          defaultValue: '#'
          ui:
            label: 'URL'
            reloadIfChanged: true
            inspector:
              group: ziehli
              editor: 'Neos.Neos/Inspector/Editors/LinkEditor'
    

    Here the documention about it: http://neos.readthedocs.io/en/stable/References/ViewHelpers/Neos.html