Footer

[stpaultim]

• Decide if we want to keep nice menus.

Here is what the original Zeever has:

I've partially implemented a footer. But, so far it only has 3 columns and it's using mini-layouts. I'm not sure that mini-layouts in the best solution.

[stpaultim]

Currently using "Nice Menus" for this. Not sure if this is the best solution?

[Egmund]

What am I overlooking? I can not find anyplace to edit the mini-layout. The instructions to the right does not 'add up'.

Otherwise: Really impressive project, but might be overwhelming for newcomers.

[stpaultim]

@Egmund Thanks so much for this feedback. It's nice to know that others are looking at and/or experimenting with this project. It's also nice to know what kind of problems/confusion you are experiencing.

I've been debating whether or not Mini layouts is the best solution for the footer. I had concerns that folks unfamiliar with Mini layouts would experience the confusion that you are reporting. Editing mini-layouts is not very intuitive and I may petition the maintainer of Mini layouts to see if there is something we can do to make it easier.

To edit a mini-layout, you have to:

1. In the admin menu, go to Structure.
2. Under Structure, look for Mini layouts.
3. In the list of Mini layouts, look for the Mini layout named Footer.
4. Manage blocks

I understand that this is confusing.

I choose Mini layouts for the footer, because I needed some way to create three columns in the footer. None of the default layouts have more than one column in the footer. The two most obvious solutions for me were:

1. Place a Mini layout in the footer with 3 columns.
2. Plase 3 existing content blocks in the footer and then include CSS in the Digital Agency recipe to style them as a 3 column grid.

Neither of these seem like the ideal solution. I will see if we can find some way to make Mini layouts easier to use, within this recipe or possibily consider the other option. I welcome other ideas.

[Egmund]

Ah, yes. And I wonder how I overlooked this.
This, three or four blocks in footer, is common. I would think creating a layout with 'split' footer would 'do the trick'. I also thought this could be created with a view - I will experiment.
Another 'issue': The pictures in 'faq' and 'info' block have a tendency to disappear. I fixed it by downloading and re-inserting the pictures, but they should not disappear. This happens when editing the CSS file for instance it seems.

[Egmund]

Update:
With some 'stealing' and 'hacking' I have been able to create/duplicate the content of footer mini-layout without using mini-layout.
From 'Geary' i have stolen the middle section and added it to the footer in (a duplicate of) 'Sutro' with new labels:

  <?php if ($content['footer']): ?>
    <footer class="l-footer">
      <div class="l-footer-inner container container-fluid">
          <div class="l-middle l-thirds row">
        <div class="l-thirds-region col-md-4">
          <?php print $content['footer1']; ?>
        </div>
        <div class="l-thirds-region col-md-4">
          <?php print $content['footer2']; ?>
        </div>
        <div class="l-thirds-region col-md-4">
          <?php print $content['footer3']; ?>
        </div>
      </div><!-- /.l-middle -->
        <?php print $content['footer']; ?>
      </div>
    </footer>

Of course these three regions were added to the Sutro info.
I had to hack the layout--sutro--front.tpl adding the same regions.
I added some code in the CSS file: do duplicate the formatting:

.l-footer .l-thirds-region {
    line-height: 1.7;
}

.l-footer .l-thirds-region ul.nice-menu {
    margin-top: 20px;
    border-top: none;
}

.l-thirds-region ul.nice-menu li {
    border: none;
    background: rgba(0,0,0,0);
}

.l-thirds-region ul.nice-menu li a {
    padding: 0.3em 5px 0.3em 5px;
}

I made the 'Social Media' block reusable as well.
It looks identical to footer with mini-layouts.
Any thoughts?

[Egmund]

Getting the hang of it:
The duplicate 'Sutro' is now a 'new' layout called 'Sutro2'. Now I just have to figure out how to submit it 'officially' for others to use.
Maybe - as well as creating a new template for this recipe - also create a new layout (based on my 'hacks')

[stpaultim]

It looks identical to footer with mini-layouts.
Any thoughts?

Yes, creating an alternative layout would be one possible solution. But, my goal is that someone is able to create this site by ONLY downloading two items. 1) The Digital Agency Recipe Package AND 2) any theme that supports it.

I would love for everything to be included as a dependency of one or the other of these items. At the moment, it's not possible to include a dependency on a contrib layout template in either a module or a theme. This leaves me looking for a solution that does not involve adding a new layout template file.

