Jump to content

Understanding markup region and possibly looking for alternatives


joe_g
 Share

Recommended Posts

Hi there, I just discovered markup regions while looking for some templating solution.

I've got a couple of layouts that are shared across a bunch of regular PW templates, and I'm looking for a way to abstract this, so that i don't need to have the same code duplicated across multiple places.

I would like to keep the HTML "direct", so rather

<div class="<?=$somePhp?>">

than, say

echo "<div class=\'{$somePhp\}">

I think that rules out all regular delayed output strategies.

Markup regions seemed perfect on the first look, but there are some limitations, if I understand it right

1. There is only one global markup region file (ie. _main). I can't use an arbitrary template file for some specific situation (like _myArticleLayout, for example)
2. I cant inherit templates, or chain, or stack them, or similar. I can't apply first _main, and then another one _article, for example
3. Related to this, I can only do appendTemplateFile globally in config.php, but I was hoping I can do this in the top of each template, or maybe even for parts of templates
 

Now, some questions. Is there a better way to do this? Another templating engine? Is there a way I can use the magnificent markup region replacement engine myself, separately? Or did I simply misunderstood how this works? As a sidenote it seems I can't get nested regions to work, perhaps because I'm not using this the intended way?

many thanks

  • Like 1
Link to comment
Share on other sites

@joe_g

Quote

1. There is only one global markup region file (ie. _main). I can't use an arbitrary template file for some specific situation (like _myArticleLayout, for example)

No, you can specify this for each template if you want to. Edit a template and see the "files" tab. Or you could just use your _main.php as a controller that loads different layout files depending on some field value or condition that you determine. 

Quote

2. I cant inherit templates, or chain, or stack them, or similar. I can't apply first _main, and then another one _article, for example

Sure you can. Use PHP include(), $files->include() or $files->render() with whatever files or order you want. Regions can be replaced, appended, prepended, removed, etc. as many times as they are output. 

Quote

3. Related to this, I can only do appendTemplateFile globally in config.php, but I was hoping I can do this in the top of each template, or maybe even for parts of templates

You can do it individually for templates, see my response for #1. Though I usually structure my templates in a way that the _main.php is the "base" that's generic enough to not have ever needed to define alternate files. 

Quote

Now, some questions. Is there a better way to do this?

I think markup regions are the best way myself. Once you start using them a lot, I suspect you'll find you don't want to use anything else. That's been my experience at least. 

Quote

As a sidenote it seems I can't get nested regions to work, perhaps because I'm not using this the intended way?

I don't know exactly what you mean by nested regions. You'd have to provide more details on what you are doing before we could say if you are using something in an intended way or not. 

  • Like 5
Link to comment
Share on other sites

Thanks for getting back about this!

Here is a test (using tailwind css).

_main.php (global)

<body>
    <div id="maincontent">
    </div>
</body>


_testregion.php (appended to template 'test' under files tab)

<div id="testregion" class="border border-red-600">
    default value from _testregion.php
</div>


test.php (actual PW template) - note the nested divs, how testregion is inside maincontent.

<div id='maincontent'>
    <div class="p-8">
        <div id="testregion">
            should be inside red border?
        </div>
    </div>
</div>

What I'm trying to do is to apply my own "markup pattern" called testregion to an arbitrary position, but it doesn't do what I expect. Instead of getting "Should be inside red border" inside the red boder, i get _testregion.php appended after the output of _main.php. The result looks like this:

image.png.3c0dcc293d14f65d97bbb5a8d2731a8e.png

However, it does work if I specify the innermost region in test.php, like

        <div id="testregion">
            should be inside red border?
        </div>

That means i can't match arbitrary regions that are inside each other, it would always have to be the innermost region(s)? This means that the site structure (the markup hierarchy) has to be entirely defined inside _main and I can never specify some markup that is simultaneously a parent and child. Maybe this is a good thing, I'm not sure. But this is what got me before.

 

  • Like 1
Link to comment
Share on other sites

@joe_g

Quote

UPDATE - I shouldn't specify maincontent, this template should simply look like this - then all is well

That's right, it doesn't look like there's any reason to provide #maincontent for your situation. When populating markup regions, specify just the region you want to replace, append, prepend, or delete; not a structure of markup regions. Though you did have that case above where you were trying to a direct child to it: <div class="p-8"> outside of your _main.php, so in that case you would, or you could do a <div class="p-8" pw-append="maincontent">...</div> or <div id="maincontent"><div class="p-8">...</div></div>. 

I recommend adding <!--PW-REGION-DEBUG--> somewhere in your _main.php markup (like at the bottom), and that'll be automatically replaced with some markup that tells you everything your Markup Regions are doing and when it can't find where to place something, etc. Most of my sites have something like this below, and it's handy to look at when you aren't sure why something isn't working, etc. 

<?php if($config->debug && $user->name === 'ryan'):
  <div class"uk-container uk-margin">
    <!--PW-REGION-DEBUG-->
  </div>
<?php endif; ?>

Another tip is that if you ever find Markup Regions are having trouble finding the closing tag for some specific element, you can tell it specially by marking it with a hint comment <!--#maincontent-->. Though I also just find it visually helpful, so I tend to do it whether for markup regions or not. 

<div id="maincontent">
   ...
</div><!--#maincontent-->

 

  • Like 1
Link to comment
Share on other sites

Thanks!, I edited my post above while you responded. In the mean time I've realized that my misunderstanding is that I can't replace parent regions, then the child regions will be destroyed.

Like, I can't have this and update both foo and bar directly using replacement

<div id="region1">
    foo
    <div id="region2">
        bar
    </div>
</div>

i would have to do

<div id="region1">
    <div id="region1inner">
        foo
    </div>
    <div id="region2">
        bar
    </div>
</div>

However, as you suggest, I can add to the parent like (using the code from my previous post)

<div id="maincontent" pw-append>
    added this to main
</div>
<div id="testregion">
    replaced
</div>

..as long as i don't replace the whole parent. This makes sense, since I suppose this is some form of string replace behind the scenes

awesome, and thanks again Ryan!

J

Link to comment
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
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...