<?php
	$type = 'post';
	$published = false;
	$date = '2026-03-03';
	$title = 'Demo';
	$description = 'A small demonstration of text formatting options in HTML that can be achieved using the buttons in the toolbar and the so-called „snippets“.';
	$image = '';
	$cats = '';
	$tags = '';
	$listed = false;
	$pinned = false;
	$front = false;
	include 'lib/default-header.php';
?>

<p><b>A small demonstration of text formatting options in HTML that can be achieved using the buttons in the toolbar and the so-called "snippets".</b></p>

<details class="toc textbox noprint" _open>
	<summary><b>Table of contents</b></summary>
</details>

<p><i>Tip: It's best to open this article in a text editor so you can see the source code!</i></p>

<style>
<!--
	h3[id]::before {
		content: "— ";
	}
	h3[id]::after {
		content: " —";
	}
-->
</style>

<h2 id="Textformatierung</">Text formatting</h2>

<p>Here is a small demonstration of text formatting options in HTML that can be achieved with the buttons in the toolbar at the top (buttons <b>P</b>, <b>H2</b>, <b>H3</b>, etc.) and the so-called "snippets" from the "<b>Insert...</b>" menu. To do this, simply select the text you want to format and click the desired button or select the desired snippet.</p>

<p>In addition, you can of course use all the other formatting options that HTML has to offer by writing the desired HTML tags directly into the source text.</p>

<p>To quickly remove formatting, simply select the text and click the <b>x</b> button. With each click on the <b>x</b> button, another format is removed from the outside to the inside or from left to right.</p>

<p>In addition, the standard keyboard shortcuts also work (at least under Windows), such as <b>Ctrl</b>+<b>Z</b> to undo changes, <b>Ctrl</b>+<b>Y</b> to restore changes that have been accidentally undone, and of course <b>Ctrl</b>+<b>C</b>, <b>Ctrl</b>+<b>X</b> and <b>Ctrl</b>+<b>V</b> to copy, cut and paste text via the clipboard.</p>

<p>Basically, the text to be formatted must be selected beforehand - whether with the mouse or the keyboard:</p>

<ul>
	<li>Dragging while holding down the left mouse button selects text character by character.</li>
	<li>Dragging while holding down the left mouse button after double-clicking selects text word by word.</li>
	<li>Double-clicking on a word selects the whole word.</li>
	<li>Triple-clicking in a paragraph selects the whole paragraph.</li>
	<li>Left/right/up/down arrow keys while holding down the Shift key selects text character by character or line by line.</li>
	<li>Left/right arrow keys while holding down the Shift and Ctrl keys at the same time selects text word by word.</li>
</ul>

<p>Here is a demonstration of the formatting options:</p>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<p>A normal paragraph with text in <b>bold</b>, <i>italic</i>, <u>underlined</u>, highlighted with a <mark>highlighter</mark>, with a <span style="background-color: #D0F0F0; padding: 0.2em; margin: -0.2em;">background color</span> or <span style="color: #00C000;">colored</span>.</p>

<h2 id="Snippets">Snippets</h2>

<p>Now to the demonstration of the snippets from the "<b>Insert...</b>" menu. To better understand how it works, the text to be selected is given first and then the end result after inserting the snippet.</p>

<h3 id="section-single-image">Single image</h3>

<p>This section contains snippets relating to a single image.</p>

<h4 id="image">plain</h4>

<p>Inserts an image into the article. First, insert the image URL via the media library. If an image description is also specified, it will appear below the image.</p>

<p><i>Source text:</i></p>

media/green-article-image.jpg
Image description

<p>The image URL and the image description text are each on a separate line here.</p>

<p><i>Result</i> after selecting these two lines and applying the snippet:</p>

<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>

<p>Alternatively, the image URL and image description text can also be on the same line. They are then separated by |:</p>

<p><i>Source text:</i></p>

media/green-article-image.jpg|Image description

<p>The <i>result</i> after highlighting and selecting the snippet is the same:</p>

<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>

<p>This also applies to all the following snippets, so it will not be mentioned again below.</p>

