Support » Allgemeine Fragen » Gutenberg und Inline-Bild: Bild immer linksbündig!

  • Gelöst topsurfer

    (@topsurfer)


    Hallo,
    ich nutze den Gutenberg Editor, und habe die Option „Inline-Bild“ gesehen.
    Im Editor ist das (kleine) Bild auch mittig im Text wie gewünscht, aber in der Vorschau und auch auf der Online-Seite immer linksbündig.

    Mache ich was falsch oder ist das ein Bug?

    Editor-Ansicht

    • Dieses Thema wurde geändert vor 1 Jahr, 3 Monaten von topsurfer.

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 16)
  • Hallo @topsurfer

    Dein Link zur Seite führt auf eine 404-Fehler-Seite.

    Thread-Starter topsurfer

    (@topsurfer)

    Uppps, jetzt aber …

    Klick

    • Diese Antwort wurde geändert vor 1 Jahr, 3 Monaten von topsurfer.

    und habe die Option „Inline-Bild“ gesehen

    Wo hast du das gesehen?

    Es gab mal einen Block Inline-Image, mit dem z.B. ein Telefon-Icon in einer Textzeile platziert werden konnte. Soviel ich weiß, ist dieser Block aber wieder verschwunden, weil kaum jemand so recht etwas damit anfangen konnte.
    Aber vielleicht verwendest du ein Plugin, das diesen Block oder eine Option hinzufügt?

    Das Bild wird mit der CSS-Regel float:left; linksbündig ausgerichtet. Du kannst das überschreiben, in dem du dem Absatz unter „Erweitert“ eine eigene CSS-Klasse mit-inline-bild zuweist und dann im Customizer

    .mit-inline-bild img { 
      float: none;
      margin-left: 0.5em; }

    einträgst.

    Das Inlinebild ist im Kontexmenü zu finden. Die Möglichkeit des Inlinebildes existiert darüber in vielen Blöcken (z. B. auch beim Button).

    Den Block Inlinebild gab es anfangs mal und wurde dann durch dieses Option ersetzt.

    Stimmt.

    Dann scheint das Style-Sheet des Themes fehlerhaft zu sein.
    Mein Vorschlag für eine eigene CSS-Regel wäre dann weiterhin ein möglicher Workaround.

    @topsurfer
    Das liegt am Theme hueman, worüber jedes Bild links floatend gesetzt wird:

    img {
        float: left;
        margin-right: 0.5em;
    }

    was ich für ziemlich fatal halte. Die erste „Hilfe“ wäre der Workaround, den Bego Mario oben beschrieben hat.

    An deiner Stelle würde ich aber auch den Themeentwickler darauf hinweisen, dass diese CSS-Anweisung entfernt wird.

    Dann sind wir uns ja wieder einig? 😉

    Die Beiträge haben sich überschnitten.

    @topsurfer

    So ganz sicher bin ich mir mit dem Theme als Ursache nicht mehr. Das Bild wird linksbündig gesetzt über diesen Code:

    <div id="custom_html-3" class="widget_text widget widget_custom_html">
                                            <h3 class="widget-title">Hallo, willkommen auf unserem Blog</h3>
                                            <div class="textwidget custom-html-widget">
                                                <html>
                                                    <head>
                                                        <style type="text/css">
                                                            .emxx {
                                                                line-height: 1.0em
                                                            }
    
                                                            img {
                                                                float: left;
                                                                margin-right: 0.5em;
                                                            }
                                                        </style>
                                                    </head>
                                                    <body>
                                                        <p class="emxx">
                                                            <img style="width: 96px; height: 76px;" src="http://www.mmblog.de/wp-content/uploads/2017/09/sys_mm_rye_selfie_01_320px.jpg" alt="Wir" align="left" hspace="22" vspace="22">
                                                            Hier wollen wir Euch
    mit interessanten Beiträgen aus den verschiedensten Bereichen versorgen.<br>
                                                            Wohnwagen- und Reiseerfahrungen, eigene Erlebnisse und Empfehlungen,
    technische "spielereien" und optimierungen , Tipps, ....<br>Kurzum, alles was auch Camper interessiert
                                                        </p>
                                                    </body>
                                                </html>
                                            </div>
                                        </div>

    Wie hast du das Text-Widget in der rechten Spalte eingebunden, woher kommmt das?

    Da bin ich auch gerade drüber gestolpert.
    Scheint im Text-Widget reingerutscht zu sein.

    Wahrscheinlich ein Copy/Paste-Fehler?

    Also doch kein Bug-Ticket fürs Theme … 😀

    Nach Korrektur des Widgets braucht’s dann auch keine zusätzlichen CSS-Regeln.

    Thread-Starter topsurfer

    (@topsurfer)

    Hi,
    das (rechte Leiste) habe ich im Hueman unter Customizer – eigenes HTML eingebunden.
    Der obere „Code „ist:

    <p><small> Strecke <strong><font face="MV Boli">9712</font></strong> km | <strong><font
    face="MV Boli">153</font></strong> Tage | <strong><font face="MV Boli">32</font></strong>
    Plätze (▲26)</small></p>

    dann kommt dieser Code:

    <html>
    <head>
    <style type="text/css">
    .emxx {line-height: 1.0em}
    	img { float: left; margin-right: 0.5em; }
    </style>
    </head>
    <body>
    <p class="emxx"><img
    style="width: 96px; height: 76px;"
    src="http://www.mmblog.de/wp-content/uploads/2017/09/sys_mm_rye_selfie_01_320px.jpg"
    alt="Wir" align="left" hspace="22" vspace="22">Hier wollen wir Euch
    mit interessanten Beiträgen aus den verschiedensten Bereichen versorgen.<br>
    Wohnwagen- und Reiseerfahrungen, eigene Erlebnisse und Empfehlungen,
    technische "spielereien" und optimierungen , Tipps, ....<br>
    Kurzum, alles was auch Camper interessiert</p>
    </body>
    </html>

    Liegt da die Ursache für das Verhalten im „Haupt-Text“ ?

    Screenshot

    • Diese Antwort wurde geändert vor 1 Jahr, 3 Monaten von topsurfer.

    @topsurfer

    dann kommt dieser Code

    Tausch diesen Code gegen diesen aus:

    <div id="custom_html-3" class="widget_text widget widget_custom_html">
    	<h3 class="widget-title">Hallo, willkommen auf unserem Blog</h3>
    	<div class="textwidget custom-html-widget">
    		<p style="line-height: 1em" class="emxx"><img style="width: 96px; height: 76px; float: left; margin-right: 0.5em;" src="http://www.mmblog.de/wp-content/uploads/2017/09/sys_mm_rye_selfie_01_320px.jpg" alt="Wir" align="left" hspace="22" vspace="22"> Hier wollen wir Euch mit interessanten Beiträgen aus den verschiedensten Bereichen versorgen.<br>
     Wohnwagen- und Reiseerfahrungen, eigene Erlebnisse und Empfehlungen, technische "Spielereien" und Optimierungen, Tipps ....<br>Kurzum, alles was auch Camper interessiert</p>
    	</div>
    </div>

    Wahrscheinlich ein Copy/Paste-Fehler?

    Also doch kein Bug-Ticket fürs Theme … 😀

    Nach Korrektur des Widgets braucht’s dann auch keine zusätzlichen CSS-Regeln.

    Genau 👍

    Thread-Starter topsurfer

    (@topsurfer)

    Supi, das sieht jetzt besser aus ;.-)

    War da ein „left“ bei mir drin, welches sich global ausgewirkt hat?

    Danke euch beiden!

    • Diese Antwort wurde geändert vor 1 Jahr, 3 Monaten von topsurfer.

    @topsurfer

    Der Code ist noch nicht ganz „perfekt“. Tausch noch mal aus gegen

    <h3 class="widget-title">Hallo, willkommen auf unserem Blog</h3>
    	<div class="textwidget custom-html-widget">
    		<p style="line-height: 1em" class="emxx"><img style="width: 96px; height: 76px; float: left; margin-right: 0.5em;" src="http://www.mmblog.de/wp-content/uploads/2017/09/sys_mm_rye_selfie_01_320px.jpg" alt="Wir" align="left" hspace="22" vspace="22"> Hier wollen wir Euch mit interessanten Beiträgen aus den verschiedensten Bereichen versorgen.<br>
     Wohnwagen- und Reiseerfahrungen, eigene Erlebnisse und Empfehlungen, technische "Spielereien" und Optimierungen, Tipps ....<br>Kurzum, alles was auch Camper interessiert</p>
    	</div>
    Thread-Starter topsurfer

    (@topsurfer)

    Done 😉

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 16)
  • Das Thema „Gutenberg und Inline-Bild: Bild immer linksbündig!“ ist für neue Antworten geschlossen.