PAGEGRID multi field support and developer features 🙌

[jploch]

Multi field support 

The latest version adds support for multiple PAGEGRID fields per page. This makes PAGEGRID more flexible when you want editors to control only some parts of the layout. Each field can use its own block templates:

 

If you want to render more than one PAGEGRID field per page, you can call the render function for a specific field like this (assuming you added the fields named “mygrid” and “mygrid2” to your page template):

<!-- render markup for field mygrid -->
<?= $page->mygrid; ?>
<!-- render markup for field mygrid2 -->
<?= $page->mygrid2; ?> 

The old render function $pagegrid->renderGrid($page) still works, but it will always render the first field it finds. You can use $pagegrid->renderGrid($page, $field) or $page->fieldName to render a specific field.

 

Custom code and markup

You don’t have to write complicated foreach statements, PAGEGRID takes care of rendering clean markup. PAGEGRID wraps each item in a wrapper element. You can change the tag name or add custom classes to it easily. The rest of the markup is inside your block templates. Nice and clean.

Add this function at the top of your block template file to change the wrapper element:

<?php 
//The wrapper element of this block template uses the section tag and some custom classes
$pagegrid->renderOptions(['page' => $page, 'tag' => 'section', 'classes' => 'my-class my-class-2 foo-class']); 

//Here goes your markup
?>

 

CSS code

It’s also easy to control the behavior of the grid using only CSS code (If you prefer to write your own CSS code or include a CSS framework, you can disable PAGEGRID‘s style panel):

/* overwrite PAGEGRID defaults */
/* wrapper */
/* Use 6 equally sized grid columns */
.pg {
    grid-template-columns: repeat(6, 1fr);
}
/* items */
/* set both properties to auto */
/* let grid items take the available space */
.pg .pg-item {
   grid-row-start: auto; 
   grid-column-start: auto;
}

/* or set only grid-row-start to auto */
/* items can still be positioned freely on the columns */
.pg .pg-item {
   grid-row-start: auto; 
}

/* new items */
/* you can use this class to set the defaults for new items */
/* here we are overwriting the default size of grid items */
/* using this class makes sure you can still resize items with the PAGEGRID field */
.pg .pg-item-added {
   grid-column-end: span 3; /* let new grid items span 3 columns */
   grid-row-start: auto; /* you can also change the placement here */
}

You don't even have to use grid, flexbox or block also works. PAGEGRID makes no assumptions about your CSS code. Just make sure to call your stylesheet after you render the styles from PAGEGRID, so you can overwrite the defaults.

Item Placement

As a default dragged items will be placed manually on the grid. Manually placed items can overlap themselves. Here is a quick example, how the CSS properties grid-row-start: auto; and grid-column-start: auto; effect the dragging of grid items:

 

Backend/Frontend

PAGEGRID renders the same template in the backend (iframe) and frontend so the design will look the same. If you want to render only some parts in the backend you can use this check:

<?php 
if( $pagegrid->isBackend() ) { 
  // render things only for the backend
} else {
  // render things only for the frontend
}
?>

You can also do this at the top of your template file (assuming you use your own template file instead of the default pagegrid-page.php):

<?php namespace ProcessWire;

// in the backend we render the default template and return (renders just the field)
// ignores markup regions by default (file has $pagegrid->noAppendFile($page)) and just renders that file 
if( $pagegrid->isBackend() ) { 
	include('pagegrid-page.php');
	return;
}
?>
<!-- render frontend stuff here (you can use markup regions if you like ) -->
<div id="content">
	<p>Custom frontend code for <?= $page->title ?></p>
 	<!-- render PAGEGRID for the frontend -->
	<?= $pagegrid->styles($page); ?>
	<?= $pagegrid->renderGrid($page); ?>
	<?= $pagegrid->scripts($page); ?>
</div>

In this case your page will load two different templates for the backend and the frontend. So you have to load your custom CSS code in both files if you want the backend/frontend to look the same.

For more examples check out the docs 🤓