Ein Bild anzeigen, wenn man in einem Akkordeon mit der Maus über einen Text geht

[TommiH]

Hallo Zusammen,

ich habe gerade meine erste Contao-Installation eingerichtet und versuche sie nun anzupassen.
In dem Zusammenhang würde ich gerne das im Betreff angesprochene realisieren. Geht das irgendwie? Oder gibt es dazu eine viel geschicktere Lösung?

Hintergrund: Ich würde gerne in den einzelnen Akkordeon-Klappelementen eine Text-Auflistung (Topic 1, Topic 2, Topic 3 usw.) machen und wenn man mit der Maus über den 'Topic 1' fährt, dann soll ein Bild dazu angezeigt werden, wo ist eigentlich relativ egal. Einfach zu Veranschaulichung des Topics.

Ist so etwas machbar? Geht vermutlich in die selbe Richtung, wie wenn man beim 'Überfahren' eines Bildes ein anderes/größeres Bild anzeigen will, das habe ich im Forum zwar schon gefunden, scheitert bisher aber daran, dass ich den TinyMCE irgendwie nicht installiert/aktiviert bekomme und das 'Erweiterte Einstellungen' bei mir zumindest nicht sehe (aber das ist wohl eine andere Baustelle)

Also erstmal geht es mir um obiges Problem. Ist sowas einfach - oder mit einer Erweiterung möglich?

LG
Tommi

[dazzle89]

Mir stellt sich die Frage, warum der TinyMCE nicht angezeigt wird.

Verwendest du das Standard-Akkordeon, das Contao zur Verfügung stellt?

Hier kann man ja entweder mit Einzelelementen arbeiten, wo es sowohl einen TinyMCE als auch ein Bild-Upload gibt, oder mit Umschlägen. Und innerhalb der Umschläge kann man beliebige Elemente einfügen, wie z.B. ein Bild.

[TommiH]

Ja, das mit dem TinyMCE irritiert mich auch, ich dachte der wird standardmäßig mit installiert - aber mir fehlt noch das Wissen, wie ich den nutzen kann (ich dachte ich könnte den in meinem Profil irgendwie für meinen User auswählen)

Was Akkordeon angeht - ja, ich nutze die mit Contao installierte Version. Aktuell nutze ich den Umschlag (Anfang/Ende) und dazwischen liegen Text-Elemente. Das funktioniert auch wie gewünscht. Nun habe ich aber z.B.:


Text1: SPIELGERÄTE
Ball
Ring
Stock

Text2: KLEIDUNG
Mütze
Hose
Jacke

usw.

Und wenn man nun mit der Maus über 'Mütze' fährt, dann soll halt das Bild einer Mütze erscheinen (das sind nur Beispiele) - aber so ist die Idee.
Aber ich vermute langsam fast, dass die Problematik an der nicht aktivierten/installierten TinyMCE Unterstützung liegt.
Müsste ich den unter 'ELEMENTTYP' angezeigt bekommen, wenn er (korrekt) installiert wäre? Ich dachte man würde generell auf TinyMCE umstellen, also für alle Textfelder.

Dann lassen wir das hier vlt. erstmal und ich suche erstmal nach der Lösung für den Editor.

LG
Tommi

[dazzle89]

Das ist komisch, vielleicht guckst du an der falschen Stelle im Backend? Ich hänge mal ein Screenshot bei, von einem "Text"-Inhaltslement, da sieht man den TinyMCE und den Bild-Upload.

Wie sieht dein Text-Element aus, wenn du es mit dem Stift/Bearbeiten-Symbol aufrufst?

[TommiH]

Hm, sieht bei mir nun irgendwie sehr ähnlich aus, oder nicht? Nur wenn ich ein Bild einfügen möchte, dann bekomme ich da nur, Quelle-Alternative Beschreibung-Höhe-Breite (sonst gibt es keine zusätzlichen Optionen)

Die Frage bleibt für mich, wenn ich den Text ja so lassen will - wie im Screenshot zu sehen ist, aber nur beim überfahren des Textes ein Bild anzeigen lassen möchte, ob das mit dem Editor geht/gehen sollte (In den Eigenschaften des Textes diesen quasi mit einem Link auf ein Bild versehen) oder ob das unter Contao irgendwie anders geht.


