Diese Theme-Komponente fügt Schaltflächen in der Symbolleiste des Beitrags-Composers hinzu, um hochgeladene Bilder links oder rechts neben Text, zentriert im Beitrag oder in einem Raster auszurichten, wobei die neu implementierten Raster-Tags verwendet werden. Das Raster passt die Bilder automatisch an, je nachdem, wie viele und welche Abmessungen sie haben, und verlinkt auch zu den größeren hochgeladenen Versionen. Die Schaltflächen / Ausrichtungsfunktionen können mehrmals in einem Beitrag verwendet werden, um eine Vielzahl von Layouts zu erstellen. Funktioniert sowohl für Desktop- als auch für Mobilansichten.
Zur Verwendung klicken Sie einfach auf die gewünschte Bildausrichtungsschaltfläche und laden Sie dann Bilder in den dafür vorgesehenen Bereich zwischen den resultierenden Tags hoch (gekennzeichnet durch Platzhaltertext, der in den Komponenteneinstellungen bearbeitet werden kann).
Beachten Sie, dass der Rasterteil dieser Komponente zum Ausrichten von hochgeladenen Bildern dient, nicht von Bildlinks (die anderen Ausrichtungsoptionen funktionieren für Link-Bilder). Ich habe einige grundlegende Code-Frameworks von Steven’s nützlicher MD Composer Extras Komponente übernommen.
In Arbeit: Hinzufügen von richtigen Icon-Selektoren für jede Schaltfläche.
Screenshots
Grid-Schaltfläche der Composer-Symbolleiste (mit Beispielcode für das Raster)
meinst du den Composer / Editor mit der Toolbar? Das wäre der erste Screenshot mit dem Rasterbeispiel. Ich werde einige Screenshots des Editors mit den anderen Ausrichtungscodes um Bilder herum hinzufügen.
Gern geschehen. Wie schaffen Sie es, dass „Align left“ zum Beispiel fettgedruckten Text in Ihren Screenshots anzeigt? Ich habe Markdown ausprobiert und es zeigt den Markdown-Code an.
Ich sehe, dass es mit ### funktioniert, aber normales Fettgedruckt mit
Entschuldigen Sie, als ich es früher versucht habe, hat es nicht funktioniert. Ich bin mir nicht sicher, was sich geändert hat. Das ist ziemlich großartig, danke.
Fügen Sie einfach einige <br><br> HTML-Tags zwischen dem ersten Textblock und dem nächsten <div-data-theme... Tag ein, bis es richtig abgesetzt ist. Ich werde versuchen, einen harten Zeilenumbruch oder etwas Ähnliches einzufügen, wenn ich Zeit habe.
Ich denke, das ist keine zuverlässige Methode, da die Höhe des Inhalts je nach Fenstergröße unterschiedlich ist.
Das Aufheben von Floats, wenn sich beliebige Inhalte daneben befinden, ist knifflig. Ich bin mir nicht sicher, ob es hier eine offensichtliche Lösung gibt…[1]
Dies war auch lange Zeit ein Problem mit dem Wordpress-Editor.
Leute neigen dazu, sich auf hacky Methoden zu verlassen, bei denen Elemente verwendet werden, deren einziger Zweck es ist, einen clear: both; zu haben, um vorherige Floats zurückzusetzen.
Ja, diese Methode gefällt mir auch nicht. Ich habe überlegt, vielleicht eine Lösung mit der Eigenschaft „Leerzeichen“ auszuprobieren. Letztendlich funktioniert es am besten, wenn die ausgerichteten Bilder separate Beiträge sind. Leider funktionieren Bilder in Tabellen auch nicht gut.
Habe diese Flex-Align-Eigenschaftslösungen ausprobiert, konnte aber nichts konsistent Funktionierendes finden. Ich habe jedoch eine brauchbare Problemumgehung gefunden. Wenn Sie jeden Bild-Text-Abschnitt in eine Blockquote umwandeln, trennt dies diese (enthält aber die Zitatformatierung für den Text):
Letztendlich funktioniert es am besten, wenn die ausgerichteten Bilder separate Beiträge sind. Leider funktionieren Bilder in Tabellen auch nicht gut.
.
