Hiding "Parent Markup Region Markup"

[SwimToWin]

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

[virtualgadjo]

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

[millipedia]

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>

 

[virtualgadjo]

@millipedia oh yes you're right, there are so many options, replace, append, optional that i often forget to quote all of them (and even sometimes to use... too much of a php by myself guy ? )

have a nice day

[szabesz]

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

 

[Pixrael]

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>

[SwimToWin]

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?

[SwimToWin]

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

[virtualgadjo]

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