b1.jpg

[dazzle89]

Dann ist doch alles richtig aus meiner Sicht. Unter "Quelldatei" lädst du das Bild hoch bzw. es öffnet sich ein Popup mit der Dateiverwaltung, wo du das gewünschte Bild auswählst.

Der Effekt mit dem Bild hat nicht direkt mit Contao zu tun, sondern mit CSS. Falls in deinem Fall nichts dagegen spricht, würde ich aber für jedes Wort ein eigenes Text-Element verwenden. Also nicht ein Element, wo alle 5 Wörter in einem TinyMCE stehen, sondern 5 Elemente, die jeweils ein Wort im TinyMCE haben. So lassen sich die Selektoren im CSS besser ansprechen. Ich würde noch auswählen, dass das Bild UNTER dem Text dargestellt wird.

Das HTML sollte dann in etwa so aussehen:

<div class="ce_text block">
   <p>Ring</p>
   <figure class="image_container">
      <img src="files/ring.jpg" width="1920" height="1159" alt="">
   </figure>
</div>

Den Hover-Effekt könnte man ganz vereinfacht dargestellt z.B. so realisieren:

.ce_text figure {
   display: none;
}

.ce_text p:hover + figure {
   display: block;
}

[zonky]

für jedes Wort ein eigenes Text-Element verwenden

um das für Redakteure benutzbar zu machen, würde ich ein eigenes RSCE erstellen - dann kann Text und Bildauswahl gut eingebaut werden

[mlweb]

Ich würde erst einmal darüber nachdenken, ob das Konzept tatsächlich glücklich ist.

• über ein Bild Hovern ist durchaus ein übliches Szenario und die Nutzer tun das auch
• über Text Hovern um ein Bild angezeigt zu bekommen ist eher unüblich meine ich
• an Abfangen von Touchscreen und an Barrierefreiheit hast Du in dem Zusammenhang gedacht?

[TommiH]

@mlweb
1 - genau
2 - wenn man darauf hinweist, dann schon
3 - das ist durchaus ein Punkt, aber eine bestimmte Art an Information ist auf mobilen Geräten manchmal einfach gar nicht darstellbar, wenn es dafür aber auch nicht gedacht ist, passt das in meinen Augen schon.
Abgesehen davon, wie will man eine große Tabelle oder z.B. eine Karte (auch das brauche ich) auf einem kleinen (wenn auch hochauflösendem Display) vernünftig darstellen. Das geht IMO gar nicht, nur über Workarounds...

Führt hier aber zu weit. Ich fange, wie geschrieben, mit Contao erst an und hoffe mir in den nächsten Monaten auch mehr Wissen dazu anzueignen. Daher die Frage, ob sowas (einfach) möglich ist, ein geht/geht nicht oder macht wenig Sinn - denk nochmal drüber nach (wie von dir) war genau das was ich erwartet habe.

Nun weiß ich, auf die einfache Art geht es nicht, also nicht einfach nur TEXT im Editor eingeben und dann in den Eigenschaften ein zugeordnetes BILD hochladen/auswählen/anzeigen lassen, wenn man über den Text drüber fährt.
Alles gut, ich weiß Bescheid - lasse davon erstmal die Finger und evtl. bleibt dann vlt. der Workaround über TEXT->BILD (umwandeln) und dann wenn man über das Bild fährt ein weiteres Bild anzeigen, sowas in der Art.

Danke erstmal für die Infos, ich kümmere mich dann erstmal um den Inhalt und schaue ob ich die Idee anders gelöst bekomme.

LG
Tommi

[planepix]

Die Frage ist auch, ob und wie groß die Bilder sein sollen…

Wenn ich in Akkordeons Pfeile als Icons einbinde, dann lässt sich das via CSS mit ::before und ::after umsetzen.

Und so könnte man dann jedem Akkordeon Element eine CSS-Klasse geben und darin das gewünschte Bild definieren.

Benötigt dann zwei Bildzustände, die sich via CSS Spites verschieben lassen…