02131612140109100711080506031504
Sie sind hier: Startseite > Website bauen > CMSimple_XH > Plugins > morpagedata > Bericht über Implementierung

Bericht über Implementierung von Morepagedata

Da ich keine Ahnung hatte wie ich statt 8 modifizierten Templates bestimmte Teile des Templates über Variablen verändern kann habe ich im Forum um Hilfe gebeten:

https://cmsimpleforum.com/viewtopic.php?f=16&t=15637

TaTa hat mich auf  morepagedata aufmerksam gemacht. Mit Anleitung von Ick, Holger und vor allem frase habe ich es dann geschafft folgende Lösung zu erarbeiten (die aber noch verbesserungsfähig ist):

laut help_de.html
Hinweis:
 Vor dem Zuweisen von Variablennamen lohnt es sich, die Pagedata über die CMSimple_XH-Standardfunktion zu bereinigen.

Damit ist gemeint in der Admin-Ansicht auf Einstellungen und dann auf Page-Data zu klicken.

Nach erfolgreicher Installation des Plugin "morpagedata" habe ich die Variablen für die Verwendung im Template definiert.

laut help_de.html
Nach Eintrag der Variabeln im Plugin-Backend, wird diese zu den Pagedata hinzugefügt und ist nicht mehr veränderbar, man kann sie nur noch löschen, was sie auch in den Pagedata löscht.

  • Die Anzeige, der Typ und die Optionen können geändert werden.
  • Um die Anzeige der Variablen Im Pagedata-Rieter zu gruppieren, kann man eine horizontale Linie (<hr>) nach einer Variablen einstellen.
  • Um Variablen nur für bestimmte Templates zu zeigen, die Namen dieser Template im entsprechenden Feld eintragen. Mehrere Namen durch Komma trennen.
  • Eingetragener Hilfetext wird als Tool-Tip in der Pagedataansicht gezeigt.

Mausover auf 'Plugins' in der Admin-Ansicht (Frontend),  Auswahl der Einstellungen von Morepagedata.

Definition der später im Template verwendeten Variablen

Ganz links: blauer Pfeil nach oben = verschiebt die Definitionszeile um eins nach oben, rotes X = löscht die Definitionszeile, grünes Plus = fügt eine leere Definitionszeile ein

Erste Spalte mit Eingabefeld = Unter der Rubrik Anzeige gibt man die Beschriftung des späteren Input-Feldes ein, also z.B. 'obere Newsbox', 'untere Newsbox', 'Template-Hauptfarbe' und 'Slideshow-Bilderordner'.

Zweite Spalte mit Eingabefeld = In der Rubrik Variablenname legt man den Namen der Variablen fest der dann im Template eingetragen wird (um nach Möglichkeiten Kollisionen mit im System vorhandenen Variablen zu vermeiden empfehle ich an den sinngebenden Namensteil irgend etwas kryptisches oder Ziffern anzuhängen, wie z. B. die Jahreszahl)

Dritte Spalte mit Auswahlfeld = hier wählt man den Feldtyp aus
(Zitat aus dem Hilfetxt über verfügbare Feld-Typen am Ende dieses Artikels)

Vierte Spalte mit Checkbox = In der Rubrik  br  legt man den Zeilenumbruch nach der Definitionszeile fest

Fünfte Spalte mit Checkbox = In der Rubrik  hr  legt man die Horizontallinie nach der Definitionszeile fest

über das  ?  auf blauem Grund blendet man das Eingabefeld für den Tooltip Hilfetext ein

über das rote Tpl blendet man das Eingabefeld ein, in dem die Templatenamen eingegeben werden (kommagetrennte Liste), für die die Variablen gelten sollen

Im Temlpate werden unmittelbar vor der Zeile
</head>
die nachfolgenden markierten Code-Zeilen eingefügt.

