Bildzeilen

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

Hallo Edi,

vielen Dank. Aber wenn's so einfach wäre, hätte ich sicher nicht nachgefragt. Leider kann ich nicht einfach unter ein eingefügtes Bild einen Text setzen.
Aber ich schließe auch nicht aus, dass ich zu doof dafür bin, den Weg zu erkennen. Hast du bitte mal einen Link zu einem Beispiel?
Danke.
johannesh19
Ssr. Bludit
Posts: 14
Joined: Fri Mar 12, 2021 5:05 pm
Has thanked: 1 time

Ich glaube, ihr redet einfach aneinander vorbei. Was deondo haben will, ist eine Bildunterschrift, wie sie in Zeitungen und z. B. Fachbüchern üblich ist. Natürlich gibt es die Möglichkeit (wie Edi korrekt beschreibt), ein Bild einzufügen und direkt danach die Bildunterschrift als Textzeile im Text-Inhalt der Seite. Aber so wirklich elegant ist das nicht. Und als Journalist ist deondo auch gewohnt, dass Bilder und Texte beim Satz manchmal an verschiedenen Stellen landen können.

Es gibt tatsächlich ein HTML-5-Element, das die gesuchte Funktion genau abbildet: <figure> https://developer.mozilla.org/en-US/doc ... ent/figure. <figure> beinhaltet das Bild und die dazugehörige Bildunterschrift als eine logische Einheit:

Code: Select all

<figure>
  <img src="bilddatei.png">
  <figcaption>Bilduntertitel</figcaption>
</figure>
Damit hat man dann auch eine semantisch korrekte Auszeichnung.
deondo
Ssr. Bludit
Posts: 10
Joined: Wed May 05, 2021 12:05 pm

johannesh19 wrote: Fri May 14, 2021 6:33 pm Ich glaube, ihr redet einfach aneinander vorbei. Was deondo haben will, ist eine Bildunterschrift, wie sie in Zeitungen und z. B. Fachbüchern üblich ist. Natürlich gibt es die Möglichkeit (wie Edi korrekt beschreibt), ein Bild einzufügen und direkt danach die Bildunterschrift als Textzeile im Text-Inhalt der Seite. Aber so wirklich elegant ist das nicht. Und als Journalist ist deondo auch gewohnt, dass Bilder und Texte beim Satz manchmal an verschiedenen Stellen landen können.

Es gibt tatsächlich ein HTML-5-Element, das die gesuchte Funktion genau abbildet: <figure> https://developer.mozilla.org/en-US/doc ... ent/figure. <figure> beinhaltet das Bild und die dazugehörige Bildunterschrift als eine logische Einheit:

Code: Select all

<figure>
  <img src="bilddatei.png">
  <figcaption>Bilduntertitel</figcaption>
</figure>
Damit hat man dann auch eine semantisch korrekte Auszeichnung.
Danke, Johannes. Ich glaube, das ist es.
Gruß und schönes Wochenende.
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:

johannesh19 wrote: Fri May 14, 2021 6:33 pm

Code: Select all

<figure>
  <img src="bilddatei.png">
  <figcaption>Bilduntertitel</figcaption>
</figure>
Damit hat man dann auch eine semantisch korrekte Auszeichnung.
Das stimmt.

Nur wurde halt gewarnt:
Ich bin kein Mensch, der sich mit dem Teufelswerk von Programmiersprachen auskennt, der weiß, wo ich welchen Schnipsel Code einzufügen habe, damit das herauskommt, was ich mir wünsche.
Anyway, für diese Elemente könnte auch der Editor TinyMCE verwendet werden. Allerdings müsste dazu der Code leicht verändert werden.

In der Datei plugin.php im Verzeichnis /bl-plugins/tinymce müsste dazu im Abschnitt ab Zeile 95 folgendes hinzugefügt werden:

Code: Select all

image_caption: true
Der Abschnitt würde dann so aussehen:

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_caption: true
});
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
Post Reply