Pixrael

More About Markup Regions: A Mixed Proposal

Recommended Posts

As a graphic designer I like the new options to output markup with the templates (region function and regions markup strategy) but testing them I think they could adapt a little more for ease of use. In this proposal I modify the syntax and the way of assigning the values, while I try to maintain the concept.

Next the common example, in "_main.php"

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--[pw headseo]-->
        <!--[/pw]-->

        <!--[pw headstyles]-->
        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">
        <!--[/pw]-->

        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
        <!--[pw headscripts]-->
        <!--[/pw]-->
    </head>
    <body>
        <!--[pw header]-->
        <h1><?php echo $page->title(); ?></h1>
        <!--[/pw]-->
        
        <!--[pw body]-->
        <?php echo $page->body(); ?>
        <!--[/pw]-->
        
        <!--[pw footer]-->
        <!--[/pw]-->

        <!--[pw footerscripts]-->
        <script src="js/jquery.min.js"></script>
        <!--[/pw]-->
    </body>
</html>

then in the template file "home.php"

<!--[pw headstyles+]-->
<link rel="stylesheet" href="css/home.css">
<style>
    body {
        padding-top: 50px;
        padding-bottom: 20px;
    }
</style>
<!--[/pw]-->

<!--[pw head+]-->
<h2><?php echo $page->headline(); ?></h2>
<!--[/pw]-->

<!--[pw footer]-->
<h3>About Homepage</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur dignissim nisi nec consequat.</p>
<!--[/pw]-->

Well I'm not a programmer, I hope you understand the above. But the idea is:

  • Using html comments for regions definition, this is a standard in html, and not interfere with the DOM or with the page structure, allowing using it in document areas that are not visual. The current option basically is to use DIV but this is not correct in areas like the head tag.
  • Using the open/close tag system allow the use of IDE features for html as auto-completion, code coloring, code validation, visual previews and more. Allowing populate the initial values for regions without variables concatenation and with the previous advantage (auto-completion, code coloring, etc)
  • The pages can be render without additional Ids and class, maybe useful for debugging and can be cleaned in production with something like $config->cleanRegions = true;

It can support the current prepend, append, before, after etc regions strategy, I think its a mix of the current Region Markup. As I said I am not programmer but I think it can be implemented using Output Buffering ob_start (); ob_end_clean (); capturing the code between open/close comments tag and assigning them to the corresponding region ... If someone likes and have time to analyze and improve this idea, are welcome because I don't know how to implementing it .. sorry :-) 

  • Like 1

Share this post


Link to post
Share on other sites
5 hours ago, Pixrael said:

Using html comments for regions definition, this is a standard in html, and not interfere with the DOM or with the page structure, allowing using it in document areas that are not visual. The current option basically is to use DIV but this is not correct in areas like the head tag.

I think @ryan is unlikely to switch from region attributes in tags to a different system where regions are defined using HTML comments, considering that the Markup Regions feature is already published and currently being used in its existing form.

But I do agree with your request to support a region tag that is stripped out of the final output. As you noted, that would be particularly useful for defining multiple regions inside the <head> element.

There is a GitHub feature request that covers some of this stuff: https://github.com/processwire/processwire-requests/issues/78

  • Like 1

Share this post


Link to post
Share on other sites
8 hours ago, Robin S said:

But I do agree with your request to support a region tag that is stripped out of the final output.

+1 for this :) Personally I'm not a fan of turning comments into interpreted code. It is hacky and can be hard to read when you have other comments for actual note taking purposes. But maybe it's just me who feels this way :)

Share this post


Link to post
Share on other sites

I do not see the problem of using comments, especially during production. I usually use comments to identify parts of my code in the nesting nature of the DOM tree, in a format similar to:

<! -- here start the header - ->

<! -- end of the header - ->

I only propose a nomenclature to be able to easily identify the regions using a parsing code. Not in conflict with other comments used in the code.

Share this post


Link to post
Share on other sites

Continuing with the idea, to include some functionality of the current implementation:

Having in _main.php

<!---[pw foo]-->
<p>Lorem ipsum dolor sit amet</p>
<!---[/pw]-->

in template files to replace

<!---[pw foo]-->
<h2>Curabitur nec odio et elit iaculis posuere. Aenean finibus felis justo, vel porttitor tortor malesuada et.</h2>
<!---[/pw]-->

Output

<h2>Curabitur nec odio et elit iaculis posuere. Aenean finibus felis justo, vel porttitor tortor malesuada et.</h2>

in template files to prepend

<!---[pw +foo]-->
<h1>consectetur adipiscing elit</h1>
<!---[/pw]-->

Output

<h1>consectetur adipiscing elit</h1>
<p>Lorem ipsum dolor sit amet</p>

in template files to append

