Jump to content

Hiding "Parent Markup Region Markup"


SwimToWin
 Share

Recommended Posts

I use these Markup Regions and Bulma CSS Framework in _main.php:

<section class="section">
    <div class="container">
        <div id="content1" class="content"></div>
    </div>
</section>

<section class="section">
    <div class="container is-fluid">
        <div id="content2"></div>
    </div>
</section>

<section class="section">
    <div class="container">
        <div id="content3" class="content"></div>
    </div>
</section>

I want to specify HTML tags required by a CSS framework - and it shall be output only when the Markup Region produces an output. I want the full SECTION to be hidden in case the region doesn't output - because if the SECTION tags are output then it will affect the layout in unintended ways.

So my question is, how can I hide SECTION tags when the region doesn't produce an output?

To me, the challenge here is that Bulma requires a layout structure before Content 1-3 are output (specifically, the SECTION and DIV.container tags) - and it seems this pattern is always output by Markup Regions - which is causing the mentioned issues.

Feel free to suggest alternative ways to work with Markup Regions and Bulma (or other CSS frameworks).

Link to comment
Share on other sites

hi,

two simple ways to do this

- i assume your sections are inside a id="mainwrapper" (just for the example, use the id you linke πŸ™‚ ) div
in your page specific templates you can just use the sections you need, done...

- the other way is to simply put every section inside a php if

<?php if ( $page->content3 != '' ): ?>
<section class="content3">
  ...
</section>
<?php endif; ?>
  
  

done πŸ™‚

have a nice day

Link to comment
Share on other sites

There's also the pw-optional parameter for your Markup Regions:

https://processwire.com/docs/front-end/output/markup-regions/#defining-an-optional-region

You'd need to use an id on your section tag rather than the content div you have at the moment but that would remove the section if it was empty.

<section id="section2" class="section" pw-optional>
    <div class="container is-fluid">
        <div id="content2"></div>
    </div>
</section>

Β 

  • Like 1
Link to comment
Share on other sites

3 hours ago, virtualgadjo said:

there are so many options, replace, append, optional that i often forget to quote all of them

Me too :) That's why I wrote this "cheat sheet" for myself and shared it just in case others find it useful too:

https://processwire.com/talk/topic/23641-markup-regions-pw-vs-data-pw-different-behavior/#comment-201538

Β 

  • Like 2
Link to comment
Share on other sites

5 hours ago, millipedia said:
<section id="section2" class="section" pw-optional>
    <div class="container is-fluid">
        <div id="content2"></div>
    </div>
</section>

I think in this case PW will generate all that code because the element in the "optional" section is not actually empty. For the region definition, I always use the pw-region tag (placeholder region) instead of the html tags, because the pw-region tags are always removed from the final output. I would do the following:

in _main.php

<pw-region id="section2"></pw-region>

in templatefile.php

<pw-region id="section2">
<?php if($content1): ?>  
<section class="section">
    <div class="container is-fluid">
        <div id="content2">
          <?php echo $content1; ?>
      	</div>
    </div>
</section>
<?php endif; ?>  
</pw-region>

.. But there are many ways to do this .. thanks to Ryan πŸ™‚ ..for pw-optional option should be like this in the template file:

<section id="section2" class="section" pw-optional>
<?php if($content1): ?>  
    <div class="container is-fluid">
        <div id="content2">
	<?php echo $content1; ?>
      	</div>
    </div>
<?php endif; ?>
</section>
Link to comment
Share on other sites

21 hours ago, virtualgadjo said:
<?php if ( $page->content3 != '' ): ?>
<section class="content3">
  ...
</section>
<?php endif; ?>
  
  

Β 

`<?php var_dump($page->content3); ?>` outputs NULL. It seems $page->content3 isn't populated?

Link to comment
Share on other sites

19 hours ago, millipedia said:

There's also the pw-optional parameter for your Markup Regions:

https://processwire.com/docs/front-end/output/markup-regions/#defining-an-optional-region

You'd need to use an id on your section tag rather than the content div you have at the moment but that would remove the section if it was empty.

<section id="section2" class="section" pw-optional>
    <div class="container is-fluid">
        <div id="content2"></div>
    </div>
</section>

Β 

When I use the suggested solution, then I loose the default markup from main.php. How might I keep the default markup from main.php

Link to comment
Share on other sites

Hi,

of course

if ($page->content3 != '') // this only checks if the field has content but assumes it exists

supposes that there is a field named content3 in the page, if it's possible that not then an explicit

if (isset($page->content3) && $page->content3 != '') //verbose version πŸ™‚

that's one of the reason why when using markup regions for a website that have very different pages i often use the probably common sections in the _main.php file and a mainwrapper... wrapping the various fields that are more page specific in the page templates
this allows my _main.php to have a little less logics and be a little more readable πŸ™‚

have a nice day

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

Γ—
Γ—
  • Create New...