<script>
document.write('<style>#noScript { display: none; }<\/style>')
</script>
<!-- *** Wenn der Variablen $MainColor2019 ein Wert zugewiesen wurde wird der Default-Wert der stylesheet.css überschrieben *** -->
<?php if (isset($MainColor2019)):?>
<style type="text/css">
.secHeader, .secHeader #searchform input { background: <?=$MainColor2019?>; }
#footer { border-top-color: <?=$MainColor2019?>; }
hr, hr.hrdot, #header { border-bottom-color: <?=$MainColor2019?>; }
</style>
<?php endif;?>
<!-- *** end *** -->
</head>

Direkt nach dem Header kommt der modifizierte Code für den Slider:

</header>
<?php
if (XH_ADM && !$edit || !XH_ADM):?>
<div class="row-full-width slideshow">
<!-- *** Wenn der Variablen $SliderFolder2019 ein Wert zugewiesen wurde wird die Slideshow mit dem dadurch festgelegten Bilderordner ausgeführt, sonst mit dem Stanard-Ordner *** -->
<?php if (isset($SliderFolder2019)):?>
<?=slideshow($SliderFolder2019);?>
<?php else:?>
<?=slideshow('headerimages');?>
<?php endif;?>
<!-- *** end *** -->
</div>
<?php endif?>

Direkt nach dem "Ende" das  Bereichs für die mittlere Spalte, also unmittelbar nach dem Unterseitenmenü befindet sich der Block für die News-Boxen-Ausgabe. Dort werden die markierten Codezeilen abgeändert.

<main class="maincont c12"><?=content();?>
<hr style="border-bottom: 1px solid #505050;">
<p><?php echo top()?></p>
<div class="submenDiv"><?=submenu('<span>%s</span>');?></div>
<aside id="newsboxes2" class="row clear">
<!-- *** Die News-Boxen werden mit den durch $NewsBox2019A und $NewsBox2019B festgelegten versteckten Seiten dargestellt. Haben die Variablen keinen Wert, werden keine News-Boxen angezeigt. *** -->
<section class="news"><?=newsbox($NewsBox2019A);?></section>
<section class="news"><?=newsbox($NewsBox2019B);?></section>
</aside>
</main>
<aside id="newsboxes" class="c6">
<section class="news"><?=newsbox($NewsBox2019A);?></section>
<section class="news"><?=newsbox($NewsBox2019B);?></section>
</aside>

Auf dem Reiter Seite des Editorfensters wird das modifizierte Template ausgewählt wenn es nicht schon sowieso das einzige Template ist und damit auch das Standard-Template.

Auswahl des modifizierten Templates 

Auf dem Reiter Mehr werden die gewünschten Werte ausgewählt:

Eingabe der Werte

Fährt man mit dem Mauszeiger über die Fragezeichen erscheinen die Hilfetexte. Das erste Fragezeichen enthält die vorbelegten Hilfetexte, das zweite Fragezeichen (wenn vorhanden) zeigt die Benutzerdefinierten Hilfetexte.

1. Hilfetext 

2. Hilfetext


Zitat aus dem Hilfetext

Verfügbare Feld-Typen

Checkbox

Kann irgendetwas an- oder ausschalten, wie in obigem Beispiel die Breite des Inhaltsbereichs. Ein anderes Beipiel, um das Einlog-Feld von Memberpages zu zeigen oder nicht zu zeigen: 
<?php
if(isset($memberslogin)) {echo memberslogin();}
?>


Color picker

nutzt Jan Odvárko's jscolor. Color Picker erzeugt Farbcode der mit # anfängt. Statt Farbcode kann man auch englische Farbnamen (z.B.: white, red, blue, green, black) eingeben.


Image folder

zeigt eine Auswahlliste mit allen Bildern aus dem Ordner, der in der Pluginkonfiguration angegeben ist.


Input field

erzeugt einen selbstwachsenden Eingabebereich für Fälle, in denen die anderen Feldtypen zu begrenzt sind.


Option list

