Layout text in columns

The template:

<div class="text">
  <?= $page->textlinks()->kt() ?>
</div>
<div class="text">
  <?= $page->textrechts()->kt() ?>
</div>

The stylesheet:

.text {
  width: 50%;
  float: left;
}

Ahh i understand, you include the Code in your Template, and who include The stylesheet?

You include the stylesheet part in your stylesheet. If you’re using the starterkit, it’s in assets/css/main.css

Okay, and what is if i use a Theme?

You’d probably have to add that to your theme css. But maybe the theme already includes such column feature in its css. Have you looked?

I once used this https://getkirby.com/blog/columns-in-kirbytext as a startpoint for a bootstrap theme.

I created the complete bootstrap grid with it (row, container, column, etc…).

BTW. not the best practice to merge layout and content, of course - but my client wanted it so…

The final result was a smart grid; the width of every colum was calculated; 3 cols = size 4, 2 cols = size 6, etc…).

You can do that with basic PHP (create a while loop, or use OB-buffering).

Sorry for my bad English :stuck_out_tongue_winking_eye:

Below the template, I used - can not share the whole thing due to legal restrictions - may be you can use it as a starterpoint, or inspiration for your own grid system.

<?php

  global $debug;
  $debug = true;

/* Ref. https://forum.getkirby.com/t/where-can-i-save-my-php-files-for-ajax/1035/5?u=1n3jgkl9pq6cumrw */

/* ----------------------------- */
/* Request is not valid; exit... */
/* ----------------------------- */

  if(!kirby()->request()->ajax() && !$debug) {
    header::notfound($send = true);
    header("Location: /404");
    exit();
  }
?>

<div class="intro"><?php echo $page->text()->kirbytext(); ?></div>

<?php

/* ----------------------------- */
/* Request is valid; continue... */
/* ----------------------------- */

  if(strlen($page->button_main())):
?>

  <button class="btn btn-next"><?php echo $page->button_main()->text(); ?></button>

<?php

  endif;

  $form_elements = yaml($page->flow());
  $i = 0;
  $group = 0;
  $width_total_group = 0;
  $width_total_element = 0;
  $elements = count($form_elements);
  $name_prev = null;

  $width_max = 12; /* maximum amount of columns in one row */
  $width_xs = 12; /* default width for all elements on smaller screens */

  if($elements):
?>

  <form id="flow_form">
    <div class="row">

<?php
  foreach($form_elements as $form_element):

/* Get vars for each entry */

  $name = $form_element["name"];
  $text = $form_element["text"];
  $type = $form_element["type"];

/* Convert width to [12 column] BS grid-system */
/* Nested - ref. http://codepen.io/SitePoint/pen/raBPeo */

  $width = $form_element["width"];

  switch ($width) {

    case 100:
      $width = $width_max;
      break;
    case 50:
      $width = floor($width_max/2);
      break;
    case 33:
      $width = floor($width_max/3);
      break;
    case 25:
      $width = floor($width_max/4);
      break;
    case 66:
      $width = floor($width_max/1.5);
      break;
    case 75:
      $width = floor($width_max/1.33);
      break;
  }

/* Check if image is defined */

  $image = null;

  if($form_element["image"]) {
    $image = "<img src=\"".$page->file($form_element["image"])->url()."\" width=\"150\" class=\"img-responsive\" alt=\"\"><br>";
  }

/* Add unique-index after #ID's */

  if($type != "radiobutton" && $name == $name_prev) {
    $i++;
  }

  $name_prev = $name;