<p>By default, the image viewer is activated for inserted images, indicated by the "+" symbol in the bottom right corner of the image. Clicking on the image opens it in the image viewer. If you don't want the image viewer to be activated, simply remove or rename the "viewer" class, for example to "_viewer":</p> 

<div><figure class="_viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>

<h4 id="image-thinframe">with thin frame</h4>

<p>Inserts an image into the article and draws a thin, light gray border around the image.</p>

<p><i>Source text:</i></p>

media/default-favicon.png
Image description

<p><i>Result:</i></p>

<div><figure class="thinframe viewer"><img src="media/default-favicon.png" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>

<h4 id="image-thumbnail">with preview image</h4>

<p>Displays a preview image in the article; clicking on it opens the full-resolution image in an image viewer. Two image URLs are provided for this purpose, a preview image and a full-size image:</p>

<p><i>Source text:</i></p>

media/dark-favicon.png
media/dark-article-image.jpg
Click to enlarge

<p><i>Result:</i></p>

<div><figure class="viewer"><img src="media/dark-favicon.png" data-src="media/dark-article-image.jpg" alt="" /><figcaption>Click to enlarge</figcaption></figure></div>

<h4 id="image-link">with link</h4>

<p>Displays an image with a link. Clicking the image opens the link in a new browser tab. The link can be, for example, another image, an article, or a website. The image URL, the link itself, and optionally an image description are specified for the snippet:</p>

<p><i>Source text:</i></p>

media/default-favicon.png
/
To the homepage

<p><i>Result:</i></p>

<div><figure><a href="/" target="_blank"><img src="media/default-favicon.png" /></a><figcaption>To the homepage</figcaption></figure></div>

<h3 id="section-multiple-images">Multiple images</h3>

<p>Here you will find snippets that apply to multiple images. The images must already have been formatted with one of the snippets from the "Single image" section.</p>

<h4 id="image-carousel">in a “carousel”</h4>

<p>The images are displayed in a "carousel". You can "flip" through the images by clicking the buttons or by swiping your finger.</p>

<p>For this, the images are first inserted from the media manager into the editor:</p>

<p><i>Source text:</i></p>

media/warm-article-image.jpg
media/default-article-image.jpg
media/green-article-image.jpg
media/dark-article-image.jpg

<p>Then, an image snippet is applied to each individual image (as demonstrated above). Finally, all images are selected and the "Image Carousel" snippet is chosen.</p>

<p><i>Result:</i></p>

<div class="image-carousel middle viewer"> <!-- Vertical alignment: top|middle|bottom -->
	<div><figure class="viewer"><img src="media/warm-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
</div>

<h4 id="image-grid">arranged in a grid</h4>

<p>This arranges the images in a grid of square preview images ("thumbnails"):</p>

<div class="image-grid cover viewer"> <!-- Fill image square: cover / CSS variables: --Size, --Gap, --Radius -->
	<div><figure class="viewer"><img src="media/widget-example-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/warm-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-header-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/cool-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
</div>

<p>The behavior can be influenced by specifying the following CSS variables:</p>

<ul>
	<li><b>--Size</b>: Maximum size of the thumbnails.</li>
	<li><b>--Gap</b>: Spacing between the thumbnails.</li>
	<li><b>--Radius</b>: Corner radius of the thumbnails.</li>
</ul>

<p>Here's an example with smaller thumbnails (max. 100px), smaller spacing, and no corner radius:</p>

<div class="image-grid cover viewer" style="--Size: 100px; --Gap: 1px; --Radius: 0;"> <!-- Fill image square: cover / CSS variables: --Size, --Gap, --Radius -->
	<div><figure class="viewer"><img src="media/widget-example-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/warm-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-header-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/cool-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
</div>

<p>By removing or renaming the "cover" class, the thumbnails can be displayed in their entirety, with the "free" areas then filled with a background color:</p>

<div class="image-grid _cover viewer" style="--Size: 100px; --Gap: 4px; --Radius: 0;"> <!-- Fill image square: cover / CSS variables: --Size, --Gap, --Radius -->
	<div><figure class="viewer"><img src="media/widget-example-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/warm-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-header-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/cool-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
