Layout text in columns

Kirby 2 Solved ✅
1

Hello Kirby Fans, i’m sure you Know This way to make a Colum

(columns…)

++++

(image: imagefile.png)
(…columns)

But Do you Know a Easier Way to Make a Colum? For Left and Right?

Thanks Guys

Cheers Simon

2

What do you mean with easier? Some kind of markup for the columns is always required and I think the syntax of the columns plugin is pretty simple. What would you like to use?

3

a Plugin which make it easier to Create a Right and Left Column, i’m not sure if it works whit a Blueprint Field

4

What do you need the columns for?

5

For my site, Because I would like to save place in the editor

6

Well, of course for your site, but what exactly is the use case? Maybe you can do the layout in the template instead of in the text files.

7

What Exactly you mean?

8

Let’s say the layout of your site always has two columns. You can then use two separate fields and output them in columns in your template.

9

Exactly as @lukasbestle suggests.

10

and how i have to Build these Fields and the Template

11

I suggest you look into the different ways of aligning two divs or other elements with HMTL/CSS (floats, inline blocks, flexbox), depending on your use case.

12

If you need it in a textarea field of the panel you can enable makdown extra and use its syntax like

| Item      | Value |
| --------- | -----:|
| Computer  | $1600 |
| Phone     |   $12 |
| Pipe      |    $1 |

from https://michelf.ca/projects/php-markdown/extra/#table

Good luck!

13

Tables are not columns, that’s semantically not correct.

14

If you want to layout the text (or anything really from the wysiwyg-editor) in two columns, why don’t you use CSS columns? Browser support is pretty good (prefixed) : http://caniuse.com/#feat=multicolumn .

I’ve made a example: http://codepen.io/anon/pen/qNjQwW .

I don’t know if you mean this sort of layout :slight_smile:

1 Like
15

Hmm okay thanks guys :slight_smile:

16

@texnixe helped me with a plugin that you could also use to create column with a shorter markup,and using css columns

plugin:

<?php

kirbytext::$pre[] = function($kirbytext, $text) {
$text = preg_replace_callback('!\(paragraphe(…|\.{3})\)(.*?)\((…|\.{3})paragraphe\)!is', function($matches)         use($kirbytext) {
$customtext = $matches[2];
$html    = "";
$field = new Field($kirbytext->field->page, null, trim($customtext));
$html = '<div class="paragraphe">' . $field->kt() . '</div>';
return $html;
 }, $text);
return $text;
 };

css:

 .paragraphe {
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
 column-count: 3;
 }

kirbytext:

(paragraphe...)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. ...
(...paragraphe)
17

I definitely see what you mean. It’s not as straight forward as other Kirby functionality.
But sadly you will need a tag that defines a column in a single textarea. For one German client I translated the (columns...) to (spalten...). That helped and wasn’t hard at all.

Most of the time I try to define two fields in the blueprint. You can set the width to 1/2 so it’s more intuitive. At least in the desktop version of the panel. It looks like that then:

Bildschirmfoto 2016-07-06 um 12.45.42.png1112×399 46.7 KB

1 Like
18

Do you think you can say me how you have Build That?, like the Blueprint and the Template, Because that is exactly that what i need.

19

Just as I described it in the previous post:

textlinks:
  label:     Text links
  type:      textarea
  width:     1/2
textrechts:
  label:     Text rechts
  type:      textarea
  width:     1/2

Super simple.

20

And how have you Build The Template?