Support » Allgemeine Fragen » Bilder verschwinden beim Visuellen Editor

  • Hallo,
    ich habe das Problem, das ich auf einer Seite Bilder versetzt übereinander legen möchte. Dieses habe ich so durchgeführt:

    <div style="float:right; width:450px; height:330px;margin-left:20px;background-image: url(http://testweb.urlaub-hiddentrup.de/wp-content/uploads/2016/05/hermann1.jpg);background-repeat:no-repeat;background-position:top right">
    	<div style="width:450px; height:330px;background-image: url(http://testweb.urlaub-hiddentrup.de/wp-content/uploads/2016/05/hermann2.jpg);background-repeat:no-repeat;background-position:bottom left"></div>
    </div>

    Aber jedesmal wenn ich die Seite im Visuellen Editor bearbeite wird ein Bild entfernt.

    <div style="float: right; width: 450px; height: 330px; margin-left: 20px; background-image: url('http://testweb.urlaub-hiddentrup.de/wp-content/uploads/2016/05/hermann1.jpg'); background-repeat: no-repeat; background-position: top right;"> </div>

    Warum ist das so! Kann ich das umgehen, oder sollte ich die Bilder anders einfügen. So sollten die Bilder aussehen: http://testweb.urlaub-hiddentrup.de/etwas-entfernter/
    Als Visuellen Editor nutze ich den TinyMCE Advanced.
    Für jede Hilfe, Anregung bin ich dankbar
    Christian

Ansicht von 4 Antworten - 1 bis 4 (von insgesamt 4)
  • Der Editor filtert einige Benutzereingaben: Aus (in reinem HTML bedeutungslosen) Zeilenumbrüchen werden Absätze, aus normalen Anführungszeichen werden typoraphische Anführungszeichen und aus WordPress wird automattisch WordPress.

    Ich müsste ein wenig recherchieren, ob diese unschöne Ersetzung beim Aufruf des visuellen Editors durch WordPress oder TinyMCE erfolgt, aber Tatsache ist, dass die Eingabe so nicht vorgesehen ist. Code-Snippets werden üblicherweise mit Shortcodes eingefügt (was zugegeben etwas zuviel des Guten wäre, wenn es um eine einzige Stelle geht) oder du gibst <div>-Tags mit CSS-Klassen ein, die dann über ein Custom Style Sheet formatiert werden. Gibst du z.B.

    <div class="one">
      <div class="two">Hello</div>
    </div>

    im Texteditor ein und wechselst dann zwischen visuellem und Text-Modus, bleibt der Code erhalten. Im Custom Style Sheet kannst du dann die Formatierung unterbringen.

    .one {
      float:right;
      width:450px;
      height:330px;
      margin-left:20px;
      background-image: url(http://testweb.urlaub-hiddentrup.de/wp-content/uploads/2016/05/hermann1.jpg);
      background-repeat:no-repeat;
      background-position:top right;
    }

    Noch sauberer wäre es vermutlich, einfach die Bilder einzufügen und mit einer CSS-Klasse zu versehen. Um die Bilder übereinander zu legen, braucht es keine Verschachtelung.

    Wenn du grundsätzlich vor hast, HTML im Editor einzugeben, solltest du dir eines der Plugins zum Stichwort „RAW HTML“ anschauen.

    Wie würde den die CSS Klasse ungefähr aussehen, damit die Bilder wie in meinem Beispiel versetzt übereinander liegen? Denn da habe ich schon lange nach gesucht aber nichts brauchbares gefunden.

    Trotzdem schon mal danke für die Infos! Die haben mir etwas weitergeholfen!

    CSS ist zwar hier nicht unser Thema, aber ganz kurz skizziert könntest du einen Bilderstapel so realisieren: https://jsfiddle.net/0gwta3um/

    Das CSS würde ich wie gesagt in ein Custom Style Sheet packen (z.B. mit Simple Custom CSS), die Bilddateien ganz normal in einen Beitrag einfügen und mit CSS-Klassen versehen.

    Danke!

Ansicht von 4 Antworten - 1 bis 4 (von insgesamt 4)
  • Das Thema „Bilder verschwinden beim Visuellen Editor“ ist für neue Antworten geschlossen.