ProcessWire - Layout Blöcke mit RepeaterMatrix

Mit einer RepeaterMatrix, kann man Einzelfelder zu Gruppen zusammenfassen um z.B. verschiedene Layoutblöcke zu definieren. Diese Gruppen kann man wiederholt nutzen. Im Gegensatz zum Repeater Feld können nicht nur gleichartige Felder wiederholt werden. Der Benutzer kann alle in der Matrix definierten Gruppen auswählen.

Links

https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Snippets#Parent_von_Repeater_oder_RepeaterMatrix_finden
ProcessWire - Repeater Matrix

Quickstart

• ProFields: Repeater Matrix installieren
• Ein RepeaterMatrix Feld definieren und dort dann die Gestaltungsblöcke definieren.

Repeater Matrix Feld: layout_blocks

• Partial zum späteren Inkludieren erstellen

z.B. partials/layout_blocks.inc

• Partial im Template inkludieren
• Felder definieren die man später in den Layoutblöcken nutzen möchte -> gut benennen
• Skripte für die Gestaltungsblöcke anlegen

fields/layout_blocks/accordion.php
fields/layout_blocks/headline.php

• Eventuell benötigte Skripte einbinden. Bei AJAX Seitenwechseln kann es notwendig sein neu zu initialisieren.

Liste von Layoutblocks im Einsatz

TODO - Create Git

Hinweis: Der Code ist mittlerweile deutlich verbessert und es gibt weit mehr. Die Beispiele funktionieren, sind aber zum Teil umständlich.

LayoutBlock - LoadAlert (uikit)

Zeigt ein Modal Window beim Laden der Seite. Z.B. für wichtige Nachrichten.

LayoutBlock - Leaflet Map (uikit)

OpenStreetMap Karte mit Clustering und Gesture Handling. Basiert auf uiKit kann leicht modifiziert werden.

Dateien

Layout Blocks Version 1.1

templates/layout-blocks.php

<?php namespace ProcessWire;
include("./partials/layout-blocks.inc");
$layoutBlocks = renderLayoutBlocks($page,$additionalHeaderData);// 2nd passed by reference
?>

<div id="main" class="">
<?=$layoutBlocks?>
</div>

templates/partials/layout-blocks.inc

<?php namespace ProcessWire;
function renderLayoutBlocks($page,&$additionalHeaderData){
	$out = '';
	foreach($page->layout_blocks as $item) {
		// Hint: $item->type refers to name field
		// Every item will be rendered in templates/fields/layout_blocks/[field_name].php
		switch ($item->type) {
			case 'map_leaflet': // some cases need additional stuff
				$map = wire('modules')->get('MarkupLeafletMap'); // somtimes you need to load a module...
				//$map->getLeafletMapHeaderLines(false);
				//$additionalHeaderData .= $map->getLeafletMapHeaderLines();
				$additionalHeaderData .= '
  				<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
				$item->myMap = $map;
				$out .= $item->render();
				break;
			default: // default case just leads to rendering field 
				$out .= $item->render(); // default case leads to rendering file without modifications.
				break;
		}
		//var_dump($item->type);

	}
	return $out;
}

?>

Beispiel Renderfile s.u.

partials/layout_blocks.inc (Version 1)

Wird die Renderfunktion der RepeaterMatrix aufgerufen, sucht ProcessWire automatisch in fields/repeater_matrix_feldname/item_name.php nach dem Rendering. Es muß einfach

<?php namespace ProcessWire;
/* Shows layout blocks
 * uses repeater Matrix field
 * uses standard render function which looks after templates/fields/matrix_field_name/child_field_name.php for returning markup
 */

function renderLayoutBlocks($page){
  $out = '';
  foreach($page->layout_blocks as $item) {
    switch ($item->type) {
      case 'headline':
        $out .= $item->render(); // looks for templates/fields/layout_blocks_matrix/headline.php
        break;
      case 'content':
        $out .= '<section>'.$item->body.'</section>';
        break;
      case 'responsive_image':
        $out .= $item->render();
        break;
      case 'accordion':
        $out .= $item->render(); // looks for templates/fields/layout_blocks/accordion.php
        break;
      default:
        $out .= '<div class="message">Keine Renderdefinition gefunden für den Typ: '.$item->type.'</div>';
        break;
    }
  }
  return $out;

}

Template einbindung z.b. layout_blocks.php

include("./partials/layout_blocks.inc");
$layoutBlocks = renderLayoutBlocks($page);
$content = $layoutBlocks;

