Bilder

Bilder können im Markdown-Style eingebunden werden. Der alt-Text wird automatisch als Bildunterschrift hinzugefügt, wobei zusätzliche Eigenschaften wie die Breite oder Höhe des Bildes zuerst extrahiert werden. Zudem wird eine Quellenangabe hinzugefügt, falls sich beim Bildpfad ein gleichnamiges .json-File befindet, welches die Bildinformationen enthält.

![Streetfood Festival --width=300px](../images/street-food.jpg)

mit einem gleichnamigen .json-File:

./images/street-food.json

{
    "author": "Takeaway",
    "source": "https://commons.wikimedia.org/wiki/File:Street_food_Yasothon.jpg",
    "licence": "CC BY-SA 3.0",
    "licence_url": "https://creativecommons.org/licenses/by-sa/3.0/deed.en",
    "edited": false
}

http://localhost:3000

Streetfood Festival@

Inlining der Quellenangabe

Wenn keine Bildunterschrift angegeben wird, wird die Quellenangabe automatisch inlined (also in das Bild hineinverschoben):

![--width=450px](../images/street-food.jpg)

http://localhost:3000

@

Dieses Verhalten kann mit der Plugin-Option inlineEmptyCaptions: false deaktiviert werden (👉 siehe unten).

Zudem kann das Inlining der Quellenangabe (und Bildunterschrift, falls vorhanden) mit der Option --inlineCaption auch für ein einzelnes Bild erzwingen oder verhindert werden:

![Schneebedeckte Strasse --width=450px --inlineCaption={true}](../images/snowy-street.jpg)

http://localhost:3000

Schneebedeckte Strasse@

Formatierung der Bildunterschrift

Die Bildunterschrift kann mit gängigen Markdown-Formatierungen wie Fett, Kursiv oder Code versehen werden

![**Fett**, *Kursiv*, :mdi[laptop]{.red}, __boxed__, `Code` und [Links](#) --width=450px](./images/fat-cursive-code.jpg)

http://localhost:3000

Fett, Kursiv, , boxed, Code und 👉 Links@

Markdown Inline-Bilder (@inline)

Bilder mit Unterschriften (= HTML <figure>s mit <figcaption>s) dürfen nicht innerhalb von Paragraphen <p> vorkommen. Standardmässig werden Bilder deshalb immer in eigene Block-Elemente umgewandelt. Mit der Option @inline können Bilder jedoch auch als echte Inline-Elemente gerendert werden, dann aber ohne Bildunterschrift und Quellenangabe.

Hallo, das ist nun ein ![@inline](./images/logo.svg) Inline Bild.

http://localhost:3000

Hallo, das ist nun ein Inline Bild.

Inline-Bilder

Inline-Bilder können nicht mit CSS-Styles, Bildunterschriften oder Quellenangaben versehen werden. Optionen wie --width oder --height werden zwar vom alt entfernt, haben jedoch keinen Einfluss auf die Ausgabe.

Konfiguration

tagNames

Die Namen der HTML-Tags, die für die Bild- und Quellenangaben verwendet werden sollen.

{ figure?: string, figCaption?: string, sourceRef?: string }

Standard: { figure: 'figure', figCaption: 'figcaption', sourceRef: 'SourceRef' }

inlineEmptyCaptions

Sollen Quellenverweise über dem Bild angezeigt werden, falls keine Bildbeschriftung vorhanden ist?

Standard: true

captionVisitors

Die Alt-Texte werden standardmässig nicht in einen mdast übersetzt, weshalb dies im remark-images-Plugin nachgeholt wird. Da zusätzlich auch die --option-Tags entfernt werden, sind die Positions-Angaben des ursprünglichen Alt-Textes nicht mehr verfügbar.

Plugins, die auf den unprozessierten Markdown-Text zugreifen müssen, funktionieren deshalb nicht.

Mit captionVisitors können zusätzliche Plugins hinzugefügt werden, die den Alt-Text verarbeiten - für 👉 remark-strong ist dies nötig.

Standard: []

Installation

Code

• src/components/Figure
• src/plugins/remark-images

src/theme/MDXComponents.tsx

import MDXComponents from '@theme-original/MDXComponents';
import Figure from '../components/Figure';
import SourceRef from '../components/Figure/SourceRef';

export default {
  // Re-use the default mapping
  ...MDXComponents,
    Figure: Figure,
    SourceRef: SourceRef,
};

docusaurus.config.ts

import imagePlugin from './src/plugins/remark-images/plugin';

const BEFORE_DEFAULT_REMARK_PLUGINS = [
    /* ... */
    [
        imagePlugin,
        { tagNames: { sourceRef: 'SourceRef', figure: 'Figure' } }
    ]
];

Konfiguration fürs Zusammenspiel mit 👉 remark-strong

docusaurus.config.ts

import { visitor as captionVisitor } from './src/plugins/remark-strong/plugin';
const BEFORE_DEFAULT_REMARK_PLUGINS = [
	/* ... */
  [
    imagePlugin,
      {
        tagNames: { sourceRef: 'SourceRef', figure: 'Figure' }
        captionVisitors: [
          (ast, caption) => captionVisitor(ast, caption, { className: 'boxed' })
        ] satisfies CaptionVisitor[]
      }
  ]
];

Automatisches Inlining deaktivieren

Um das automatische Inlining von leeren Bildunterschriften zu deaktivieren, können die Plugin-Optionen wie folgt ergänzt werden:

[
    imagePlugin,
    { inlineEmptyCaptions: false, ... }
]

VS Code

Damit die Bild-Quellen einfach eingefügt werden können, kann folgendes Snippet unter hinzugefügt werden. So wird beim Eintippen von src in einem .json-File automatisch die Quellenangabe eingefügt.

.vscode/json.code-snippets

.vscode/json.code-snippets

{
	// Place your ofi-blog workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	
	"licence": {
		"prefix": "src",
		"scope": "json",
		"body": [
			"{" \
				"\"author\": \"$1\"," \
				"\"source\": \"$2\"," \
				"\"licence\": \"$3\"," \
				"\"licence_url\": \"$4\"," \
				"\"edited\": false" \
			"}"
		],
		"description": "licence information for a picture"
	},
	"cc0": {
		"prefix": "cc0",
		"body": "https://creativecommons.org/share-your-work/public-domain/cc0/",
		"description": "Creative Commons 0"
	},
	"cc4": {
		"prefix": "cc4",
		"body": "https://creativecommons.org/licenses/by-nc-sa/4.0/deed.de",
		"description": "Creative Commons 4.0"
	}
}