However, this does give me an idea. A theme or a module can override an existing layout template file. So, I could hack one the existing core templates to place 3 or 4 columns in the footer. The main downside to this solution is that I'm changing a core layout template in unexpected and potentially confusing ways for folks who might not understand what is going on. The hack would only be in effect as long as the recipe is enabled (and any theme could override my hack).

I can try to mitigate this with documentation in the Readme file, but it's still a hack.

I think I'm going to try it. I'm also going to try and push for a change to core that will allow me to make a contrib layout template file a dependency in a recipe. Than I could just create a custom layout template for this recipe, release it in contrib, and make it a dependency.

backdrop/backdrop-issues#6593

[stpaultim]

The duplicate 'Sutro' is now a 'new' layout called 'Sutro2'. Now I just have to figure out how to submit it 'officially' for others to use.

@Egmund Are you a member of the Backdrop CMS Contrib group on Github? That is the only requirement to share your Layout Template file in the contrib space.

https://github.com/backdrop-ops/contrib

[Egmund]

I will look into becoming a contrib member.
But first I would have to polish up my project.

[Egmund]

The wordpress theme uses flexbox in the footer. I have played a little with it (flex-box)and have duplicated the version in mini-layouts. That was fairly simple, but this probably would be complicated to incorporate in Digital Agency. Maybe another sub-receip.
In flexbox any number of columns can be set up.

[Egmund]

I have duplicated the footer mini-layout with a custom block (raw html) containing the following. Also needed was to add the footer-region css with copy ot footer mini-layout css:

<div style= "display: flex; flex-wrap: wrap;  justify-content: space-between">
  <div style="width: 30%; margin: 10px; ">
     <div class="header-identity-wrapper">
       <div class="header-site-name-wrapper">
                    <a href="/" title="Home" class="header-site-name-link" rel="home">
                                      <strong>My Digital Agency</strong>
                      </a>
        </div>
      </div>
  </div>

  <div style="width: 30%; margin: 10px;> <div class="block block-nice-menus-1 contextual-links-region">

    <div class="contextual-links-wrapper"><ul class="contextual-links"><li class="simple-menus-list odd first"><a href="/admin/structure/menu/manage/main-menu/list?destination=home">Edit links</a></li><li class="simple-menus-add even last"><a href="/admin/structure/menu/manage/main-menu/add?destination=home">Add link</a></li></ul>
    </div>
    <div class="block-content">
    <ul class="nice-menu nice-menu-right nice-menu-main-menu" id="nice-menu-1"><li class="menu-355 menu-path-front first odd "><a href="/" class="active" aria-current="page">Home</a></li>
<li class="menu-393 menu-path-faq  even "><a href="/faq">FAQ</a></li>
<li class="menu-384 menu-path-services  odd "><a href="/services">Services</a></li>
<li class="menu-405 menu-path-node-27  even "><a href="/new-about">About</a></li>
<li class="menu-394 menu-path-portfolio-projects  odd "><a href="/portfolio-projects">Projects</a></li>
<li class="menu-357 menu-path-node-6  even last"><a href="/contact-us">Contact Us</a></li>
</ul>
    </div>
  </div>
  <div style="width: 30%;"><div class="block-content">
    <p>
    Edit these footer blocks in
    * structure &gt; mini layouts &gt; footer block.
    </p>
  </div>
  </div>  
</div>

With a 'width' of 'auto' or another percentage other count of columns could be set up.
I am not sure this would be easier for potential users, but a possibility.

[Egmund]

The duplicate 'Sutro' is now a 'new' layout called 'Sutro2'. Now I just have to figure out how to submit it 'officially' for others to use.

@Egmund Are you a member of the Backdrop CMS Contrib group on Github? That is the only requirement to share your Layout Template file in the contrib space.

https://github.com/backdrop-ops/contrib

I have tried to be accepted now twice. Maybe it is a long/slow process - more than a month.
For now I am putting the layouts up in my own github space.

[stpaultim]

I have tried to be accepted now twice. Maybe it is a long/slow process - more than a month.

I am sorry about this. It is usually not this long. Sometimes its very quick. Let me see if we can get this taken care of for you now.

@Egmund Can you respond to the questions that @herbdool asked?
backdrop-ops/contrib#838

[Egmund]

Just in case they can be pulled in as dependencies - my layouts with 3 columns in top footer are now publicly available - a bundle with clones of all core layouts.