partials/layout_blocks.inc (Kurzversion)

Integriert die layout_blocks.inc ins Template und verkürzt diese. Vorteil: übersichtlich. Nachteil: nicht so schön zu debuggen. Muß noch getestet werden.

<?php namespace ProcessWire;
/* Shows layout blocks
 * uses repeater Matrix field
 * uses standard render function which looks after templates/fields/matrix_field_name/child_field_name.php for returning markup
 */

function renderLayoutBlocks($page){
  $out = '';
  foreach($page->layout_blocks_matrix as $item) {
    $out .= $item->render(); // looks for templates/fields/layout_blocks_matrix/itemTypeName.php
  }
  return $out;
}

Beispiele für Layout Blöcke

ProcessWire - TimeTable (Layoutblock uikit)
ProcessWire - stickyFlags (Layoutblock)

Accordion (Bootstrap)

fields/layout_blocks/accordion.php (Bootstrap Accordion Style)

<?php namespace ProcessWire;
  /*
   * Accordion Bootstrap Style
   * Used fields: 
   * accordion_repeater (repeater field)
   * accordion_headline
   * accordion_content
   */

  $markup = '<div class="panel-group accordion" id="accordion-'.$page->id.'">';
	//return "render function Accordion class";
  //$firstClass = 'in'; // used for first panel
  $firstClass = '';
  foreach($page->accordion_repeater as $panel){
    $markup .= '
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="collapsed" data-toggle="collapse" data-parent="#accordion-'.$page->id.'" href="#collapse'.$panel->id.'">'
            .$panel->accordion_headline.'
          </a>
        </h4>
      </div>
      <div id="collapse'.$panel->id.'" class="panel-collapse collapse '.$firstClass.'">
        <div class="panel-body">'.$panel->accordion_content.'</div>
      </div>
    </div>';
    $firstClass='';
  }
  $markup .= '</div>';
  return $markup;

?>

Responsive Image

<?php namespace ProcessWire;
$out = '';
$w = 600; // width
foreach($page->images as $image) {
  $out .= '
  <div class="">
    <img class="img-responsive" style="width: 100%; height: auto;" src="'.$image->width($w)->url.'">
  </div>';
}
return $out;

Weitere Beispiele

Layout Block - portfolio_box

Vegas Slider

<?php namespace ProcessWire;

$out = '';
$slides = array();
$width = 600; // todo -> make this accessible via textbox in admin

foreach($page->images as $image){
  $myImage = $image->width($width);
  $slides[] = '{ src: "'.$myImage->url.'" }';
}

$out = '<div class="vegas" style="height:290px;width:auto; padding-top: 12px;"> &nbsp; </div><!-- vegas end -->';
$out .= '
<script type="text/javascript">
function initVegas(){
  $(".vegas").vegas({
    delay:8000,
    timer:false,
    transition: "fade2",
    transitionDuration: 1500,
    animation: "random",
    slides: ['.implode($slides,',').']
  });
}
// use initVegas() from ajax post if loading via ajax
</script>
';
return $out;

Banner Image

<?php namespace ProcessWire;
// Banner Image
$out = '';
$templateName = $page->getForPage()->template->name;
if($templateName == "isotope-child") $isotopeFilterClass = $page->getForpage()->name;// class if template is isotope-child
else $isotopeFilterClass = "home";// for all other templates we want to show content imediately (home class inits first isotope element)
$myImage = "";
$myImageMarkup = "";
$imageWidth = 1244;

if($page->iso_elem_image){
  $myImage = $page->iso_elem_image->width($imageWidth);
  $myImageMarkup = '<img src="'.$myImage->url.'" class="responsive-image" alt="">';
}

ob_start();
?>
<!-- ======== Element: Banner Image ======== -->
<div class='element <?=$isotopeFilterClass?>'>
  <div class='element-wrapper'>
    <div class='' id=''>
      <div class='profile-picture' id='profile-picture'>
        <?= $myImageMarkup ?>
      </div>
    </div>
  </div>
</div>
<!-- ======== / Element ======== -->

<?php
$out = ob_get_contents();
ob_end_clean();

return $out;

Owl Carousel

<?php namespace ProcessWire;

$out = '';
$slides = '';
$width = 1280; // todo -> make this accessible via textbox in admin

