Forums

Understanding getTotalBlocksInArea and how to customize for different screens

Permalink
I'm very new to CSS, Bootstrap, LESS and concrete5. I'm trying to change my header.php such that a search box is displayed inline with the Header Site Title when there is room, otherwise on its own row.

I tried to do this using the getTotalBlocksInArea, but that is always returning 1 (added a print to file to figure that out) so that isn't a checkable condition.

When is getTotalBlocksInArea useful? How does one arrange a display based on screen size?

Right now (before my attempt below), when the search is on the same level as the site title (which is an image), shrinking the screen causes the image to be resized down - undesirable, and the search to be cutoff - also undesirable.

Any help is appreciated! Below is my attempt to conditionally create a second row for the search:
<?php defined('C5_EXECUTE') or die("Access Denied.");
$this->inc('elements/header_top.php');
$as = new GlobalArea('Header Search');
$blocks = $as->getTotalBlocksInArea();
$displaySearchNewRow = $blocks < 2;
file_put_contents("test.heather",$blocks)
?>
<header>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-6 col-xs-6">
              <?php
                $a = new GlobalArea('Header Site Title');
                $a->display();
              ?>
Viewing 15 lines of 37 lines. View entire code block.
HeatherMyers
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi HeatherMyers,

Instead of file_put_contents(), an easier way to debug variables and functions is using var_dump().
From your example:
var_dump($as->getTotalBlocksInArea());

You will need to refresh the page to get the current getTotalBlocksInArea() value after changing the number of blocks. Without refreshing the page, the value will not change.

In general, arranging content based on screen size is done using CSS. The getTotalBlocksInArea() method can be used to conditionally add CSS classes.

It looks like you based your code on the header.php found in the Elemental theme. That header.php provides an example of how to conditionally assign classes (in this case, Bootstrap grid classes) based on getTotalBlocksInArea().

Conditional CSS classes example:
https://github.com/concrete5/concrete5/blob/develop/web/concrete/the...

In your code, there appear to be errors in Bootstrap class assignment and in the setup of the grid rows.

To better explain this and to provide a solution, do you have a mockup of what you are trying to create?
HeatherMyers replied on at Permalink Reply 4 Attachments
HeatherMyers
MrKDilkington,

You are correct that I am starting from a copy of the elemental theme. Perhaps I will revert back to that file and start again to understand how the blocks are coming into play..

Thank you for the var_dump suggestion, very useful!

I don't know how to show you a mockup, everything I'm doing is just local on the machine, not reachable outside the network. I have attached a couple images showing what I get to explain what is happening and what I want:

large - desktops, looks fine for the header title and search
iPad - this now looks fine with the column setup I've got.
iPhone6 - The image in the Header Title has been shrunk, the search is cutoff the screne. This is when I would like to have the second row, move the search to its own row to keep the image full size.
secondrow - The look on the iPhone6 when the search is on the second row. Still not happy that the image has been shrunk.

Thank you for any help you can offer,
Heather
MrKDilkington replied on at Permalink Best Answer Reply 5 Attachments
MrKDilkington
I tried to get your design to work using Bootstrap grid CSS only without success.

To work properly, and to match the description of what you want, it will require custom CSS.

I put together a working "outline" of how you can make the design work. This includes the CSS which is embedded into the page. To make it easier, I tried to use as much Bootstrap as possible.

I am attaching screenshots of the appearance at different breakpoints and the mobile navigation.

header.php
<?php defined('C5_EXECUTE') or die("Access Denied.");
$this->inc('elements/header_top.php');
?>
<style>
    div.ccm-page header .ccm-search-block-form {
        float: right;
    }
    div.ccm-page header nav ul {
        float: none;
        background: lightgray;
        padding: 5px;
    }
    div.ccm-page header nav ul li:last-child a {
        padding-right: 0px;
    }
Viewing 15 lines of 113 lines. View entire code block.

Since you are new to CSS, this site can help you learn more about layout:
http://learnlayout.com/
HeatherMyers replied on at Permalink Reply
HeatherMyers
MrKDilkington,

Thank you for the code. I will study it and try implementing it. I do appreciate the help. Thank you also for the link to the CSS tutorial. I do plan to start studying up on all of these topics.

I appreciate you taking the time to look at my issue.

Thanks again,
Heather
HeatherMyers replied on at Permalink Reply 3 Attachments
HeatherMyers
I reverted to the elemental header.php, added the var_dump line at the top, and update the webpage.

It seems I'm always getting a 1 printed to the screen, regardless of the size of the screen. Yet the "third column" condition is definitely activated.

I am hitting refresh each time... can you explain why I'm not seeing a different value?
MrKDilkington replied on at Permalink Reply
MrKDilkington
The size of the screen won't change the number of blocks in an area. The number 1 means there is 1 block in the area.

Example:
- go into Edit Mode and delete the Search block from the Header Search area, then refresh the page without saving or publishing, the number of blocks will be 0
- go into Edit Mode and add blocks to the Header Search area, then refresh the page without saving or publishing, the number of blocks will increase
HeatherMyers replied on at Permalink Reply
HeatherMyers
Ok, I understand now. The getTotalBlocksinArea returns how many "blocks" are assigned to a particular location. Makes perfect sense, I was just thinking about it wrong the entire time.

Thanks,
Heather