/* Open | close fieldset (group | BS column) */

  if($type == "formgroup") {

      $width_total_group += $width;

      if($group) {
        echo "</div></fieldset>";

          if($width_total_group > $width_max) {
            $width_total_group = $width;
            echo "</div>";
            echo "<div class=\"row\">";
          }
      }

    $group++;
    $i = 0;

    echo "<fieldset class=\"col-sm-$width col-xs-$width_xs\"><legend>$name</legend>";
  } else {
    $width_total_element += $width;

    if($width_total_element > $width_max) {
      $width_total_element = $width;
      echo "</div><div class=\"row\">";
    }

  }

  switch ($type) {

/* ---------------------------------------
  # FORMGROUP
--------------------------------------- */

    case "formgroup":
      echo "<h3>$text</h3><div class=\"row\">";
      break;

/* ---------------------------------------
  # RADIOBUTTON
--------------------------------------- */

    case "radiobutton":
      echo "<label class=\"label_".$type." col-sm-$width col-xs-$width_xs\">$image<input type=\"radio\" name=\"".$name."_".$i."\"><br>".$text."</label>";
      break;

/* ---------------------------------------
  # CHECKBOX
--------------------------------------- */

    case "checkbox":
      echo "<label class=\"label_".$type." col-sm-$width col-xs-$width_xs\">$image<input type=\"checkbox\" name=\"".$name."_".$i."\"><br>".$text."</label>";
      break;

/* ---------------------------------------
  # TEXTFIELD
--------------------------------------- */

    case "textfield":
      echo "<label class=\"label_".$type." col-sm-$width col-xs-$width_xs\">".$text."<br><input type=\"text\" name=\"".$name."_".$i."\" placeholder=\"".$text."\"></label>";
      break;

/* ---------------------------------------
  # FILE-UPLOAD
--------------------------------------- */

    case "fileupload":

      if(strpos($text,";")) {
        $text = explode(";", $text);
        $q = -1;
        echo "<label class=\"label_".$type." col-sm-$width col-xs-$width_xs\">".$text[0]."<br><div><i class=\"ti-upload\"></i>".$text[1]."<input type=\"file\" name=\"".$name."_".$i."\"></div></label>";
      } else {
        echo "<label class=\"label_".$type." col-sm-$width col-xs-$width_xs\"><b>Error</b> - multi-entry not semi-column seperated...</label>";
      }

      break;

/* ---------------------------------------
  # SELECTBOX
--------------------------------------- */

    case "selectbox":

      if(strpos($text,";")) {
        $options = $text;
        $options = explode(";", $options);
        $q = -1;

        echo "<label class=\"label_".$type." col-sm-$width col-xs-$width_xs\">".$options[0]."<br><select name=\"".$name."_".$i."\">";
          foreach ($options as &$value) {
            $q++;
              if($q>0) {
              $selected = $q == 1?" selected":"";
               echo "<option$selected>".$value."</option>";
              }
          }
          unset($value);
        echo "</select></label>";
      } else {
        echo "<label class=\"label_".$type." col-sm-$width col-xs-$width_xs\"><b>Error</b> - multi-entry not semi-column seperated...</label>";
      }

/* ------------------------------------ */

  }
  endforeach;
  endif;

/* Close all elements, when needed */

  if($elements):
?>

      </fieldset>
    </div>
  </form>

<?php endif; ?>

<script>step_id = "<?php echo $page->step_id(); ?>";</script>

Uploading…

How the columns were created in the back-end.

Gray row means container / row, white sibling is column…

No but i will look now, i’m using The Chameleon Theme

It’s using bootstrap so columns are included.

In your template simply create two columns:

<div class="col-sm-6">
  <?= $page->textlinks()->kt() ?>
</div>
<div class="col-sm-6">
  <?= $page->textrechts()->kt() ?>
</div>

The about page does that already if you want to look how they’ve built it.

textlinks means “text left”

textrechts means text right

(it’s Dutch) :stuck_out_tongue:

Or just out of the box…

http://getkirby-plugins.com/columns

That’s the solution @thesmithy mentioned in his first post and doesn’t want to use. Or at least wanted to know if there any other methods which we’ve all been laying out.

And I just learned some dutch today :slight_smile: Thanks !

Yay :blush:, thanks for the Help :blush:

Sorry - to quick to post :stuck_out_tongue_winking_eye:

I think the best solution is to create some columns in the back-end and read them in the front end like you mentioned

<div class="col-sm-6">
  <?= $page->textlinks()->kt() ?>
</div>
<div class="col-sm-6">
  <?= $page->textrechts()->kt() ?>
</div>

The screenshot shows how I divided a footer intro three columns that way…

1 Like

Thanks :blush: you are amazing :smiley: !