Markup Regions - add class without replacing content

adrian · September 28, 2017

Hi everyone,

I thought I'd experiment with markup regions on a small project, but I've come up against a stumbling block pretty quickly. I am trying to use the ability to add a class to an existing element - in this case I want to add a "bgimage" class to the <body> on the homepage. The problem is that by defining:

<body id='html-body' class='bgimage'></body>

in my home.php file, this replaces everything from the body defined in _main.php which an empty <body></body> which I guess is expected, but not very helpful if all you want to do is add a class to an existing element without changing its content.

Is there anyone out there who has used these enough to know if I am missing an option, or whether this just isn't possible?

Thanks!

abdus · September 28, 2017

Unfortunately append / prepend operations do not modify region attributes. Only replace does. I'd love to have that feature too

rafaoski · September 28, 2017

@adrian Maybe such a simple way:

<body id='html-body' class='<?=$page->name == 'home' ? 'bgimage' : 'custom-class';?>'>
  // OR
 <body id='html-body' class='<?=$page->name;?>'>

adrian · September 28, 2017

Thanks @rafaoski - definitely lots of options along those lines and certainly something I have done in the past with other output strategies. I guess I just thought the Markup Regions should have this ability built-in given that it seems to be all about preventing the need for this kind of conditional logic. Not sure Markup Regions are going to become a regular thing for me - I usually prefer the simpler approach to things that has the most flexibility in the end, rather than relying on something "magic" that needs hacking at some point along the way. I am continuing with it for the moment, because it is also my first introduction to UiKit (working the new Regular site profile as a starting point), and it's a simple site, so shouldn't be too much of a problem.

abdus · September 28, 2017

Yeah, it's how I've been doing it until I met markup regions, and still have to do it so on some occasions. But building segments in HTML and seeing it magically get injected into your layout without touching anything is indisposable. As you're not working inside strings, syntax highlight and intellisense of IDEs are available too. Now having tasted the convenience, I dont want to go back to having template logic in my HTML (except ifs and loops). Markup regions feature is like a template engine but in a pure php. I refrain from tainting it, so to speak.

adrian · September 28, 2017

Thanks @abdus - I'll press on with them for this project - it's worth giving them a thorough trial.

Robin S · September 28, 2017

Adding classes with pw-append / pw-prepend is working for me...

<body id='html-body' class='bgimage' pw-append></body>

abdus · September 28, 2017

I'm sure you'll enjoy it.

For more complex markups that require lots of logic, I use wireRenderFile but return value instead of echoing, so it acts like a function with in its own file.

Another thing I've recently started doing is that removing all templating logic out of template files and using it as controllers instead. For different views I create a file under templates/views/<templatename>.php and it gets appended after the template file automatically (with the hook below). This means inside the template file there's only the logic left.

wire()->addHookBefore('PageRender::renderPage', function (HookEvent $e) {
    /** @var Page $page */
    /** @var HookEvent $event */
    /** @var Template $template */
    $event = $e->arguments(0);
    $options = $event->arguments(0);
    $page = $event->object;
    $template = $page->template;

    // do not overwrite previous appends prepends
    $options['prependFiles'] = array_merge($options['prependFiles'], [
        "{$template}.routes.php",
        "_common.php",
    ]);
    $options['appendFiles'] = array_merge($options['appendFiles'], [
        "views/{$template}.php",
        "_after.php",
        "_main.php",
    ]);
    $event->setArgument(0, $options);
});

abdus · September 28, 2017

1 minute ago, Robin S said:
Adding classes with pw-append / pw-prepend is working for me...
<body id='html-body' class='bgimage' pw-append></body>

Hmm so we can use both id and pw- attributes? Interesting..

Pixrael · September 28, 2017

you can try this:

<body pw-append='html-body' class='bgimage'></body>

and leave empty the DIV maybe should add only the class

abdus · September 28, 2017

From the core:

 * Modifying attributes on an existing element
 * 
 *   <div id='main' class='bar' pw-prepend><p>This prepends #main and adds "bar" class to main</p></div>
 *   <div id='main' class='foo' pw-append><p>This appends #main and adds a "foo" class to #main</p></div>
 *   <div id='main' title='hello' pw-append>Appends #main with this text + adds title attribute to #main</div>
 *   <div id='main' class='-baz' pw-append>Appends #main with this text + removes class “baz” from #main</div>
 *

-class feature looks interesting too

Pixrael · September 28, 2017

https://processwire.com/blog/posts/processwire-3.0.62-and-more-on-markup-regions/#actions-for-populating-regions

adrian · September 28, 2017

6 minutes ago, Robin S said:
Adding classes with pw-append / pw-prepend is working for me...
<body id='html-body' class='bgimage' pw-append></body>

Nice - I tried a couple of ideas with "prepend", but didn't see anything in the main blog post (http://processwire.com/blog/posts/processwire-3.0.62-and-more-on-markup-regions/) about using it like that. That does seem to work just fine - thanks!

adrian · September 28, 2017

6 minutes ago, Pixrael said:
that is the only think I miss in Markup Region.. an option for "inherit"... but you can try this:
<body pw-append='html-body' class='bgimage'></body>
and leave empty the DIV maybe should add only the class

This actually doesn't seem to work for me and the prepend version of this

<body pw-prepend='html-body' class='bgimage'></body>

results in:

<body id='html-body'><body class="bgimage">

Robin S · September 28, 2017

5 minutes ago, abdus said:

Hmm so we can use both id and pw- attributes? Interesting..

Yeah, I think this was in an earlier version of the regions spec and I just got used to using it (so always identifying the region you are modifying with the id attribute, and then adding pw-append / pw-prepend separately when needed). But I see now that it isn't mentioned in the most recent description of the spec. So maybe a bug/oversight that this functionality isn't working with pw-append="some-id".

The main bug to watch out for though is this one: https://github.com/processwire/processwire-issues/issues/302
I really hope that it gets fixed sometime soon.

abdus · September 28, 2017

<body pw-prepend='html-body' class='bgimage'></body>

Both id and pw-prepend/append attibutes be present for it to work

<div id='main' class='bar' pw-prepend><p>

Pixrael · September 28, 2017

5 minutes ago, abdus said:
<body pw-prepend='html-body' class='bgimage'></body>
pw-prepend must be a separate attribute for it to work

As I understand based on documentation should do the same

<div id="foo" pw-prepend> = <div pw-prepend="foo">

Sign In

Markup Regions - add class without replacing content

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members