Better ways to add sections to content?

Kirby 2 Solved ✅
1

Maybe I already have a good enough solution, but the PHP feels a bit ugly.

My site looks like this:

Pasted image1084×797 90 KB

This is css columns. To make it not break in a sentence I wrap everything in sections, kind of like this:

<section>
<h2>Title1</h2>
<p>Some text</p>
</section>

<section>
<h2>Title2</h2>
<p>Some text2</p>
</section>

For others who wants the same thing, this is my css:

.content {
  columns: 2;
  column-gap: 40px;
  column-rule-style: solid;
  column-width: 360px;
}
section {
  break-inside: avoid;
}
section p {
  display: inline-block;
}

The PHP, which I feel like it could be improved somehow:

function textAddSections($text) {
	$text = strtr($text, array(
		'<h2>' => "</section>\n<section>\n<h2>",
		'<h3>' => "</section>\n<section>\n<h3>"
	));

	$text = $text . '</section>';

	$explode = explode("</section>\n<section>", $text);
	if( $explode[0] == '' && str::contains($text, '<section>') ) {
		$text = substr($text, 20);
	}

	$text = "<section>\n" . $text;
	return $text;
}

echo textAddSections($page->my_field()->kirbytext());

It’s easy to break it. Any other more solid solution?

2

Imho, the best way would be to re-structure your text, e.g. using the structure field or modules or the page builder, instead of putting everything into a big text area field and then do string replacements. Or create a plugin similar to the columns plugin and use like this:

(section...)
bla bla bla
(...section)
3

Thanks! :slight_smile:

The structure field is an interesting idea. The pitfall is that I then need to do something with the content in order for it to work.

With my fragile function I don’t need to to that. My original content looks like this (before the parsing):

## Title1

Some text

## Title2

Some text2

I see now that I should have written this before to make it clear how it looks. Because it’s so simple, I’m a bit offensive against the structure field and the kirbytext tag suggestions.

But I have not made a decisions yet so I’ll think about it. More ideas are welcome as well.

4

Actually you don’t need to hack it with PHP. You can force a column break on each h2 element with CSS alone.

h2 {
  break-before: column;
}

Check out the Code Pen below!

5

That would have been brilliant if it would have worked. What it does is that it’s breaking into more columns than set. You set 3 columns but it’s broken into 4 columns.

But I still like the idea. Too bad it fails. :confused:

Update

I added a question on stackoverflow as well: http://stackoverflow.com/questions/41381908/css-break-column-before-element-without-breaking-the-wrapper

Update 2

It seems like the only way is to use a parent element and I’ve decided to stick with my hacky solution. I could use javascript to fix it with the dom but that would probably be a bit jumpy when page loads (javascript loads late to not render block).

6

Are you achieving proper imbrication of sections with your PHP code? E.g. if you have H2 and H3 titles in your content, you should have:

<section>
  <h2>Some heading</h2>
  <p>…</p>
  <section>
    <h3>…</h3>
    <p>…</p>
  </section>
</section>

and not:

<section>
  <h2>Some heading</h2>
  <p>…</p>
</section>
<section>
  <h3>…</h3>
  <p>…</p>
</section>

If you’re not nesting sections properly, you might want to use an element with neutral semantics (<div>) rather than misuse an element with specific semantics (<section>).

1 Like
7

I think you are right about that after reading this:

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

Source: html - Nesting HTML5 section tags - Stack Overflow

So I’ll go with divs instead. Sections is not what I need in this case.

Thanks! :slight_smile: