Zum Inhalt springen

Wrapper div.neos-contentcollection im Frontend entfernen

Erstellt am 24. Juli 2014 · 6 Antworten · letzte Antwort am 24. Juli 2014

Tags: Frage

einpraegsam.​net ·

Neos bastelt um alle meine Contentelemente ein

<div class="neos-contentcollection">
  // CE
</div>

Über TypoScript lässt sich die Klasse und sogar der Tag ändern, jedoch der Wrap nicht abschalten. Ganz Abschalten wäre vermutlich auch nicht sinnvoll, da sonst die Bearbeitung im Backend (also bei Login) nicht mehr funktioniert.

Klasse oder Tag ändern:

prototype(TYPO3.Neos:ContentCollection) < prototype(TYPO3.Neos:Content) {
  attributes.class = 'newClassName'
  attributes.tagName = 'ul'
}

Diverse Hinweise im Netz haben bei mir leider nur teilweise oder gar nichts gebracht. Die beschriebenen Änderungen unter https://forge.typo3.org/issues/53046 machen bei mir bei der Bearbeitung im Backend Probleme (ich will aber nicht ausschließen, dass der Fehler bei mir liegt).

Letztlich habe ich die Klasse ContentCollectionImplementation für die ContentCollection durch meine eigene ersetzt. Ich schmeiße den Wrap raus, so lange ich nicht im Backend eingeloggt bin.

In der Root.ts2:

prototype(TYPO3.Neos:ContentCollection) < prototype(TYPO3.Neos:Content) {
	# Overwrite class to get rid of div.neos-contentcollection wrappers in Frontend
	@class = '\\In2code\\In2code3Site\\TypoScript\\ContentCollectionImplementation'
}

Neue Datei - in meinem Fall also Packages/Sites/Vendor.Site/Classes/Vendor/Site/TypoScript/ContentCollectionImplementation.php

<?php
namespace Vender\Site\TypoScript;

use TYPO3\Flow\Annotations as Flow;

/**
 * Class ContentCollectionImplementation
 * @package Vendor\Site\TypoScript
 */
class ContentCollectionImplementation extends \TYPO3\Neos\TypoScript\ContentCollectionImplementation {

	/**
	 * The default authentication manager
	 *
	 * @Flow\Inject
	 * @var \TYPO3\Flow\Security\Authentication\AuthenticationProviderManager
	 */
	protected $authenticationManager;

	/**
	 * Render the list of nodes, and if there are none and we are not inside the live
	 * workspace, render a button to create new content.
	 *
	 * @return string
	 */
	public function evaluate() {
		if ($this->authenticationManager->isAuthenticated()) {
			return parent::evaluate();
		}
		return \TYPO3\TypoScript\TypoScriptObjects\AbstractCollectionImplementation::evaluate();
	}
}

Der Nachteil an der Lösung ist natürlich, dass ich ein anderes HTML-Konstrukt habe, so bald ich mich in Neos einlogge. Aber eigentlich möchte ich die Ausgabe von Neos an meine HTML-Vorlage anpassen und nicht umgekehrt 🙂

Eventuell lässt sich das Problem auch schöner lösen, der Hinweis soll aber anderen eine stundenlange Suche ersparen.

Cheers, Alex

Unbekannter Benutzer ·

Ja, das ist schon richtig soweit. Ist von unserer Seite nicht vorgesehen, weil wir erstens das Markup in Frontend und Neos gleich halten wollen und zweitens auch davon ausgehen, dass Du in der Regel einen Contentbereich auch in irgendeinen wrap rendern willst. Aber man könnte natürlich das optional als flag einbauen wenn das häufiger gefragt wird.

Nachtrag: Ich wüsste natürlich gerne den konkreten use-case um zu sehen wieso da kein Wrap ist.

mostwanted ·

hallo christian,

Aber man könnte natürlich das optional als flag einbauen wenn das häufiger gefragt wird.

man könnte dann die wraps weg-konfigurieren? das wär sehr praktisch. das hätten sich in meinem umfeld schon einige leute unabhängig voneinander gewünscht. funktioniert das inline editing in in der admin-oberfläche ( "backend" ) dann noch?

LG Roland

Unbekannter Benutzer ·

Wir hatten hier eben gerade den konkreten Fall, das wir komplett fertiges HTML / CSS und JS hatten.

Nach der Integration in NEOS muss aufgrund der Wrapper vieles an CSS (so Dinge wie :first-child die plötzlich nicht mehr greifen) und auch JS angepasst werden. Wenn nun der Designer Änderungen nachliefert, hat man bei der Integration viel Aufwand, in diese Änderungen die eigenen NEOS-Anpassungen einzupflegen.

Außerdem geht durch die Wrapper auch einiges an Semantik kaputt, da diese hierfür ja eigentlich nicht benötigt werden, bzw. auch überflüssig sind.

Ein alternativer Weg um für NEOS die Contentbereiche zu kennzeichnen wäre hier super. Meine Ideen dazu wären z.B. über Custom data-Attribute die NEOS hinzufügt oder die Wrapper-Klassen beim Definieren der CEs selber hinzuzufügen. Ich weiß, redet sich leicht, aber evtl. kann ja über diese Problematik mal nachgedacht werden 🙂

Aber sonst: Kompliment ans NEOS-Team, gute Arbeit.

Huaba

Unbekannter Benutzer ·

Nein, nein, im Backend sind die wraps nötig. Optional wäre dann nur fürs frontend. Deshalb gibts das noch nicht, sonst hätten wir die wraps auch ganz weggelassen, wenn wir die nicht brauchen würden wir die einfach gar nicht machen 🙂

Unbekannter Benutzer ·

@Huaba, wenn das irgendwie möglich ist, würde ich gerne mal das entstandene Fluidtemplate sehen mit der Info welche Wrapper da zu viel sind, einfach um mal zu gucken wie das so aussieht... Gerne per Mail/PM

einpraegsam.​net ·

Hi Christian,

wenn man sich den Quelltext vom Neos Frontend ansieht, bekommt man eine Menge Div-Container.
Eventuell ist es auch möglich, die Inneren (wenn ja, wie?) über eine spezielle Konfiguration zu entfernen. Aber jeder Neuling sucht erst mal nach "neos-contentcollection" um mit dem Container anzufangen.

Habe gerade mal Neos nackt installiert und einmal Text und danach 2 Spalten (links Text, rechts Header und Text) angelegt.

<div class="neos-contentcollection">
  <div class="typo3-neos-nodetypes-text">
    <div>
      <p>Original Text<br></p>
    </div>
  </div>
  <div class="container columns-6-6 typo3-neos-nodetypes-twocolumn">	
    <div class="column">
      <div class="neos-contentcollection">
        <div class="typo3-neos-nodetypes-text">
          <div>
            <p>Col 1 Text<br></p>
          </div>
        </div>
      </div>
    </div>
    <div class="column">
      <div class="neos-contentcollection">
        <div class="typo3-neos-nodetypes-headline">
	  <div>
            <h1>Col 1 Headline<br></h1>
          </div>
        </div>
        <div class="typo3-neos-nodetypes-text">
          <div>
            <p>col2 Text<br></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>