Hilfreiche Platzhalter in leeren Neos-Inhaltssammlungen

Sebastian HelzleKategorien:
In Neos CMS werden im Backend Platzhalter angezeigt, wenn ein Element das Hinzufügen weiterer Inhalte erlaubt. Manchmal ist dieser quadratische Platzhalter schwer zu sehen oder nicht so hilfreich, da mehrere Bereiche nebeneinander liegen, die das Hinzufügen von Inhalten ermöglichen: 
 
Empty collections without a proper placeholder in Neos CMS


In diesem Artikel werde ich eine kurze Fusion + CSS-Lösung vorstellen, die ich in mehrere Kundenprojekte eingebaut habe, um die Inhaltsbereiche besser zugänglich zu machen.

Die Lösung

Überschreiben Sie zunächst den ContentCollection Fusion-Prototyp, um seinen Knotennamen über sein Style-Attribut in eine CSS-Variable zu übertragen (allerdings nur im Backend):

prototype(Neos.Neos:ContentCollection) {
    attributes {
        style = ${'--collection-label: "Add content to \"' + node.label + '\""'}
        style.@if.inBackend = ${node.context.inBackend && node.context.currentRenderingMode.edit}
    }
}

Als Nächstes fügen Sie die folgenden Stile zu Ihrem (Backend) Stylesheet hinzu:

.neos-backend {
  .neos-contentcollection [class*="_addEmptyContentCollectionOverlay"] {
    cursor: pointer;
    height: 41px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;

    &::before,
    &::after {
      display: inline-block;
      color: #adadad;
      opacity: 0.5;
      transition: opacity 0.2s ease;
      line-height: 41px;
    }

    &::after {
      margin: 0 1rem;
      content: "\21e7";
      animation: empty-collection-arrow 2.5s infinite 2s;
    }

    &::before {
      content: var(--collection-label, "Add content");
    }

    &:hover {
      &::before,
      &::after {
        opacity: 1;
      }
    }
  }
}

Dann sollte es in etwa so aussehen:

Empty content collections with placeholders in Neos CMS

Der anklickbare Bereich ist nun größer und der Platzhalter zeigt, welchen Bereich Sie tatsächlich auswählen.

Stellen Sie sicher, dass Sie Ihr CSS so anpassen, dass eine leere Sammlung nicht höher als 20px gerendert wird, da die Neos.Ui den Platzhalter in diesem Fall ausblenden würde.

Zusätzliche Hinweise

In Neos 8.4 und 9.0 habe ich die Funktion fertiggestellt, Kindknoten in ihren übergeordneten Definitionen benutzerdefinierte Bezeichnungen zu geben. Das bedeutet, dass Sie für mehrspaltige Elemente nicht unbedingt benutzerdefinierte NodeTypes für die Spalten erstellen müssen, um sprechende Bezeichnungen zu erhalten:

'Neos.Demo:Content.Columns.Two':
  superTypes:
    'Neos.Neos:Content': true
  ui:
    label: 'Two columns'
  childNodes:
    column0:
      label: 'Left column'
      type: 'Neos.Neos:ContentCollection'
    column1:
      label: 'Right column'
      type: 'Neos.Neos:ContentCollection'

Zusammenfassung

Das war's schon. Ich hoffe, Sie können die Redakteure in Ihrem Projekt damit ein bisschen glücklicher machen, so wie ich es konnte.

Es ist immer gut, Redakteure zeigen zu lassen, wie sie arbeiten, um Usability-Probleme im Backend zu erkennen. Ich habe dieses Problem ein paar Mal erkannt, als sie versuchten, Inhalte zu den richtigen Containerelementen hinzuzufügen. Also habe ich die Elemente verbessert, damit sie besser beschriftet sind und angezeigt werden, wenn sie leer sind.