Bei Auswahl dieses Typs im Pluginbackend erscheint eine neue Zeile in der man die Optionswerte einträgt, entweder so
option 1||option 2||option 3 oder so
option 1|angezeigter Text 1|option 2|angezeigter Text 2|option 3|angezeigter Text 3 etc.
Kein | am Ende!


Plugin call

Hier kann man über eine Auswahlliste Plugin-Aufrufe voreinstellen. Einen Pluginaufruf ohne { { { PLUGIN: and following ; } } } eingeben, z.B. einfach nur quoteoftheday(). Dahinter ein | einfügen sowie den Text, den der Nutzer in der Auswahlliste zu sehen bekommt (z.B. quoteoftheday()|Zitat des Tages).
Hinter einem weiteren | kann man einen weiteren Pluginaufruf gefolgt von | und Text schreiben.
Diese vorgefertigten Pluginaufrufe sind praktisch für unerfahrene Nutzer oder für komplizierte Aufrufe. Die so aufgerufenen Plugins erscheinen immer am Seitenende.


Select hiddenpages

erzeugt eine Auswahlliste mit allen versteckten Seiten für die Auswahl des Inhalts einer Newsbox. Der Code mit der Beispielvariablen $news sähe folgendermaßen im Template aus:
<?php if (isset($news)){echo '<div>'.newsbox($news).'</div>';}
else{echo '<div>'.newsbox('News').'</div>';} ?>

Ein anderes Beispiel für Newsboxen innerhalb eines doppelten divs:
<?php if (isset($news)):?>
<div class="news">
   <div class="newsin">
      <?php echo newsbox($news);?>
      <div style="clear: both;"></div>
   </div>
</div>
<?php else:?>
<div class="news">
   <div class="newsin">
      <?php echo newsbox('News');?>
      <div style="clear: both;"></div>
   </div>
</div>
<?php endif;?>


Template image

erzeugt eine Auswahlliste mit allen Bildern des Template Ordners. Den Pfad in der Pluginkonfiguration eingeben.


Slide show

nutzt das jQuery Plugin cycle.lite von malsup. Der Fade-Effect erscheint, wenn mindestens 2 Bilder ausgewählt wurden. Dieses jQuery Plugin wird nur geladen, wenn die Diashow auch tatsächlich genutzt wird. Wenn Sie die Diashow nicht wollen, wird das Plugin nicht geladen.

Die Diashow ins Template einbauen

Den Pfad zu den Bildern in der Pluginkonfiguration einstellen. Angenommen Ihre Variable lautet $slideshowetwa folgenden Code an die gewünschte Stelle im Template-Body einfügen:
<?php
if(isset($slideshow)) {
   echo '<div class="slideshow">'.slideShowImages($slideshow).'</div>';}
?>

Um die Bilder zu zentrieren oder rechtsbündig darstellen zu können (voreingestellt ist linksbündig), stellt Morepagedata alle Bilder in ein <div>. Morepagedata erzeugt folgenden Code: 
<div class="slideshow">
   <div><img src="./images/image1.jpg" ></div>
   <div><img src="./images/image2.jpg" ></div>
</div>

Um die Bilder zu zentrieren oder rechtsbündig darzustellen benötigt man folgende CSS-Anweisungen: 
/* ============= Slideshow ============= */
.slideshow {
   float:right;
   width:350px;
   height:300px;
   margin-left:10px;
}
.slideshow div {
   width:350px;
   height:300px;
   overflow: hidden;
}
.slideshow div img {
   margin: 0 0 0 auto; /* this line for right aligned images */
   margin: auto; /* or this line for centered images */
   display:block;
}


Bildquellen

Slideshowbilder von James Osborne , StartupStockPhotos , Daniel Agrelo , fancycrave1 , Boskampi , Gerd Altmann 

Screenshots von Karl Richard Lembach

Letzte Bearbeitung:

Seitenanfang

Please activate JavaScript in your browser.

» Sitemap