Cutting long content into URL segments with HTML tag

[nikola]

I have a situation where I need to cut long content into multiple pages.

The best option is to use URL segments, but how can I accomplish this:

If editor of the article inserts H4 tag into body field through TinyMCE, the content after that tag would be automatically cut off and parsed to the URL segment generating title of that other page (URL segment 1) with that H4 tag. If editor puts another H4 tag into TinyMCE, content would expand to URL segment 2 and so on.

For example:

URL: /articles/lorem-ipsum/

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Editor inserts first H4 tag into content:

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

This is H4 tag

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

And this is what happens:

URL: /articles/lorem-ipsum/

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

URL: / articles/lorem-ipsum-2

Title (title is generated by that H4 tag)

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

And so on...

Something like this...

[Soma]

If you really really want to do it like this I would consider using repeaters here. It will simplify a lot.

Also I don't know if that url segment you're talking about is the best option. I sense it would make more sense form a SEO point to consider something like

URL: / articles/lorem-ipsum/2

or

URL: /articles/lorem-ipsum/page2

From there, using repeaters would be easy thing to mapp the nth repeater to the 1st urlsegment.

If really wanting to use 1 text field with h4 as the separator I would try doing it client side with jquery. Not that it's not possible with php, just think it could make sense to not generate additional url indexes. Though from a marketing standpoint those will love it as it generated more page impressions.

[nikola]

Soma, I wrote it wrong, article URL's would be like you mentioned:

/articles/lorem-ipsum/page2

I need to generate additional URL indexes so if you or someone can help me out adopting the class from the link I've posted above, it would be great. I wouldn't use repeaters if not necessary...

[SiNNuT]

nikola, maybe something like this?

[nikola]

SiNNuT, thanks for the link, missed that one, but when I try to use that it show me the second cut only, after first break mark.

I need H4 tag to be the cut mark and the content inside H4 tag would be the active link to that next content. Something like pagination, but instead pagination I would have titles wrapped in H4 tag that would point me to those text cuts.

[Soma]

I still trying to understand why you need to... Also using repeaters will simplify alot, even you could maybe make it up . Seeing you can't put the script up or don't even try to, I don't think it's a good idea to take an advanced script you don't understand, and it can get complicated...

Well I don't want to be mean, something like this should help:

$bodyArray = preg_split("/(<h4>.+?<\/h4>)/", $page->body, 0, PREG_SPLIT_DELIM_CAPTURE);

// get urlsegment pageNum, pageNum's needs to be turned on on template setting
// returns 1 by default even if no urls segments set.
$pnr = $input->pageNum;

if($pnr == 1) {
echo $bodyArray[$pnr-1];
} else {
$pnrText = ($pnr-1)*2;
$pnrSep = $pnrText - 1;
echo $bodyArray[$pnrSep] . $bodyArray[$pnrText];
}

// add link list to all text pages splited
$count = (count($bodyArray)-1) / 2 + 1;
for($i = 1; $i <= $count; $i++) {
if($i == 1) {
	$title = "<h4>First Page</h4>";
} else {
	$title = $bodyArray[($i-1)*2-1];
}
$class = '';
if($i == $pnr) $class = " class='active'";
echo "<a$class href='./page{$i}'>{$title}</a>";
}

EDIT: Optimized code a little as the count wasn't right.

[nikola]

Soma, thanks for the example, I couldn't put it up on my own, that script from fist post was the closest I could find. I'll look into repeaters as well

Thanks again for you help

[porl]

I'm thinking of the usage of repeaters in a similar way (not the url part) by adding a repeater element 'paragraph'. It would have an optional title area (that would render as, say, a h4 element) and a body area. This way you don't have the users feeling so much a need to 'pretty' up their content area with custom header styling etc from the wysiwig tinymce functions. The other option I am considering is to just limit the tinymce options to predefined styles but that is off topic here.

[ryan]

Here's another route you could take (written in browser, just an idea, not tested):

$n = $input->pageNum-1;
$data = explode('<h4>', $page->body);
if(!isset($data[$n])) $n = 0;
$body = $data[$n];
if($n) $body = "<h4>$body<p><a href='./page$n'>Previous Page</a></p>";
if(isset($data[++$n])) $body .= "<p><a href='./page$n'>Next Page</a></p>";
echo $body;

I think it's probably better to split on something you define, like "---break---" rather than an <h4> tag, but you should be able to split on just about anything using explode() or preg_split().

[Pete]

I'm sure there is a page break tag on HTML I've used before once for printing purposes.

