We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Answered Snippet/Output Modifier get the value of H1 tag and and output to placeholder

    • 37914
    • 89 Posts
    mdehaan Reply #1, 9 years, 3 months ago
    I'm looking for a Snippet/Output Modifier to:

    1. Get the value of a H1 tag from the [[*content]]
    2. Remove the H1 tag including its value
    3. 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]].

    Any help would be much appreciated.

    This question has been answered by Bruno17. See the first response.

    • sottwell Reply #2, 9 years, 3 months ago
      You could use a plugin to parse the content and get the <h1> DOM element and its content, providing there is only one H1 tag in the content. Then you could set the value of a placeholder with it.

      To be honest, I don't see how this is going to work well. What, exactly, are you doing? If you need a dynamic value, use a TV. That's what they are for.
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 37914
        • 89 Posts
        mdehaan Reply #3, 9 years, 3 months ago
        Quote from: sottwell at Jan 06, 2015, 09:53 AM
        You could use a plugin to parse the content and get the <h1> DOM element and its content, providing there is only one H1 tag in the content. Then you could set the value of a placeholder with it.

        To be honest, I don't see how this is going to work well. What, exactly, are you doing? If you need a dynamic value, use a TV. That's what they are for.</h1>

        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 problem is with the frontend.
        Sometimes we want to have the H1 tag inside an other DIV than the one the other page content is in.

        I know it would be much easier to use a TV for this, but would this be a bad idea or hard to achieve?
          • 4172
          • 5,888 Posts
          Bruno17 Reply #4, 9 years, 3 months ago
          some start-points for a snippet:

          http://kaspars.net/blog/web-development/regex-extract-headings-h1-h2-h3-from-html

          and search for 'strip_selected_tags'
          here:
          http://php.net/manual/de/function.strip-tags.php
            -------------------------------

            you can buy me a beer, if you like MIGX

            http://webcmsolutions.de/migx.html

            Thanks!
            • 43810
            • 62 Posts
            viener Reply #5, 9 years, 3 months ago
            Quote from: Bruno17 at Jan 06, 2015, 10:08 AM
            and search for 'strip_selected_tags'
            here:
            http://php.net/manual/de/function.strip-tags.php

            There are Revolution input and output filters:

            http://rtfm.modx.com/revolution/2.x/making-sites-with-modx/customizing-content/input-and-output-filters-(output-modifiers)

            [[+code:strip_tags=``]] - Removes HTML tags from the input. Optionally accepts a value to indicate which tags to allow. Similar to PHP's strip_tags.
              • 37914
              • 89 Posts
              mdehaan Reply #6, 9 years, 3 months ago
              Hi All, Thanx for the fast replies!!

              Quote from: viener at Jan 06, 2015, 10:08 AM
              Quote from: mdehaan at Jan 06, 2015, 09:46 AM
              I'm looking for a Snippet/Output Modifier to:

              1. Get the value of a H1 tag from the [[*content]]
              2. Remove the H1 tag including its value
              3. 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]].

              Any help would be much appreciated.

              >>Get the value of a H1 tag from the [[*content]]

              - Does it have to be exactly [[*content]] or it may be [[$content]] (a chunk)?

              >>Remove the H1 tag including its value

              - Remove and place in its place what? Just leave an empty space?
              - Removes who/what: an end user, a script?

              Yes, exactly [[*content]].
              Just remove and replace with nothing.

              The best way I can imagine this would work would be like an output filter.
                • 37914
                • 89 Posts
                mdehaan Reply #7, 9 years, 3 months ago
                Quote from: Bruno17 at Jan 06, 2015, 10:08 AM
                some start-points for a snippet:

                http://kaspars.net/blog/web-development/regex-extract-headings-h1-h2-h3-from-html

                and search for 'strip_selected_tags'
                here:
                http://php.net/manual/de/function.strip-tags.php

                I'll look into that and try with my very limited PHP knowledge smiley
                  • 37914
                  • 89 Posts
                  mdehaan Reply #8, 9 years, 3 months ago
                  It would be something like this snippet http://modx.com/extras/package/getimagesfromhtml
                  • discuss.answer
                    • 4172
                    • 5,888 Posts
                    Bruno17 Reply #9, 9 years, 3 months ago
                    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]]
                      -------------------------------

                      you can buy me a beer, if you like MIGX

                      http://webcmsolutions.de/migx.html

                      Thanks!
                      • 43810
                      • 62 Posts
                      viener Reply #10, 9 years, 3 months ago
                      Quote from: mdehaan at Jan 06, 2015, 10:04 AM
                      Quote from: sottwell at Jan 06, 2015, 09:53 AM
                      You could use a plugin to parse the content and get the <h1> DOM element and its content, providing there is only one H1 tag in the content. Then you could set the value of a placeholder with it.

                      To be honest, I don't see how this is going to work well. What, exactly, are you doing? If you need a dynamic value, use a TV. That's what they are for.</h1>

                      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 problem is with the frontend.
                      Sometimes we want to have the H1 tag inside an other DIV than the one the other page content is in.

                      I know it would be much easier to use a TV for this, but would this be a bad idea or hard to achieve?

                      >>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.

                      - Here you wish the "visible" page title (not the <title></title> content) to be set in WYSIWYG editor. And so to be a part of [[*content]]?

                      What do you mean then by "Remove the H1 tag including its value"? If the user types in the text into the editor field and then sets it to be the H1 header - then the same user may remove it or change it into a paragraph or else.

                      >>Sometimes we want to have the H1 tag inside an other DIV than the one the other page content is in.

                      - The I would do it something like this (I am more into Evolution, so the example is in the Evolution style):

                      1) Create a TV (and assign it to the corresponding template):

                      Name: h1
                      Input Type: Check box
                      Input Option Values: Add H1=={{h1-content}}

                      Put [*h1*] in its place in a template (or in a chunk of a template)

                      2) Create another TV (and assign it to the corresponding template):

                      Name: h1-content-tv
                      Input Type: Text

                      3) Create a chunk

                      Name: h1-content
                      Chunk code: <h1>[*h1-content-tv*]</h1>

                      - So, there are two TV fields below editor on each page with a given template. The user enters a text into the "h1-content" field and checks it at "Add a H1" to have this H1 title displayed in its place on a page.