The template:
<div class="text">
<?= $page->textlinks()->kt() ?>
</div>
<div class="text">
<?= $page->textrechts()->kt() ?>
</div>
The stylesheet:
.text {
width: 50%;
float: left;
}
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
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>
How the columns were created in the back-end.
Gray row means container / row, white sibling is column…
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)
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 Thanks !
Yay , thanks for the Help
Sorry - to quick to post
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…
Thanks you are amazing !