</div>

<h4 id="columns">in columns side-by-side</h4>

<p>This allows you to arrange multiple images side by side. On narrow displays, they are shown one below the other.</p>

<p><i>Example with 2 images, aligned at the top:</i></p>

<div class="columns top viewer"> <!-- Vertical alignment: top|middle|bottom -->
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-favicon.png" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>
</div>

<p><i>Example with 3 images, centered:</i></p>

<div class="columns middle viewer"> <!-- Vertical alignment: top|middle|bottom -->
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-favicon.png" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>
</div>

<p><i>Example with 4 images, aligned at the bottom:</i></p>

<div class="columns bottom viewer"> <!-- Vertical alignment: top|middle|bottom -->
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-favicon.png" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-favicon.png" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>
</div>

<h4 id="gallery">centered side-by-side</h4>

<p>This snippet arranges as many images side-by-side, centered, as there is available horizontal space. The images are displayed in their original size, but (as with all images) their width is limited to that of the article page.</p>

<div class="gallery top viewer"> <!-- Vertical alignment: top|middle|bottom -->
	<div><figure class="viewer"><img src="media/warm-favicon.png" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/green-favicon.png" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-favicon.png" data-src="" alt="" /><figcaption></figcaption></figure></div>
</div>

<h3 id="section-links">Links</h3>

<p>Here are various types of links to other articles, websites, or other destinations grouped together.</p>

<h4 id="link">Internal link</h4>

<p>Internal links open in the currrent browser tab and are suitable for linking to other articles. For the snippet, you first specify link text, then the URL or filename of the article, which can also be inserted via the file manager:</p>

<p><i>Source text:</i></p>

Welcome!
about

<p><i>Result:</i></p>

<p><a href="about">Welcome!</a></p>

<p>Instead of the two-line notation above, the single-line notation with | or [...] as a separator between the link text and the URL also works here:</p>

<p><i>Source text:</i></p>

<p>Welcome [about] to my blog!</p>

<p><i>Result:</i></p>

<p><a href="about" title="">Welcome</a> to my blog!</p>

<p><i>Source text:</i></p>

<p>Welcome|about to my blog!</p>

<p><i>Result:</i></p>

<p><a href="about" title="">Welcome</a> to my blog!</p>

<p>(This also applies to the following examples.)</p>

<h4 id="link-extern">External link</h4>

<p>External links open in a new browser tab and are suitable, for example, for linking to pages on other websites:</p>

<p><i>Source text:</i></p>

<p>My blog | https://example.com/</p>

<p><i>Result:</i></p>

<p><a href="https://example.com/" target="_blank" rel="noopener" title="">My blog</a></p>

<h4 id="button-link">Internal button link</h4>

<p>An internal link as a button.</p>

<p><i>Source text:</i></p>

Welcome! | about

<p><i>Result:</i></p>

<p class="center"><a href="about" class="button-link">Welcome!</a></p>

<h4 id="button-link-extern">External button link</h4>

<p>An external link as a button.</p>

<p><i>Source text:</i></p>

My blog | https://example.com/

<p><i>Result:</i></p>

<p class="center"><a href="https://example.com/" target="_blank" rel="noopener" class="button-link">My blog</a></p>

<h4 id="article-card">Article card internal</h4>

<p>Links to internal articles are displayed as "cards".</p>

<p>The source text consists of the filenames of existing articles, inserted, for example, via the file manager. After applying the snippet, an alternative (shortened) description can optionally be specified.</p>

<p><i>Source text:</i></p>

intro
help

<p><i>Result:</i></p>

<div class="websites noprint">
	<?php include_once "snippets/article-card.php"; ArticleCard('intro', ''); ?>
	<?php include_once "snippets/article-card.php"; ArticleCard('help', 'Another description text...'); ?>
</div>

<h4 id="website-card">Website card external</h4>

<p>Links to external websites are displayed as a "card".</p>

<p>The source text consists of 4 lines with the following content:</p>

<p>Title
<br>Filename (inserted via file manager, without the .php extension)
<br>Image link
<br>Description text</p>