If its still a valid HTML element it might be a button that can be enabled in TinyMCE (can't check with slow connection on my phone) and that would make life very easy.

[ryan]

As far as I know, the page breaks in HTML attributes are specific to printers? Not sure though, I've never had to use them. Could just break on an <hr> tag too.

[Soma]

There's no HTML for page break, but css has (for printing context)

http://www.w3schools.com/cssref/pr_print_pageba.asp

[nikola]

I've decided to use repeaters and it turned out great (it's better for print template that I have).

Here is the code:

if($input->urlSegment1 == '') {

echo $page->body;

foreach($page->additional as $additional) {

	$slug = cleanURL($additional->title);
	echo "<a class='button' href='{$slug}'>{$additional->title}</a>";

}

} else {

foreach($page->additional as $additional) {

	$slug = cleanURL($additional->title);

	if($input->urlSegment1 == $slug) {

		echo "<h2>{$additional->title}</h2>";
		echo $additional->body;
		echo "<a class='button' href='{$page->siblings->prev}'>Back</a>";

	}

}

foreach($page->additional as $additional) {

$slug = cleanURL($additional->title);

if($input->urlSegment1 != $slug) {

	$additional->remove($input->urlSegment1);
	echo "<a class='button' href='{$slug}'>{$additional->title}</a>";

}

}

}

I've enclosed slug function that I use in attachment (include it in article template).

I hope someone will find it useful for their projects. Maybe it could be improved, but it's working fine.

How it works:

You add repeater field to an article and add title and body field to it. You must turn on URL segments in article template.

When you add extra content through repeater field it shows extra content titles as links below content. When you click on some extra content's title it shows that content as URL segment and appands clean url to parent url of the article. Below extra content, links are shown to other extra content's defined through repeater field excluding the one currently showing.

slug.php

[ryan]

Looks good, thanks for posting back how you did it. Also wanted to mention that ProcessWire already has a function that does what your cleanURL function is doing:

$slug = $sanitizer->pageName($title);

or this variation tries to make a prettier version:

$slug = $sanitizer->pageName($title, true); 

[nikola]

Thanks Ryan, wasn't sure about that.

[nikola]

Although I'm satisfied how URL segments work (from my example), how can I do it with URL segments instead page numbers using Soma's code? This code work absolutely fine except that I want to add URL segment names sanitized to page URL (instead page(n) numbers) ...

$bodyArray = preg_split("/(<h4>.+?<\/h4>)/", $page->body, 0, PREG_SPLIT_DELIM_CAPTURE);

// get urlsegment pageNum, pageNum's needs to be turned on on template setting
// returns 1 by default even if no urls segments set.
$pnr = $input->pageNum;

if($pnr == 1) {
	echo $bodyArray[$pnr-1];
} else {
	$pnrText = ($pnr-1)*2;
	$pnrSep = $pnrText - 1;
	echo $bodyArray[$pnrSep] . $bodyArray[$pnrText];
}

// add link list to all text pages splited
$count = (count($bodyArray)-1) / 2 + 1;
for($i = 1; $i <= $count; $i++) {
	if($i == 1) {
		$title = "<h4>First Page</h4>";
	} else {
		$title = $bodyArray[($i-1)*2-1];
	}
	$class = '';
	if($i == $pnr) $class = " class='active'";
	echo "<a$class href='./page{$i}'>{$title}</a>";
}

[ryan]

I'm not clear about the question. What is the source of the URL segments you'd want to use?

[nikola]

Hi Ryan, sorry for the late reply.

The source of URL segments I want to use is an article, let's say that I have an article on top o which I'm applying URL segments using my code above.

So, I would like to use URL segments the way Soma explained for using with page numbers.

So if I would have break on first H4, that would become article-name/first-segment-name, on second break it would become article-name/second-segment-name and so on...

[Soma]

Could do it with js. The problem is what to use as the segment names? And if using something like h4 once you change a letter the url going to change. So it would be maybe make sense to use repeaters? Or using some inline tags defined to better control it splitting the text.

[nikola]

Currently I'm using repeaters and it works fine, but editor of the site asked me if it could be done that way to simplify things for them...

h4 value would be applied to url segment as its name...

[ryan]

I would really avoid using the h4 title as a URL segment as it seems like a potentially very fragile solution. Page numbers would probably be a little less fragile. If the editor really can't handle repeaters, I'd suggest using <hr> (or something else nice and direct like this) as the page delimiter rather than an <h4>, and sticking to page numbers rather than URL segments.