foreach($page->images as $image){
  $myImage = $image->width($width);
  $items .= '<!-- item --> <div class="project-single-carousel-item"> <img src="'.$myImage->url.'" alt=""/> </div><!-- item end -->';
}

$out = '
<!-- Carousel -->
<div id="project-single-carousel" class="project-single-carousel owl-carousel">
	'.$items.'
</div>
<!-- Carousel end -->';

$out .= '
<script type="text/javascript">
// additional JS if nessecary
</script>
';

return $out;

Content Box mit Icon

<?php namespace ProcessWire;
// Big Content Box
$out = '';
//$out .= $page->iso_elem_title;
$templateName = $page->getForPage()->template->name;
if($templateName == "isotope-child") $isotopeFilterClass = $page->getForpage()->name;// class if template is isotope-child
else $isotopeFilterClass = "home";// for all other templates we want to show content imediately (home class inits first isotope element)
$myIcon = "";
$myIconMarkup = "";
$iconWidth = 80;

if($page->iso_elem_icon){
  $myIcon = $page->iso_elem_icon->width($iconWidth);
  $myIconMarkup = '<div class="element-big-content-ico"><img src="'.$myIcon->url.'" alt=""></div>';
}
ob_start();
?>

<!-- ======== Element:  <?=$isotopeFilterClass?> Content Box ======== -->
<div class="element element-content element-project-description <?=$isotopeFilterClass?>">
  <div class="element-wrapper">
    <?= $myIconMarkup ?>
    <h2 class="element-big-content-title"><?= $page->iso_elem_title ?></h2>
    <?= $page->iso_elem_content ?>
  </div>
</div>
<!-- ======== / Element ======== -->
<?php
$out = ob_get_contents();
ob_end_clean();

return $out;

Dateiliste mit Größenauswahl

<?php namespace ProcessWire;
// Big Content Box
$out = '';
//$out .= $page->iso_elem_title;
$templateName = $page->getForPage()->template->name;
if($templateName == "isotope-child") $isotopeFilterClass = $page->getForpage()->name;// class if template is isotope-child
else $isotopeFilterClass = "home";// for all other templates we want to show content imediately (home class inits first isotope element)
$myIcon = "";
$myIconMarkup = "";
$iconWidth = 80;
$sizeClass = "";
// content box color
$bgColorClass = 'bgColor3'; // default color (dark)
switch ($page->bg_color) {
  case '1': //  hellgrau
    $bgColorClass='bgColor3';
    break;
  default:
    $bgColorClass='bgColor4';
    break;
}
// Element Size
switch ($page->iso_elem_size) {
  case '1': // small
    $sizeClass = "size-s";
    $aspectClass = "a-1-1";
    $imgW = 400; //image width
    $icoW = 200; //icon width
    break;
  case '2': // medium
    $sizeClass = "size-m";
    $aspectClass = "a-2-1";
    $imgW = 800;
    $icoW = 200;
    break;
  case '4': // medium
    $sizeClass = "size-s";
    $aspectClass = "a-1-2";
    $imgW = 400;
    $icoW = 200;
      break;
  default: // big
    $sizeClass = "size-m";
    $aspectClass = "a-1-1";
    $imgW = 800;
    $icoW = 200;
    break;
}
if($page->iso_elem_freeAspect){$aspectClass = "a-no";}
if($page->iso_elem_icon){
  $myIcon = $page->iso_elem_icon->width($iconWidth);
  $myIconMarkup = '<div class="element-big-content-ico"><img src="'.$myIcon->url.'" alt=""></div>';
}
ob_start();
?>

<!-- ======== Element: <?=$isotopeFilterClass?> Content Box ======== -->
<div class="element element-content content-box <?=$sizeClass?> <?=$isotopeFilterClass?>">
  <div class="aspect-wrapper <?=$aspectClass?>">
      <div class="element-wrapper stretch scrollbox transition <?=$bgColorClass?>">
        <?= $myIconMarkup ?>
        <h2 class=""><?= $page->iso_elem_title ?></h2>
        <?php
        foreach($page->pdf_files as $item){
          echo '<div class="pdf_link file" style="padding-bottom: 0.5em;"><a href="'.$item->url.'" target="_blank" style="">'.$item->description.'</a></div>';
        }
        ?>
      </div>
  </div>
</div>
<!-- ======== / Element ======== -->
<?php
$out = ob_get_contents();
ob_end_clean();

return $out;

Probleme beheben

Vegas Slider und AJAX Page Wechsel

Todo siehe MVZ Seite