Beim Einblenden von Bildern verdeckt "zusätzliche Daten" die Bilderdateien

  • Du solltest -unabhängig vom eingesetzten Editor- besser nicht mit Inline Styles arbeiten, sondern vorher definierte Klassen benutzen (entweder Klassen Deines Templates, solche von Bootstrap oder eigene). Dann brauchst Du bei Änderungen nur die Klasse zu überschreiben und nicht jeden Beitrag anfassen.

    Hallo Rolf,

    danke für deinen Hinweis.

    Nimmst du die Erkenntnis, dass ich mit "Inline-Styles" arbeite, aus meinem Satz mit dem "float:right" ? Ich nutze eigene Klassen und lasse den z.B. Text mit dem Aufruf der Seite formatieren. Der JCE-Editor hat die Einstellung nicht übernommen. Für mich ergeben sich nun mindestens eine neue Anmerkungen/Fragen:

    1.) Wenn ich das Bild nicht im Editor nicht schon via "Inline-Style" in die richtige Position bringe und der Test das Bild so umfließt wie es gedacht ist, wie soll ich dann vernünftig das "Weiterlesen" positioniere (siehe Bild)? Daher, vermute ich, auch die Frage von Elwood.

    2.) Aufgrund eines gewissen Zeitdrucks, war eine intensive und vor allem notwendige Testphase nicht möglich.

    3.) Jetzt geht es erstmal nur händisch für die vorhandenen Beiträge. Es sei denn jemand hat eine Idee wie ich (siehe 1.) die Sache schneller und einfacher aus dem Weg räume.

    4.) Habe ich die Möglichkeit für das "Weiterlesen" eine eigene Idee zur Formatierung zu vergeben?

    5.) Was ich auch noch nicht einschätzen kann, ist, wie ich die Länge der Artikel richtige "koordiniere". Ansicht im Editor, ist die Größe des endgültigen Beitrages. Im Blog habe ich aber 2 Spalten. Wie gehe ich nun am Besten vor?

    Grüße

    Johannes

  • Was mir aufgefallen ist:

    • Du positionierst Deine Bilder mit der Klasse .pull-left, die schon ein Float nach links beinhaltet. Diese Klasse überschreibst Du überflüssigerweise mit einem Inline Style:
    • Die Positionierung des Weiterlesen-Buttons übernimmt eine Klasse .weiter_pos. Wenn Du dort die absolute Positionierung herausnimmst (und die zusätzlichen Positionsangaben), wird Dein Weiterlesen-Button unterhalb des Beitrags angezeigt:
  • Was mir aufgefallen ist:

    • Du positionierst Deine Bilder mit der Klasse .pull-left, die schon ein Float nach links beinhaltet. Diese Klasse überschreibst Du überflüssigerweise mit einem Inline Style:
    • Die Positionierung des Weiterlesen-Buttons übernimmt eine Klasse .weiter_pos. Wenn Du dort die absolute Positionierung herausnimmst (und die zusätzlichen Positionsangaben), wird Dein Weiterlesen-Button unterhalb des Beitrags angezeigt:

    sorry Rolf, du hattest nicht verstanden. Die Klasse .weiter_pos ist eine Klasse von mir.

    Ich bin von der Weiterlesen-Standard-Funktion im Joomla ausgegangen. Und Ja, es gibt Fehler, u. a. durch den Editorwechsel.

  • Dass die Klasse von Dir ist, hatte ich schon verstanden. Wenn Du das Design des Weiterlesen-Buttons mit einer eigenen Klasse anpasst, kannst Du nicht mehr vom Standard des Templates ausgehen, sondern musst Deine eigene Klasse anpassen; aber das weißt Du ja.

    Ich würde den Button übrigens mit den Klassen weiter_pos btn btn-standard formatieren.

    Freundliche Grüße aus Wächtersbach, Rolf Dautrich

  • Du kannst ja eine quick and dirty lösung probieren.
    Du hast anscheiend überall das pull-left. Das war früher mal üblich aber inzwischen nicht mehr.

    Dann kannst du ans Ende deiner custom-css . Das bewirkt dann die Textumfießung. Allerdings hat su diverse Sachen, die gar keinne Sinn ergeben, z.B. img class="img" .. in solchen Fallen passt das natürlich nicht.

    Code

    Code
    .pull-left {
      float: start;
      margin-left: 2rem;
    }

    Grüße, Christiane

  • Du kannst ja eine quick and dirty lösung probieren.
    Du hast anscheiend überall das pull-left. Das war früher mal üblich aber inzwischen nicht mehr.

    Dann kannst du ans Ende deiner custom-css . Das bewirkt dann die Textumfießung. Allerdings hat su diverse Sachen, die gar keinne Sinn ergeben, z.B. img class="img" .. in solchen Fallen passt das natürlich nicht.

    Code

    Code
    .pull-left {
      float: start;
      margin-left: 2rem;
    }

    Grüße, Christiane

    Guten Morgen Christiane,

    guten Morgen Rolf,


    Christiane, danke für das Codebeispiel. Ich möchte in Zukunft auf das "inline-style" verzichten. Genauso wie auf die Erstellung zweier Beiträge (Blog-Beitrag mit Link und der eigentliche Artikel) . Dazu werde ich in Zukunft den JCE-Editor Core nutzen.

    Wenn ich im Editor den Artikel (fast) ohne Formatierung erstelle sieht es so aus wie auf dem Bild. Wenn ich nun mit dem "weiterlesen...einfügen" -Button an die entsprechende Stelle ziehen möchte, weiß ich ja nicht wie es am Ende aussieht. (die Breite in der Text im Editor angezeigt wird, ist ja eine andere als die die dann im Blog-Beitrag zu sehen ist und damit die Höhe im Blog). Mein Ziel ist es das alle Blog-Artikel die gleiche Höhe haben.

    Grüße

    Johannes

  • Ich denke, du solltest dich mit den Grundlagen von Joomla beschäftigen. Der JCE hat sicher einige Vorteile, aber es ist nicht notwendig um das zu erreichen, was du willst.

    Was man im Backend sieht, passt (und muss auch nicht) nicht zu dem was man dann im Frontend sieht. Joomla bietet alles Notwendige um Beiträgen als Blog anzuzeigen. Und das Aussehen wird vom Template gesteuert, hier kann es notwendig sein mit CSS nachzujustieren.

    Also: Text schreiben und ein Weiterlesen dazwischen einfügen, wo genau kannst du steuern. Du kannst auch einen zusätzlichen Einleitungstext schreiben, der immer die gleiche Länge hat. Die Bilder nicht direkt im Text einfügen sondern das Einleitungsbild nutzen, hier kannst du CSS Klassen einfügen.

    Hier habe ich einiges darüber geschrieben: https://www.dr-menzel-it.de/blog/bloglayou…lles-einstellen

    Und hier eine Demo mit Cassiopeia: https://cassiopeia.joomla.com

  • Was Viviana u.a. meint: Du machst Dir das Leben (unnötig) schwer, weil Du versuchst, eigene Konstruktionen zu bauen, wo Joomla längst solche in guter Qualität als Standard anbietet. Der eingesetzte Editor ist dabei zweitrangig (ich selbst nutze seit 2008 den JCE, aber der eingebaute TinyMCE hat von den Funktionen mächtig zugelegt und bringt alles Notwendige mit).

    Dass Du aufgrund Deiner bisherigen Arbeitsweise gelernt hast, mit CSS-Klassen zu arbeiten, dürfte Dir die Arbeit (sehr) erleichtern.

    Freundliche Grüße aus Wächtersbach, Rolf Dautrich

  • Was Viviana u.a. meint: Du machst Dir das Leben (unnötig) schwer, weil Du versuchst, eigene Konstruktionen zu bauen, wo Joomla längst solche in guter Qualität als Standard anbietet. Der eingesetzte Editor ist dabei zweitrangig (ich selbst nutze seit 2008 den JCE, aber der eingebaute TinyMCE hat von den Funktionen mächtig zugelegt und bringt alles Notwendige mit).

    Dass Du aufgrund Deiner bisherigen Arbeitsweise gelernt hast, mit CSS-Klassen zu arbeiten, dürfte Dir die Arbeit (sehr) erleichtern.

    eben drum ja :)

  • Ich denke, du solltest dich mit den Grundlagen von Joomla beschäftigen. Der JCE hat sicher einige Vorteile, aber es ist nicht notwendig um das zu erreichen, was du willst.

    Was man im Backend sieht, passt (und muss auch nicht) nicht zu dem was man dann im Frontend sieht. Joomla bietet alles Notwendige um Beiträgen als Blog anzuzeigen. Und das Aussehen wird vom Template gesteuert, hier kann es notwendig sein mit CSS nachzujustieren.

    Also: Text schreiben und ein Weiterlesen dazwischen einfügen, wo genau kannst du steuern. Du kannst auch einen zusätzlichen Einleitungstext schreiben, der immer die gleiche Länge hat. Die Bilder nicht direkt im Text einfügen sondern das Einleitungsbild nutzen, hier kannst du CSS Klassen einfügen.

    Hier habe ich einiges darüber geschrieben: https://www.dr-menzel-it.de/blog/bloglayou…lles-einstellen

    Und hier eine Demo mit Cassiopeia: https://cassiopeia.joomla.com

    und da kommen ich wieder zu der entscheidenden Frage. Wie bekomme ich es hin, dass der Einleitungstext (selber oder standard egal) die gleiche Länge hat.

  • Ich würde an deiner Stelle auf jeden Fall #30 befolgen.

    Zitat

    Die Bilder nicht direkt im Text einfügen sondern das Einleitungsbild nutzen, hier kannst du CSS Klassen einfügen.

    Vor allem auf Mobile sieht es im Moment nicht gut aus.