<p><i>Source text:</i></p>

Blog4u
https://www.stefanbion.de/ein-blog-fuer-dich
https://www.stefanbion.de/blog4u/media/mein-blog.jpg
A nice little blogging system for you!

<p><i>Result:</i></p>

<!--
	Snippet "Website card" - The source text consists of 4 lines with the following content:

	Title
	Filename (inserted via file manager, without the .php extension)
	Image link
	Description text
-->

<div class="websites noprint">

	<div class="website">
		<a href="https://www.stefanbion.de/ein-blog-fuer-dich" target="_blank" rel="noopener" title="Blog4u">
			<img src="https://www.stefanbion.de/media/blog4u/mein-blog.jpg">
			<div>
				<p class="website-title">Blog4u</p>
				<p class="website-description">A nice little blogging system for you!</p>
				<p class="center"><span class="button-link" ><?php echo GetString('VisitNow');?></span></p>
			</div>
		</a>
	</div>

	<!-- Insert further websites here (without the outer div) -->
</div>

<h4 id="tooltip">Tooltip</h4>

<p>Inserts a tooltip link into the text. When the mouse pointer is hovered over it, the text appears in a tooltip.</p>

<p><i>Source text:</i></p>

Individual words can be provided with a tooltip[A tooltip is a short explanatory text&#10;that is displayed when the mouse&#10;pointer hovers over it. Line breaks&#10;are created using &amp;#10;.].

<p><i>Result:</i></p>

<p>Individual words can be provided with a <span class="tooltip" title="A tooltip is a short explanatory text&#10;that is displayed when the mouse&#10;pointer hovers over it. Line breaks&#10;are created using &amp;#10;.">tooltip</span>.

<h3 id="section-highlighting">Highlighting</h3>

<p>Snippets to highlight individual lines or longer text passages.</p>

<h4 id="quote">Quote</h4>

<p>The <i>source text</i> is already formatted text:</p>

<p>Every person has a hole in their heart that only God can fit into. And nothing less than God can fill this hole.</p>
<a href="https://www.pro-medienmagazin.de/blaise-pascal-der-philosoph-der-christ-wurde/" target="_blank" rel="noopener" title="">Blaise Pascal (1623–1662)</a>

<p><i>Result:</i></p>

<blockquote>
	<p>Every person has a hole in their heart that only God can fit into. And nothing less than God can fill this hole.</p>
	<cite><a href="https://www.pro-medienmagazin.de/blaise-pascal-der-philosoph-der-christ-wurde/" target="_blank" rel="noopener" title="">Blaise Pascal (1623–1662)</a></cite>
</blockquote>

<h4 id="bible">Bible quote</h4>

<p>With this snippet, the last two lines are automatically converted into a link:</p>

<p><i>Source text:</i></p>

You will seek me and find me, when you seek me with all your heart. I will be found by you, declares the Lord.
Jeremiah 29:13-14
https://www.bibleserver.com/ESV/Jeremia29%2C13-14

<p><i>Result:</i></p>

<blockquote class="biblequote">
	<p><i>You will seek me and find me, when you seek me with all your heart. I will be found by you, declares the Lord.</i></p>
	<cite>– <a href="https://www.bibleserver.com/ESV/Jeremia29%2C13-14" target="_blank" rel="noopener">Jeremiah 29:13-14</a> –</cite>
</blockquote>

<h4 id="textbox">Text box</h4>

<p>A single line of text is displayed in a "textbox".</p>

<p><i>Source text:</i></p>

Surely goodness and mercy shall follow me all the days of my life, and I shall dwell in the house of the Lord forever.

<p><i>Result:</i></p>

<p class="textbox">Surely goodness and mercy shall follow me all the days of my life, and I shall dwell in the house of the Lord forever.</p>

<h4 id="table">Table</h4>

<p>Text is displayed in tabular form with rows and columns.</p>

<p><i>Source text:</i></p>

Column A | Column B | Column C
Cell A1 | Cell B1 | Cell C1
Cell A2 | Cell B2 | Cell C2
Cell A3 | Cell B3 | Cell C3
Table title

<p><i>Result:</i></p>

<figure>
	<table>
		<tr>
			<th>Column A</th>
			<th>Column B</th>
			<th>Column C</th>
		</tr>
		<tr>
			<td>Cell A1</td>
			<td>Cell B1</td>
			<td>Cell C1</td>
		</tr>
		<tr>
			<td>Cell A2</td>
			<td>Cell B2</td>
			<td>Cell C2</td>
		</tr>
		<tr>
			<td>Cell A3</td>
			<td>Cell B3</td>
			<td>Cell C3</td>
		</tr>
	</table>
	<figcaption>Table title</figcaption>
</figure>

<p>Instead of | you can also use tabs as separators:</p>

<p><i>Source text:</i></p>

Column A	Column B	Column C
Cell A1	Cell B1	Cell C1
Cell A2	Cell B2	Cell C2
Cell A3	Cell B3	Cell C3
Table title

<h4 id="code">Code</h4>

<p>Formats the text as program code. Line breaks are preserved.</p>

<p><i>Source text:</i></p>

function Next(amount)
{
	var i = imageIndex;
	i += amount;
	if (i >= imageCount[name])
		i = (amount === 1 ?  0 : imageCount[name] - 1);
	if (i !== imageIndex)
	{
		imageIndex = i;
		MoveImage(0, -1, function()
		{
				Viewer(null, function() { MoveImage(1, 0); });
		});
	}
}

<p><i>Result:</i></p>

<pre class="textbox">
function Next(amount)
{
	var i = imageIndex;
	i += amount;
	if (i >= imageCount[name])
		i = (amount === 1 ?  0 : imageCount[name] - 1);
	if (i !== imageIndex)
	{
		imageIndex = i;
		MoveImage(0, -1, function()
		{
				Viewer(null, function() { MoveImage(1, 0); });
		});
	}
}
</pre>

<h3 id="section-embedding">Embedding</h3>

<p>This allows media (audio, video) or maps to be embedded in the article.</p>

<h4 id="audio">Audio clip</h4>

<p>Displays an audio player for playing an audio file. The MP3 file is inserted from the media library (you may need to upload it there first). An external link can also be specified. Only one audio clip is played at a time; that is, if playback of a clip is started, playback of the currently playing clip will stop.</p>

<p><i>Source text:</i></p>

media/Froschkonzert.mp3
Frog concert

<p><i>Result:</i></p>

<figure>
	<audio controls src="media/Froschkonzert.mp3"></audio>
	<figcaption>Frog concert</figcaption>
</figure>

<h4 id="audio-playlist">Audio clip for playlist</h4>

<p>Unlike a simple audio clip (see above), this audio clip is part of a playlist. If several such audio clips are present on the page, they will be played sequentially. The currently playing audio clip will be visually highlighted.</p>

<p><i>Source text:</i></p>

media/Froschkonzert.mp3
Frog concert

<p><i>Result:</i></p>

<figure class="playlist">
	<p>Frog concert</p>
	<p><audio controls src="media/Froschkonzert.mp3"></audio></p>
</figure>

<h4 id="video">Video clip</h4>

<p>Displays a video player for playing a video file. The MP4 file is inserted from the media library (you may need to upload it there first). Of course, an external link can also be specified.</p>

<p><i>Source text:</i></p>

media/wolken.mp4
Clouds

<p><i>Result:</i></p>

<figure>
	<video controls src="media/wolken.mp4"></video>
	<figcaption>Clouds</figcaption>
</figure>

<h4 id="iframe">IFRAME (video, map, ...)</h4>

<p>Inserts external content (e.g. YouTube video, GoogleMaps map) into the article using an IFRAME.</p>

<h5 id="youtube">Example: Embedding a YouTube video</h5>

<p>The embedding code can be obtained via the "Share" function on the YouTube page for a video.</p>

<p><i>Source text:</i></p>

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/FpGYImM_VeM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
Lied: I Speak Jesus (Here Be Lions)

<p><i>Result:</i></p>

<figure>
	<iframe width="560" height="315" data-src="https://www.youtube.com/embed/FpGYImM_VeM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
	<figcaption>Lied: I Speak Jesus (Here Be Lions)</figcaption>
</figure>

<p>In the embed code above (&lt;iframe ...), the "src" attribute was manually replaced with "data-src". This ensures that the video is not loaded immediately, but only after clicking the button, in compliance with data protection regulations.</p>

<p>The placeholder image displayed instead of the YouTube player is a screenshot uploaded to the media library with the filename "FpGYImM_VeM.jpg", where "FpGYImM_VeM" corresponds to the YouTube video ID as specified in the YouTube URL in the embed code after "embed/". Alternatively, any other image filename can be specified in the "data-img" attribute (example: data-img="video.png").</p>

<h5 id="googlemaps">Example: Embedding a GoogleMaps map</h5>

<p>The embedding code for the map can be obtained via the "Share" function in the menu on the GoogleMaps page.</p>

<p><i>Source text:</i></p>

<iframe data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1331.6806453458598!2d11.513305599999997!3d48.1225556!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x5f875ba02a03736!2zNDjCsDA3JzIxLjIiTiAxMcKwMzAnNDcuOSJF!5e0!3m2!1sde!2sde!4v1660604605751!5m2!1sde!2sde" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
Google-Maps-Karte

<p><i>Result:</i></p>

<figure>
	<iframe data-img="media/gm-westpark.jpg" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1331.6806453458598!2d11.513305599999997!3d48.1225556!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x5f875ba02a03736!2zNDjCsDA3JzIxLjIiTiAxMcKwMzAnNDcuOSJF!5e0!3m2!1sde!2sde!4v1660604605751!5m2!1sde!2sde" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
	<figcaption>Google-Maps-Karte</figcaption>
</figure>

<p>In the embed code above (&lt;iframe ...), the "src" attribute was manually replaced with "data-src". This ensures that the map is not loaded immediately, but only after clicking the button, in compliance with data protection regulations.</p>

<p>The placeholder image displayed instead of the actual map is a screenshot uploaded to the media library with the filename "gm-westpark.jpg" and then specified in the manually added "data-img" attribute (data-img="media/gm-westpark.jpg").</p>

<h3 id="section-paragraph">Paragraph</h3>

<p>Snippets for formatting one or more lines.</p>

<h4 id="separator">Separator (* * *)</h4>

<p>Separators are suitable as visual dividers between two paragraphs, e.g. to write a postscript.</p>

<h2 class="center">* * *</h2>

<p>Here follows the separated paragraph...</p>

<h4 id="toc">Table of contents</h4>

<p>A table of contents is automatically generated based on the headings with IDs contained in the article. The IDs are used as jump targets. This demo article, in which the headings are tagged with IDs, serves as an example.</p>

<h4 id="toc-details">TOC, expandable</h4>

<p>As before, but expandable. This demo article, in which the headings are tagged with IDs, serves as an example. An example of how to use the snippet can be found at the very top of this article. Initially, the table of contents is expanded. If the "open" attribute is omitted, the table of contents is initially collapsed.</p>

<h4 id="summary">Section, expandable</h4>

<p>A section is initially hidden and can be expanded by clicking on the title:</p>

<p><i>Source text:</i></p>

Details
<p>Once upon a time...</p>
<p>And if they haven't died...</p>

<p><i>Result:</i></p>

<details class="textbox noprint">
	<summary><b>Details</b></summary>
	<p>Once upon a time...</p>
	<p>And if they haven't died...</p>
</details>

<h4 id="ul">List (● ● ●)</h4>

<p>The lines are displayed as bullet points.</p>

<p><i>Source text:</i></p>

Item 1
Item 2
Item 3

<p><i>Result:</i></p>

<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

<p>Further indentations can also be made. However, this must be done manually.</p>

<ul>
	<li>Item 1</li>
	<li>Item 2
		<ul>
			<li>Sub-item 1</li>
			<li>Sub-item 2</li>
			<li>Sub-item 3</li>
		</ul>
	</li>
	<li>Item 3</li>
</ul>

<h4 id="ol">List (1. 2. 3.)</h4>

<p>The lines are displayed as numbered list items.</p>

<p><i>Source text:</i></p>

Item 1
Item 2
Item 3

<p><i>Result:</i></p>

<ol>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ol>

<p>Further indentation can be achieved by manually entering HTML tags:</p>


<ol>
	<li>Item 1</li>
	<li>Item 2
		<ol>
			<li>Sub-item 1</li>
			<li>Sub-item 2</li>
			<li>Sub-item 3</li>
		</ol>
	</li>
	<li>Item 3</li>
</ol>

<h4 id="footnote">Single footnote (*)</h4>

<p>Adds a single "asterisk" footnote to the article.</p>

<p><i>Source text:</i></p>

Name changed for privacy reasons.

<p><i>Result:</i></p>

<ul class="footnote" id="note">
	<b>Note:</b>
	<li>Name changed for privacy reasons.</li>
</ul>

<h4 id="footnotes">Multiple footnotes (1. 2. 3.)</h4>

<p>Adds multiple numbered footnotes to the article.</p>

<p><i>Source text:</i></p>

Like Flexbox, Grid Layout is a very modern and simple way to create responsive and flexible layouts without having to use fixed sizes and other CSS settings such as position, float or clear.
Elements can be placed anywhere within a grid, even on top of each other if desired.
Grid Layout is supported in all modern browsers (and with vendor-prefix -ms- even in IE10- IE11).

<p><i>Result:</i></p>

<ol class="footnote" id="notes">
	<b>Notes:</b>
	<li>Like Flexbox, Grid Layout is a very modern and simple way to create responsive and flexible layouts without having to use fixed sizes and other CSS settings such as position, float or clear.</li>
	<li>Elements can be placed anywhere within a grid, even on top of each other if desired.</li>
	<li>Grid Layout is supported in all modern browsers (and with vendor-prefix -ms- even in IE10- IE11).</li>
</ol>

<p>Footnotes can also be provided with links to jump back and forth, such as the reference to pseudonyms<a href="#pseudonym">*</a> in this example:</p>

<ul class="footnote" id="pseudonym">
	<b>Note:</b>
	<li>Name changed for privacy reasons.</li>
</ul>

<h3 id="section-line">Line</h3>

<h4 id="nowrap">No auto-wrapping</h4>

<p>If text lines are to be broken at "break points" first, then the connected parts between these break points can be formatted with this snippet:</p> 

<p><i>Source text:</i></p>

First connected part, second connected part, third connected part.

<p><i>Result:</i></p>

<p><span class="nowrap">First connected part,</span> <span class="nowrap">second connected part,</span> <span class="nowrap">third connected part.</span></p>

<h3 id="section-comment">Comment</h3>

<p>Snippets for commenting out parts of the source code.</p>

<h4 id="remark-inline">Inline</h4>

<p>This allows you to comment out one or more words within a line.</p>

<p><i>Source text:</i></p>

<p>This is the first second time.</p>

<p><i>Result:</i></p>

<p>This is the <!-- first --> second time.</p>

<h4 id="remark-block">Block</h4>

<p>This allows you to comment out one or more lines.</p>

<p><i>Source text:</i></p>

<p>First line.</p>
<p>Second line</p>
<p>Third line.</p>
<p>Fourth line.</p>

<p><i>Result:</i></p>

<p>First line.</p>
<!--
<p>Second line</p>
<p>Third line.</p>
-->
<p>Fourth line.</p>

<h3 id="section-contact-link">Contact link</h3>

<p>Inserts a link to the contact form into the article. The subject and message text can be pre-filled.</p>

<h4 id="contact">plain</h4>

<p>Opens the contact form.</p>

<p><i>Source text:</i></p>

Contact form

<p><i>Result:</i></p>

<a href="contact">Contact form</a>

<h4 id="contact-subject">with subject</h4>

<p>Opens the contact form with a pre-filled subject line.</p>

<p><i>Source text:</i></p>

Contact form|Order

<p><i>Result:</i></p>

<a href="contact?subject=Order">Contact form</a>

<h4 id="contact-subject-message">with subject + message</h4>

<p>Opens the contact form with a pre-filled subject line and message text.</p>

<p><i>Source text:</i></p>

Contact form
Order
Message line 1{}Message line 2{}Message line 3{}{}Message line 5{}

<p><i>Result:</i></p>

<a href="contact?subject=Order&message=Message line 1{}Message line 2{}Message line 3{}{}Message line 5{}">Contact form</a>

<p>Note: For multi-line message text, {} is used as a line break.</p>

<h3 id="section-translation">Translation</h3>

<p>Snippets for the automated translation of the article or linked pages.</p>

<h4 id="lang">Multilingual article</h4>

<p>This snippet allows you to create bilingual articles with automatic switching between these two languages: (1) A non-English default language, such as German (de), and (2) English (en) for all users with a different language setting.</p>

<p>Further instructions and usage examples will be displayed after inserting the snippet.</p>

<h4 id="link-translate-target">Link</h4>

<p>This snippet inserts a link that opens the link destination in "Google Translate" and translates it into a target language. The source language to be used can be specified in the snippet's <b>x-data-translate-from</b> attribute (e.g., "de" for German). If left blank, the language specified in the HTML document's "lang" attribute is used. The target language is the language set in the user's browser (e.g., "en" for English). Redirection to "Google Translate" only occurs if the source and target languages differ.</p>

<p><i>Source text:</i></p>

More information can be found in the help file|help#setup.

<p><i>Result:</i></p>

More information can be found in the <a href="help#setup" target="_blank" rel="noopener" x-data-translate-from="">Help</a> file.

<h4 id="link-translate-page">Translate this page</h4>

<p>This snippet inserts a button to translate the page using "Google Translate". The source language to be used can be specified in the snippet's <b>x-data-translate-from</b> attribute (e.g., "de" for German). If left blank, the language specified in the HTML document's "lang" attribute is used. The target language is the language set in the user's browser (e.g., "en" for English). The button is only visible if the source and target languages differ.</p>

<p>Without selected text, a default link text is used (only visible if the article's language differs from the browser's language):</p> 

<p class="translate center hidden" x-data-translate-from=""></p>

<p>If you want to display custom link text for the button instead of the default link text, you can specify it within the <b>&lt;p&gt;</b> tag. When inserting the snippet, the highlighted text will be used for this purpose:</p>

<p><i>Source text:</i></p>

Translate

<p><i>Result</i> (only visible if the article's language differs from the browser's language):</p>

<p class="translate center hidden" x-data-translate-from="">Translate</p>

<h3 id="section-settings">Settings</h3>

<p>The snippets in this section insert forms that allow website visitors to configure various settings. These can be included, for example, in a dedicated settings page or in a privacy policy page.</p>

<h4 id="setting-external-content">External contents</h4>

<p>This form allows to configure whether external content, such as YouTube videos or Google Maps, which can be embedded in a website using IFRAMEs, is loaded automatically or only after clicking a button:</p>

<?php include 'snippets/setting-external-content.php'; ?>

<h4 id="setting-stats">Website statistics</h4>

<p>This form allows to specify whether statistical data may be collected during the visit to the website:</p>

<?php include 'snippets/setting-stats.php'; ?>

<h3 id="section-text-blocks">Text blocks</h3>

<p>Text blocks are reusable texts that can be inserted into articles and are centrally maintained. Changes to a text block are immediately visible in all articles in which it is inserted.</p>

<p>Examples of text blocks:</p>

<h4 id="example-textblock">Example text block</h4>

<?php include 'textblocks/example-textblock.html';?>

<p>To create a new text block, create a new file with the file type "Text block" using the "<b>New</b>" button (top left). Then, include it into the article using the PHP code above.</p>

<p>To integrate a text block as a snippet in the "Insert..." menu, create a new file with the file type "Snippet" and insert the PHP code there according to the example above. Then open the "snippets.xml" file from the "<b>Snippets</b>" area using the "<b>Open</b>" button (top) and insert the new snippet in the appropriate place.</p>

<p>Creating your own snippets is explained in detail on the <a href="help#snippets">Help</a> page under "<b>Create a snippet</b>".

<?php include 'lib/default-footer.php'; ?>
