<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Collection Kurzdoku</title>
<meta name="content-language" content="de">
<style type="text/css">
body {font-family: arial, sans-serif; line-height: 1.4em;}
div#main {max-width: 1160px; padding: 24px; margin: 0 auto;}
h1, h2 {color: #720; padding-top: 100px;}
h3 {padding-top: 60px; margin: 0;}
h4 {padding: 20px 0 0 0; margin: 0;}
p.code {font-family: Courier New; font-size: 15px; border: 1px solid #999; background: #eed; padding: 8px 12px;}
span.code {font-family: Courier New; color: #620;}
td {border: 1px solid; padding: 8px 12px;}
ul {padding: 5px 0 5px 16px; margin: 0;}
li {padding: 3px 0; margin: 0;}
a:link, a:visited {color: #249;}
a:hover {color: #c60;}
</style>
</head>

<body>
<!-- utf-8 check: äöüß -->

<div id="main">
<p style="font-size: 24px;"><a href="http://translate.google.de/" target="_blank">Google translator &raquo;</a></p>
<p>(Opens in a new window - öffnet in einem neuen Fenster)</p><hr>
<h1>Kurz-Dokumentation Plugin "Collection"</h1>
<p><b>Version Collection 1.8</b> - released 2024-07</p>
<p>Das Plugin <b>Collection</b> ist eine Sammlung von Scripten, für die sich ein eigenes Plugin nicht lohnt.</p>






<h2>1. Systemvoraussetzungen</h2>
<p>Voraussetzung ist eine funktionierende Installation von CMSimple 4.2 oder höher.</p>
<hr>





<h2>2. Installation</h2>
<ol>
	<li>zip-Datei herunterladen und mit einem geeigneten Programm entpacken</li>
	<li>Laden Sie den Ordner collection/ in das Verzeichnis ./plugins/ Ihrer CMSimple Installation hoch.</li>
</ol>
<hr>





<h2>3. Datei- und Ordnerrechte</h2>
<p>Damit das Programm funktioniert und arbeiten kann (bzw. administrierbar ist), müssen eventuell für bestimmte Dateien und Ordner bestimmte Schreib- und Leserechte vergeben werden.</p>

<p><b>Dateien: chmod 666</b></p>
<ul>
	<li><span style="font-family: Courier New;">./plugins/collection/css/<strong>stylesheet.css</strong></span></li>
</ul>
<hr>





<h2>4. Plugin-Aufrufe / Funktionen</h2>

<p style="background: #c00; color: #fff; text-align: center; border-radius: 3px; padding: 9px 16px;"><b>Hinweis: </b>Bitte fügen Sie die Plugin Aufrufe immer in der Quelltext Ansicht ein.<br>Oder kopieren Sie sie zuerst in einen Code- oder Texteditor, und von da aus in den CMSimple Inhalt, damit Formatierungen entfernt werden.</p>

<ul id='sitemap' style="padding-top: 24px;">
<li><a href="#1">4.1 Zuletzt geänderte CMSimple Seiten (Last Changed CMSimple Pages)</a></li>
<li><a href="#2">4.2 Zeitgesteuerte Veröffentlichung (scheduled publishing)</a></li>
<li><a href="#3">4.3 Externe Datei einfügen (embed file)</a></li>
<li><a href="#4">4.4 Adventskranz</a></li>
<li><a href="#5">4.5 Countdown PHP</a></li>
<li><a href="#6">4.6 Countdown JS</a></li>
<li><a href="#7">4.7 Bildschirmauflösung und Viewport</a></li>
<li><a href="#8">4.8 CMSimple Seiten als Overlay im Lightbox Stil</a></li>
<li><a href="#9">4.9 Anrufbuttons</a></li>
<li><a href="#10">4.10 RSS Feeds einbinden</a></li>
</ul>



<h3 id=1>4.1 Zuletzt geänderte CMSimple Seiten (Last Changed CMSimple Pages)</h3>

<p>Mit dieser Funktion können Sie eine im Plugin-Aufruf festgelegte Anzahl der zuletzt geänderten CMSimple Seiten anzeigen.</p>
<p class="code">{{{plugin:col_lastChangedPages(9);}}}</p>

<p>Die Anzeige des Änderungsdatums können Sie mit einem 2. Parameter deaktivieren:</p>
<p class="code">{{{plugin:col_lastChangedPages(9,'nodate');}}}</p>

<p><a href="#sitemap">nach oben</a></p>



<h3 id=2>4.2 Zeitgesteuerte Veröffentlichung (scheduled publishing)</h3>

<p>Mit dieser Funktion können Sie eine CMSimple-Seite zeitgesteuert stundengenau veröffentlichen.</p>
<p class="code">{{{plugin:col_scheduledPage('yyyymmddhh','yyyymmddhh');}}}</p>

<p><b>Beispiel (Example):</b></p>
<p>Mit diesem Funktions-Aufruf wird die Seite vom 01.03.2019 0:00 Uhr bis zum 31.03.2019 24:00 Uhr veröffentlicht.</p>
<p class="code">{{{plugin:col_scheduledPage('2019030100','2019033123');}}}</p>

<p><a href="#sitemap">nach oben</a></p>



<h3 id=3>4.3 Externe Datei einfügen (embed file)</h3>

<p>Mit dieser Funktion können Sie z. B. eine pdf-Datei in Ihre Seite einfügen.</p>
<p class="code">{{{plugin:col_embedFile('path','width','height','class');}}}</p>

<p><b>Beispiel (Example):</b></p>
<p class="code">{{{plugin:col_embedFile('userfiles/pdf/my.pdf','100%','480px','col_embedFile');}}}</p>
<p>Den letzten Parameter kann man weglassen, dann ist automatisch die CSS-Klasse .col_embedFile aktiv.</p>

<p><a href="#sitemap">nach oben</a></p>



<h3 id=4>4.4 Adventskranz</h3>

<p>Mit diesen Funktionen können Sie einen Adventskranz in Ihre Seite einfügen. Der Adventskranz erscheint am 1. Advent, an jedem Advent geht eine weitere Kerze an. Ab dem 4. Advent brennen 4 Kerzen bis zum 24. Dezember 14:00 Uhr. Danach erscheint ein Weihnachtsbaum bis zum Jahresende.</p>
<p><b>Im Inhalt:</b></p>
<p>mit .png Grafiken:<p>
<p class="code">{{{plugin:col_adventPNG();}}}</p>
<p>oder mit animierten GIFs:<p>
<p class="code">{{{plugin:col_adventGIF();}}}</p>

<p><b>Im Template (template.htm):</b></p>
<p>mit .png Grafiken:<p>
<p class="code">&lt;?php echo col_adventPNG();?&gt;</p>
<p>mit animierten GIFs:<p>
<p class="code">&lt;?php echo col_adventGIF();?&gt;</p>

<p>Wenn Sie den Parameter 'test' eingeben, ist der Adventskranz dauerhaft sichtbar:</p>
<p class="code">&lt;?php echo col_adventPNG('test');?&gt;</p>

<p><a href="#sitemap">nach oben</a></p>



<h3 id=5>4.5 Countdown PHP</h3>

<p>Mit dieser Funktion können Sie einen Countdown zu einem Tag in Ihre Seite oder in das Template einfügen.</p>

<p>In eine Seite einfügen:</p>
<p class="code">{{{plugin:col_countdown(year,month,day,'text_singular','text_plural','Text am Zieltag','Text nach Ablauf',hdiff);}}}</p>

<p>In die template.htm einfügen:</p>
<p class="code">&lt;?php echo col_countdown(year,month,day,'text_singular','text_plural','Text am Zieltag','Text nach Ablauf');?&gt;</p>

<p><b>Beispiel (Example):</b></p>
<p>Countdown auf Silvester</p>
<p class="code">{{{plugin:col_countdown(2022,12,31,'Tag bis Silvester','Tage bis Silvester','Guten Rutsch!','Prost Neujahr!');}}}</p>
<p><b>Achtung!</b> Die ersten 3 Parameter sind numerische Werte, werden also <b>NICHT</b> in Quotes gesetzt.<br>Es sind die Werte des Zieltages.</p>

<p><a href="#sitemap">nach oben</a></p>



<h3 id=6>4.6 Countdown JS</h3>

<p>Mit dieser Funktion können Sie einen dynamischen JavaScript Countdown zu einem Tag in Ihre Seite oder in das Template einfügen.</p>

<p>In eine Seite einfügen:</p>
<p class="code">{{{plugin:col_jsCountdown('Zieltag','text_Tage','text_Stunden','text_Minuten','text_Sekunden','Text_nach_Ablauf','id');}}}</p>

<p>In die template.htm einfügen:</p>
<p class="code">&lt;?php echo col_jsCountdown('Zieltag','text_Tage','text_Stunden','text_Minuten','text_Sekunden','Text_nach_Ablauf','id');?&gt;</p>

<p><b>Beispiel (Example):</b></p>
<p>Countdown auf Neujahr</p>
<p class="code">{{{plugin:col_jsCountdown('2023-01-01 00:00:00','Tage','Std','Min','Sec','Prost Neujahr!','neujahr2023');}}}</p>
<p><b>Achtung!</b> Die Syntax für den 1. Parameter muss unbedingt eingehalten werden: 'YYYY-mm-dd hh:mm:ss'</p>
<p>Bei mehreren Countern auf einer Seite muss der letzte Parameter mit einer eindeutigen ID angegeben werden.</p>

<p><a href="#sitemap">nach oben</a></p>



<h3 id=7>4.7 Bildschirmauflösung und Viewport</h3>

<p>Mit diesen Funktionen können Sie die Bildschirmauflösung und den Viewport (Breite x Höhe in px) anzeigen lassen.</p>

<p>In eine Seite einfügen:</p>
<p class="code">{{{plugin:col_screenres();}}}</p>
<p class="code">{{{plugin:col_viewport();}}}</p>
<p>In die template.htm einfügen:</p>
<p class="code">&lt;?php echo col_screenres();?&gt;</p>
<p class="code">&lt;?php echo col_viewport();?&gt;</p>

<p>Die Funktionen dürfen nur 1x pro Seite aufgerufen werden.</p>

<p><a href="#sitemap">nach oben</a></p>



<h3 id=8>4.8 CMSimple Seiten als Overlay im Lightbox Stil</h3>

<p>Mit diesen Funktionen können Sie die Druckansicht einer CMSimple Seite, Webseiten und verschiedene Dateitypen in einem Overlay im Lightbox Stil präsentieren. Sie erzeugen einen Link, der, wenn er angeklickt wird, das Overlay erzeugt.</p>
<p style="background: #c00; color: #fff; text-align: center; border-radius: 3px; padding: 9px 16px;"><b>Hinweis: </b>Diese Funktionen sind zur Darstellung eigener Inhalte in Overlays gedacht.<br>Manche Funktionen bieten auch die Möglichkeit, fremde Inhalte einzubinden. Wenn Sie das tun, beachten Sie bitte das Urheberrecht.</p>


<h4>4.8.1 Die Funktion col_ovlPage()</h4>
<p>Diese Funktion zeigt eine eigene CMSimple Seite aus der aktuellen Website, Subsite oder Zweitsprache als Overlay:<p>
<p class="code">{{{plugin:col_ovlPage('id','Seite','Linktext','Design','top');}}}</p>
<ul>
<li><b>id</b>: id (Name) des Overlays, muss eindeutig sein und darf nur einmal vorkommen. Keine Umlaute und Sonderzeichen.</li>
<li><b>Seite</b>: die CMSimple Seite, die als Overlay dargestellt werden soll (wie in der Adresszeile des Browsers nach dem "?")</li>
<li><b>Linktext</b>: der Text für den Link</li>
<li><b>Design (optional)</b>: Standard Designs: 'bright' oder 'dark', Voreinstellung: bright</li>
<li><b>top (optional)</b>: der vertikale Abstand des Overlays vom oberen Rand des Viewports (Beispiele: '100px' '10vh' usw.), Voreinstellung: 6vh</li>
</ul>
<p><b>Beispiel:</b></p>
<p class="code">&lt;?php echo col_ovlPage('2023-12-20-15-10','Datenschutzerklaerung','Datenschutzerklärung','dark','60px');?&gt;</p>

<h4>4.8.2 Die Funktion col_ovlURL()</h4>
<p>Diese Funktion zeigt Websites und Dateien als Overlay.</p>
<p>Getestet wurden folgende Dateitypen: .mp4 .ogv .webm .jpg .jpeg .png .gif .htm sowie .txt Dateien mit html Code.</p>
<p>Es wurde auch mit .php Dateien getestet, diese müssen grundsätzlich absolut referenziert werden, beginnend mit http(s)://. <p>
<p class="code">{{{plugin:col_ovlURL('id','URL','Linktext','Design','top');}}}</p>
<ul>
<li><b>id</b>: id (Name) des Overlays, muss eindeutig sein und darf nur einmal vorkommen. Keine Umlaute und Sonderzeichen.</li>
<li><b>Seite</b>: vollständiger URL der Website oder Datei, die als Overlay dargestellt werden soll</li>
<li><b>Linktext</b>: der Text für den Link</li>
<li><b>Design (optional)</b>: default: bright, Standard Designs: 'bright' oder 'dark'</li>
<li><b>top (optional)</b>: der vertikale Abstand des Overlays vom oberen Rand des Viewports (Beispiele: '100px' '10vh' usw.)</li>
</ul>
<p><b>Beispiel:</b></p>
<p class="code">{{{plugin:col_ovlURL('2023-12-20-15-16','./userfiles/overlays/demo.txt','Externe Textdatei','bright');}}}</p>



<h4>4.8.3 Die Funktion col_ovlFrame()</h4>
<p>Diese Funktion funktioniert wie die Funktion col_ovlURL() und hat die gleiche Syntax. Sie verwendet einen iFrame im Overlay und ist hauptsächlich zur Darstellung eigener CMSimple Seiten auf restriktiv konfigurierten Servern geeignet. Man kann damit auch externe Websites und Dateien in einem Overlay darstellen, manche Website Betreiber verhindern jedoch die Anzeige ihrer Websites in fremden Frames (und das mit Recht), und es gibt Probleme mit der Darstellung von http-Seiten in iFrames von https-Seiten.</p>
<p><b>Beispiel:</b></p>
<p class="code">{{{plugin:col_ovlFrame('2023-12-20-15-24','./userfiles/overlays/demo.txt','Externe Textdatei','bright');}}}</p>



<h4>4.8.4 Vorschaubild statt Linktext</h4>
<p>Die Funktionen col_ovlURL() und col_ovlFrame() können für Bilder und Videos (.mp4 .ogv .webm .jpg .jpeg .png .gif) statt des Textlinks ein Vorschaubild (Thumbnail) anzeigen. Dazu müssen folgende Bedingungen erfüllt sein:</p>
<ul>
<li>In dem Ordner, in dem die Video- oder Bilddatei liegt, z. B. <b>dateiname.mp4</b>,  muss eine Datei <b>dateiname_thumb.jpg</b> liegen.</li>
<li>Im Pluginaufruf muss der Funktionsparameter 'Linktext' die Zeichenfolge %img% enthalten.</li>
</ul>
<p><b>Beispiel:</b></p>
<p class="code">{{{plugin:col_ovlURL('2023-12-20-15-39','./userfiles/overlays/demo.mp4','%img%Demo Video');}}}</p>
<p>Jetzt muss man nur die Zeichenfolge %img% entfernen, wenn man statt des Vorschaubildes wieder den Textlink haben will.</p>

<p><a href="#sitemap">nach oben</a></p>



<h3 id=9>4.9 Anrufbuttons</h3>

<p>Mit diesen Funktionen können Anrufbuttons erzeugt werden. Auf Mobiltelefonen funktionieren die in der Regel, auf PCs muss ein entsprechendes Programm installiert sein, ähnlich wie bei E-mail Links.</p>


<h4>4.9.1 Die Funktion col_callPhone()</h4>
<p>Diese Funktion erzeugt einen Button mit einem konventionellen Telefon Icon:<p>
<p class="code">{{{plugin:col_callPhone('Telnr','Titel','Style','maxwidth');}}}</p>
<ul>
<li><b>Telnr</b>: Internationale Telefonnummer, Beispiel Berlin: +4930...</li>
<li><b>Titel (optional)</b>: der bei mouseover angezeigte Titel, z. B. "Jetzt anrufen"</li>
<li><b>Style (optional)</b>: CSS Code (überschreibt das Stylesheet) Beispiel: 'margin-right: 16px;'</li>
<li><b>maxwidth (optional)</b>: Maximale horizontale Auflösung in px, bei der der Button angezeigt wird (1 Eintrag betrifft alle Buttons auf der Seite) Beispiel: '600px'</li>
</ul>

<h4>4.9.2 Die Funktion col_callMobile()</h4>
<p>Diese Funktion erzeugt einen Button mit einem Smartphon Icon:</p>
<p class="code">{{{plugin:col_callMobile('Telnr','Titel','Style','maxwidth');}}}</p>
<p>Die Syntax ist die gleiche wie bei der Funktion col_callPhone().<p>

<p><a href="#sitemap">nach oben</a></p>



<h3 id=10>4.10 RSS Feeds einbinden</h3>

<p>Mit dieser Funktion können Sie RSS Feeds in eine CMSimple Seite einbinden.</p>

<p class="code">{{{plugin:col_embedRssFeed('URL',Anzahl,'Beschreibung',trim);}}}</p>
<ul>
<li><b>URL</b>: Vollständiger URL der RSS Datei, beginnend mit http(s)</li>
<li><b>Anzahl (optional)</b>: Anzahl der angezeigten Beiträge, Standard: 4</li>
<li><b>Beschreibung (optional)</b>: 'desc' zeigt auch die Teasertexte an, alles andere nur die Überschriften der Beiträge</li>
<li><b>trim (optional)</b>: löscht von hinten Stellen des Datum-Uhrzeit-Codes, Standard: -14</li>
</ul>

<p><b>Beispiel</b></p>
<p class="code">{{{function:col_embedRssFeed('https://www.wetterkontor.de/de/rss.asp',6,'desc');}}}</p>
<p>Dieser Pluginaufruf zeigt den RSS Feed mit 6 Beiträgen und mit Teasertexten an.<p>

<p><a href="#sitemap">nach oben</a></p>



<h2>5. Konfiguration</h2>
<p>Für <b>Collection</b> gibt es keine Konfigurations Optionen.</p>
</div>
</body>
</html>