<!---[pw foo+]-->
<ul>
  <li>Proin iaculis feugiat tortor</li>
  <li>Vestibulum vestibulum ultricies semper</li>
</ul>
<!---[/pw]-->

Output

<p>Lorem ipsum dolor sit amet</p>
<ul>
  <li>Proin iaculis feugiat tortor</li>
  <li>Vestibulum vestibulum ultricies semper</li>
</ul>

in template files to inherit

<!---[pw foo]-->
<h1>consectetur adipiscing elit</h1>
<!---[pw ++]-->
<ul>
  <li>Proin iaculis feugiat tortor</li>
  <li>Vestibulum vestibulum ultricies semper</li>
</ul>
<!---[/pw]-->

Ouput

<h1>consectetur adipiscing elit</h1>
<p>Lorem ipsum dolor sit amet</p>
<ul>
  <li>Proin iaculis feugiat tortor</li>
  <li>Vestibulum vestibulum ultricies semper</li>
</ul>

in template files to remove

<!---[pw foo]-->
<!---[/pw]-->

And finally if the region is not declared in the template file, output the initial content.

Share this post


Link to post
Share on other sites

One has to parse those comments blocks out of the html, recursively, identify/skip real comments, follow inheritance tree, protect against vuln xss foo etc... The parsing is currently done in WireMarkupRegions.php which has a lot hardcoded and html specific stuff, so it's hard to wrap around.

If you really want this syntax, you should stick with an existing template engine like twig or mustache and replace the template tags with your custom comment-tag. Also consider FileCompilerModule...

I personally use plates...

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for your comments, I also reviewed how Ryan implemented it, from there come my idea. I currently use a Latte Engine Module, but for 90% of the web pages my clients need is too much of the view/controller model, it's a lot of work for simple things. That's why I like what Ryan did, but I need regions that be more versatile in defining where to place it in the document, that not use the classes/ids directly and be less complicated in terms of the number of directives and tags variants. Just do it simple. An illustration example: https://processwire.com/talk/topic/15582-markup-regionsidea-for-another-placement-attribute/

  • Like 2

Share this post


Link to post
Share on other sites

