How to extract and use an HTML H1 node in a resource's Content field
mdehaan asked...
I'm looking for a Snippet/Output Modifier to:
- Get the value of a H1 tag from the resource's Content
- Remove the H1 tag including its value
- Output the value to a placeholder
I know we can get any value from a tv or the pagetitle field, but for this project the H1 has to be inside the Content field. What I'm trying to achieve is to have the end user use the H1 tag from the WYSIWYG editor from the main content field. This is easier to understand for them.
The Solution:
Bruno17 says...
snippet 'extractH1fromContent':
<?php
$html = $modx->resource->get('content');
$tag = 'h1';
preg_match_all('|<h[^>]+>(.*)</h[^>]+>|iU', $html, $headings);
foreach ($headings as $heading){
$fullnode = isset($heading[0]) ? $heading[0] : '';
$text = isset($heading[1]) ? $heading[1] : '';
if (strstr($fullnode,'h1')){
$modx->setPlaceholder('h1.fullnode',$fullnode);
$modx->setPlaceholder('h1.text',$text);
$html = str_replace($fullnode,'',$html);
break;
}
}
$modx->setPlaceholder('cleancontent',$html);
[[extractH1fromContent]] [[+cleancontent]] [[+h1.fullnode]]
What's the Story?
Bruno17 uses a regular expression to extract the H1 DOM node from the resource's content field, then sets placeholders with the resulting parts of the content. Once the snippet is called on the page, most likely in a template, then the placeholders become available. The [[+cleancontent]] placeholder will now contain the content without the H1 tag and its value, and the placeholder can be used in place of the usual [[*content]] tag. The [[+h1.fullnode]] placeholder has the H1 tag with its value, and the [[+h1.text]] placeholder has just the value from the H1 node.