Bilder und Text bündig

Post Reply
deondo
Ssr. Bludit
Posts: 10
Joined: Wed May 05, 2021 12:05 pm

Ich hab das Problem, dass Bilder nicht vom Text umlaufen werden, sondern der Text jeweils am unteren Bildrand beginnt. Wie kann ich das beheben.
Komischerweise ist es mir vor längerem mal gelungen, Fotos von Text umflossen darzustellen, ich weiß aber nicht mehr, wie das geschafft habe.
Vielleicht hat einer eine Idee.

Damit klar wird, was ich meine, häng' ich mal ein Beispiel an.
Attachments
bludit.png
bludit.png (197.27 KiB) Viewed 433 times
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

Du hast zwei Möglichkeiten, das zu machen, direkt im Code oder mit CSS-Klassen.

1. Direkt im Code

Wenn Du den Editor TinyMCE verwendest, klickst Du den Button mit dem Icon <> an und öffnest so das Fenster, dass den Code anzeigt.

Beim Bild ergänzst Du den Tag image beispielsweise so:

Code: Select all

<img style="float: left; margin: 0 20px 20px 0;" src="https://...>
Wenn das Bild rechts angezeigt werden soll, verwendest Du float: right. margin definiert den Abstand zum Text.

2. CSS-Klassen

Damit Du den CSS-Stil nicht überall manuell eingeben musst, kannst Du Klassen zum Editor TinyMCE hinzufügen.

Dazu erweiterst Du tinymce.init in der Datei plugin.php im Verzeichnis /bl-plugins/tinymce mit vordefinierten Klassen. Beispielsweise:

Code: Select all

image_class_list: [
   {title: 'keine', value: ''},
   {title: 'Links', value: 'links'}
]
Bei diesem Beispiel würde tinymce.init dann so aussehen (Zeile 95):

Code: Select all

	tinymce.init({
		selector: "#jseditor",
		auto_focus: "jseditor",
		element_format : "html",
		entity_encoding : "raw",
		skin: "oxide",
		schema: "html5",
		statusbar: false,
		menubar:false,
		branding: false,
		browser_spellcheck: true,
		pagebreak_separator: PAGE_BREAK,
		paste_as_text: true,
		remove_script_host: false,
		convert_urls: true,
		relative_urls: false,
		valid_elements: "*[*]",
		cache_suffix: "?version=$version",
		$document_base_url
		plugins: ["$plugins"],
		toolbar1: "$toolbar1",
		toolbar2: "$toolbar2",
		language: "$lang",
		content_css: "$content_css"
		image_class_list: [
		    {title: 'Keine', value: ''},
		    {title: 'Links', value: 'links'}
		]
	});
Weiter musst Du die CSS-Klassen definieren. Dafür kannst Du im Plugin HTML-Code im Feld "Header" Folgendes eingeben:

Code: Select all

<style>
.links {
   float: left;
   margin: 0 20px 20px 0;
}   
</style>
Wenn Du nun das Bild markierst und das Bild-Icon des Editors TinyMCE anklickst (oder die rechte Maustaste verwendest), kannst Du eine der definierten Klassen wählen.

bildbearbeitung.png
bildbearbeitung.png (30.84 KiB) Viewed 423 times
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
deondo
Ssr. Bludit
Posts: 10
Joined: Wed May 05, 2021 12:05 pm

Danke.Das hilft mir weiter. :)
Post Reply