I do not mention it but part of my idea is because I use a lot of the code completion of my IDE, it makes me work faster and with less errors, so I hate the concatenation of variables when I write a mix of html tags with php Code .. yes I'm lazy but I love it O0

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Mike Rockett
         
      Docs & Download: rockettpw/markup-sitemap
      Modules Directory: MarkupSitemap
      MarkupSitemap is essentially an upgrade to MarkupSitemapXML by Pete. It adds multi-language support using the built-in LanguageSupportPageNames. Where multi-language pages are available, they are added to the sitemap by means of an alternate link in that page's <url>. Support for listing images in the sitemap on a page-by-page basis and using a sitemap stylesheet are also added.
      Example when using the built-in multi-language profile:
      <url> <loc>http://domain.local/about/</loc> <lastmod>2017-08-27T16:16:32+02:00</lastmod> <xhtml:link rel="alternate" hreflang="en" href="http://domain.local/en/about/"/> <xhtml:link rel="alternate" hreflang="de" href="http://domain.local/de/uber/"/> <xhtml:link rel="alternate" hreflang="fi" href="http://domain.local/fi/tietoja/"/> </url> It also uses a locally maintained fork of a sitemap package by Matthew Davies that assists in automating the process.
      The doesn't use the same sitemap_ignore field available in MarkupSitemapXML. Rather, it renders sitemap options fields in a Page's Settings tab. One of the fields is for excluding a Page from the sitemap, and another is for excluding its children. You can assign which templates get these config fields in the module's configuration (much like you would with MarkupSEO).
      Note that the two exclusion options are mutually exclusive at this point as there may be cases where you don't want to show a parent page, but only its children. Whilst unorthodox, I'm leaving the flexibility there. (The home page cannot be excluded from the sitemap, so the applicable exclusion fields won't be available there.)
      Sitemap also allows you to include images for each page at the template level, and you can disable image output at the page level.
      The module allows you to set the priority on a per-page basis (it's optional and will not be included if not set).
      Lastly, a stylesheet option has also been added. You can use the default one (enabled by default), or set your own.
      Note that if the module is uninstalled, any saved data on a per-page basis is removed. The same thing happens for a specific page when it is deleted after having been trashed.
          
    • By fabjeck
      Hi all, I am new to PW and building up a website for a customer and have some problems with structuring my project:
      On my main.php file I have a main-tag where I wan't to echo the region called 'content'. But the problem is that the markup inside this wrapper should be variable.Example: I have a page where all the news previews are outputed  like in a normal news app--> no additional markup is needed. But on "home" I want to have different sections with content -->
       
      <section>     <div class="slider">         <!--here i want to have some filtered news articles-->     </div> </section> <section> <div class="news">         <!--here i want to have some news articles but with another filter-->     </div> </section>

      How can I realise that? It has to be like that for responsive purposes. 
      Is it maybe possible to create and echo regions inside the "parent region"?

      Cheers and thank you for your help
       
    • By mr-fan
      Just working on some smaller projects and take the step into the actual master/dev version and all the new methods and api chunks that are coming with the 3.x series...
      since i'm not always build websites i'm not always go with the brand new things and put them in my workflow....there is a 24 per day timelimit i think...;)
      BUT actual i dive deep in markup regions....and holy shit this feature ROCKS!
      It should put in place better than in some blogposts:
      http://processwire.com/blog/posts/processwire-3.0.49-introduces-a-new-template-file-strategy/
      http://processwire.com/blog/posts/processwire-3.0.62-and-more-on-markup-regions/
      or can some admins make a headline in the official docs and link to the blogentries??
      This feature is to important to get missed for beginners and other users of PW!
      I'm just kick my whole workflow and change it for the markup regions....i'm feeling like xmas in summer Thank you @ryan
      Best regards and happy "new" year....
    • By MilenKo
      Hello. I am working on a culinary web project where I am aiming at listing all recipes with a pagination after reaching the recipe limit. As far as I already did the pagination on another project, I was quite happy to use the code and see it in action. However, my joy was not lasting long as far as the present pagination HTML code differs from the other and I was scratching my head today for several hours and yet no solution to precisely match the styling.
      I was able to apply the pagination, show the prev/next and numbers properly, however the active class is not applied properly and the design has the prev/next arrows at the both ends of the recipe block (image attached).
      Here is the pagination original html code:
      <!-- Pagination --> <div class="sixteen columns"> <div class="pagination-container"> <nav class="pagination"> <ul> <li><a href="#" class="current-page">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </nav> <nav class="pagination-next-prev"> <ul> <li><a href="#" class="prev"></a></li> <li><a href="#" class="next"></a></li> </ul> </nav> </div> </div> And here is my pagination code (after making sure that the template pagination is enabled):
      <div class="sixteen columns"> <div class="pagination-container"> <?php echo $result->renderPager(array( "nextItemLabel" => __(">>"), "previousItemLabel" => __("<<"), "currentItemClass" => "current-page", 'listMarkup' => "<nav class='pagination'><ul>{out}</ul></nav>", 'itemMarkup' => "<li>{out}</li>", 'linkMarkup' => "<a href='{url}'>{out}</a>" )); ?> <nav class="pagination-next-prev"> <ul> <li><a href="#" class="prev"></a></li> <li><a href="#" class="next"></a></li> </ul> </nav> </div> </div> As far as the pagination active class is not applied on the <li> but on the <a href... > I tried to change the linkMarkup to: 'linkMarkup' => "<a href='{url}' class='{class}'>{out}</a>" however that shows that the {class} is not applied with linkMarkup but with itemMarkup. Tried to add the class to itemMarkup too, but the same result is showing.
      For sure the navigation is not an issue if it is next to the numbers, however I wanted to attempt to match fully the style and learn how can I move the prev and next pointers away from there or in other words to match the original theme.
      So any ideas how to achieve the proper functionality and obtain the previous/next page links? I read so many tutorials and manuals today mentioning to use prev() and next() but in my case the results are not coming from $page and the next page pointed to the next page in my admin but not the next results page.

    • By Pixrael
      The recent introduction of the Markup Regions has caused some excitement in our community, mainly for the simplicity of the proposal to output our markup, but for the various opinions about how to select and modify the regions, maybe it should not be the definitive solution. Perhaps the most correct option is to think this output strategy in the "Processwire style". Something open and versatile.
      The solution could be: Have the layouts files (main.php) as our "Markup Database" and then with the templates files (home.php) we can do "CRUD operations" on it before the output, using for that a jquery/processwire like API. This could be a powerful way like the current excellent API solution to manipulate the data.
      Where $markup come from the layout file "_main.php", in our templates files we'll can do:
      <?php $markup->find('#sidebar').prepend(' ?> <div class="foobarcontainer"> <h3>Hello <?php echo $page->foo ?></h3> <p><?php echo $page->bar ?></p> </div> <?php '); ?> <?php if ($hidecomments) $markup->find('.comment').addclass('close'); ?> <?php $markup->find('#sidebar .contact ul').remove(); ?> Etc. Think about the possibilities, it will no longer be necessary to define regions, the regions are any part of the document
      It's just an idea, maybe is a really hard to-do solution, but will be perfect for the Processwire ecosystem as the direct-delayed output workflow. In GitHub already are several php libraries for select DOM elements using any css selector in a jquery like style.