simone960's picture

Posted by simone960 on Wed, Jan 17, 2018 - 9:58pm

I wonder how to create new layout where some of it's regions like header and footer are able to inherit from the default layout.

Every time when I create a new layout I have a full set of regions and blocks to manage which is great. However, some regions like HEADER and FOOTER are pretty the same across all layouts. The inconvenience is that after creating several different layouts, if I start making changes to the header region of the default layout, e.g adding a search box to the header region, then I have to make the same update to the rest of the layouts . Even if I were to add a css class to the footer block for instance, I will still have to go through all the layouts again and add that class to the rest. So, I'm trying to find a way to reduce the redundancy across the layouts for some regions that are always consistent and remain the same. Any thoughts ?

Accepted answer

You could also try my Copy Blocks module. Dont know how robust it is though, havent used it.

Most helpful answers

@herb ! You can try Copy

@herb ! You can try Copy Blocks module developed by @docwilmot. It works for me. You may want to use the block's "Style" as "Dynamic", remove the "Wrapper tag" and "Content tag" for extra wrappers to maintain the consistency across the layouts. Good luck!

@simone960 what you are

@ what you are asking about has been a common request. We're envisioning something like mini-layouts (similar to the mini-panels module in Drupal) to first come to life in contrib, and then later become a candidate for core inclusion! 

Comments

simone960's picture

Sun, Jan 21, 2018 - 3:48pm by simone960

@herb ! You can try Copy Blocks module developed by @docwilmot. It works for me. You may want to use the block's "Style" as "Dynamic", remove the "Wrapper tag" and "Content tag" for extra wrappers to maintain the consistency across the layouts. Good luck!

Fri, Jan 19, 2018 - 3:51am by amilenkov

It seems to me that what you're looking for is redundant. Adding search box to the header region is correctly done by adding a search block (or any system or custom block) to this layout (from the administrative interface of Backdrop), not by editing the layout code.

"Even if I were to add a CSS class to the footer block for instance" - do you mean really footer block or you mean a footer region?

If you mean footer block - when you add custom block you can add a custom CSS class to it (from the administrative interface of Backdrop).

If you mean footer region (in layout code) - once you have decided to make custom layout and take the time and effort for it is a negligible small effort to add a layout specific CSS class to the footer region or (better) to the whole layout wrapper element.

See this example from the boxton layout:

<body class="page front has-flexbox" _adv_already_used="true">

    <div class="layout--boxton layout">

Using (.layout--boxton .other-class or HTML element) you can create layout specific CSS rules to every element on the page.

 

 

simone960's picture

Sun, Jan 21, 2018 - 3:20pm by simone960

Thanks for sharing your thoughts @amilenkov! I actually mean creating layouts, adding blocks and CSS classes everything done via the administrative interface you mentioned (Structure > Layouts) instead of writing a custom layout by code. I'm not that PRO !

"Even if I were to add a CSS class to the footer block for instance" - do you mean really footer block or you mean a footer region?

If you mean footer block - when you add custom block you can add a custom CSS class to it (from the administrative interface of Backdrop).

The footer block here I'm referring to is actually the block added to the footer region, e.g. "Powered by Backdrop". Yep, I added the custom CSS class via the admin interface also. 

To clarify further, let say I have created 2 or 3 more new layouts (e.g Layout A, Layout B and Layout C) via administrative interface. And now I start to add a search block to the header region in Layout A. You will notice this search block will not exist in the header region of Layout B and C. Same also with the CSS class I added in Layout A will not be displayed in Layout B and C. That's mean you need to repeat the same thing across other layouts and this is redundant. 

 

Sat, Jan 20, 2018 - 6:08am by docwilmot

You could also try my Copy Blocks module. Dont know how robust it is though, havent used it.

simone960's picture

Sun, Jan 21, 2018 - 3:21pm by simone960

Awesome !!! This module works great in this scenario. Great thanks @docwilmot !

 

Sat, Jan 20, 2018 - 6:56am by amilenkov

It is also possible to use software like Dreamewaver to create, edit and manage layout files.

If you save a layout file (locally in Dreamewaver configured site) as a template you create editable regions in that template. Example of editable region in template file:

<!-- TemplateBeginEditable name="header" -->   <header id="header" role="banner">   <?php print $content['header']; ?> </header>   <!-- TemplateEndEditable -->

After that you can create now layouts based on this template. In these new layouts you can edit only editable regions. By editing template you can change with one action all layouts that are based on this template. Example of editable region from layout based on this template:

<?php if ($content['header']): ?>   <!-- InstanceBeginEditable name="header" -->   <header id="header" role="banner">   <?php print $content['header']; ?> </header>   <!-- InstanceEndEditable -->   <?php endif; ?>

When you are ready, you upload all layouts on the live site.

Dreamewaver is expensive commercial software but may be folks here that are more experienced than me can post info for other free tools that have similar template functionality.

https://helpx.adobe.com/dreamweaver/using/dreamweaver-templates.html

simone960's picture

Sun, Jan 21, 2018 - 3:21pm by simone960

Thanks for the good tips! Dreamewaver is indeed a good tool for creating multiple layouts with codes from a single template. It really helps to update multiple layouts at once and reduce redundancy as you well pointed out. I will surely apply this technique you taught when creating custom layouts with Dreamweaver one day. Thanks for sharing !

drop's picture

Sat, Jan 20, 2018 - 2:05pm by drop

@ what you are asking about has been a common request. We're envisioning something like mini-layouts (similar to the mini-panels module in Drupal) to first come to life in contrib, and then later become a candidate for core inclusion! 

simone960's picture

Sun, Jan 21, 2018 - 3:20pm by simone960

Great ! I think this mini-layouts going to be an ultimate solution in this scenario. Will this available in contrib soon ? Any link to this request or discussion in the GitHub that we can follow and subscribe ?  

Sun, Jan 21, 2018 - 4:13pm by herb

Layout inheritance is not the same as copying blocks. I see it as being able to keep certain blocks in sync. Changes in one will let automatically update the other blocks of the same machine name.

simone960's picture

Wed, Jan 24, 2018 - 2:26am by simone960

So, I'm trying to find a way to reduce the redundancy across the layouts for some regions that are always consistent and remain the same. 

Indeed @herb, but it does serve the purpose of keeping some regions in consistency though it's not exactly the layout inheritance I'm talking about. I need some practical and applicable approaches to be able to work and to use it now. Copy Blocks module does solve the issue at the moment and it's pretty easy to use.