FieldtypeGridSpace by carlitoselmago

A grid selector for space design.

FieldtypeGridSpace

A grid selector for space design

An input field for placing DOM elements in horizontal grids based on Bootstrap grid system.

backend example

An example of use in frontend:


frontend example

PHP

foreach($items as $item){
  $gridspace=$item->gridspace;

  $gridspace=explode(",",$gridspace);
  $gridcolumnstart=intval($gridspace[0])+1;
  $gridcolumnend=intval(end($gridspace))+2;

  $grid='grid-column-start: '.$gridcolumnstart.'; grid-column-end:'.$gridcolumnend.';';

  content.='<div data-sort="'.$item->sort.'" style="'.$grid.'">Lorem ipsum<div>';
}

CSS (Use the percentage of width and the amount of columns, in this example 7 columns with a 14.28% of width - 100/7 -)

.grid {
  display: grid;
  grid-template-columns: 14.28% 14.28% 14.28% 14.28% 14.28% 14.28% 14.28%;;
}

HTML (generated in PHP)

<div class="grid">
  <div style="grid-column-start: 1;grid-column-end: 2;" >A</div>
  <div style="grid-column-start: 3;grid-column-end: 5;" >A</div>
  <div style="grid-column-start: 7;grid-column-end: 8;" >A</div>
</div>

Known bugs:


-The field cannot yet be used in repeater fields or twice at the same page.

Install and use modules at your own risk. Always have a site and database backup before installing new modules.

Twitter updates

  • In this week’s blog post we’ll take a brief look at a powerful new ProFields module for ProcessWire that’s just around the corner—the Combo field: More
    4 December 2020
  • There’s a new modules directory on the ProcessWire site now up and running. In this post we’ll cover a few details about what’s changed and what’s new—More
    20 November 2020
  • ProcessWire 3.0.168 core updates — More
    26 October 2020

Latest news

  • ProcessWire Weekly #343
    In the 343rd issue of ProcessWire Weekly we'll introduce ProFields Combo and Payment Stripe Elements, as well as the alpha version of Padloper 2. Read on!
    Weekly.pw / 5 December 2020
  • About the new ProcessWire ProFields Combo Field
    This week we'll take a brief look at a powerful new ProFields module for ProcessWire that's just around the corner—the Combo field.
    Blog / 4 December 2020
  • Subscribe to weekly ProcessWire news

“…building with ProcessWire was a breeze, I really love all the flexibility the system provides. I can’t imagine using any other CMS in the future.” —Thomas Aull