WebsiteBaker Support (2.12.x) > General Help & Support
looking for a userfriendly grid?
johnbroeckaert:
--- Quote ---In the link the 5.th screenshot shows at the end 2 lines.
One for overrule the classes and one for own classes. Thought this helps.
--- End quote ---
You are right, but then there is still the problem that the user cann't see the content directly.
John
Gast:
--- Quote from: johnbroeckaert on October 14, 2019, 04:57:44 PM ---@jacobi22
Your solution looks like the example @ruud has posted some years ago.
--- End quote ---
i dont know the solution from Ruud, but maybe, the same stuff, because, the solutions are limited
--- Quote from: johnbroeckaert on October 14, 2019, 04:57:44 PM ---The trouble with this kind of appraoche is the if then else. Normaly if you have for example a main and a right of main, it is not possible to have a full size and then again a left from main and a main. That is I don't see how :cry:
--- End quote ---
but why only two blocks and not (for example) 10?
in the actual test-template, i use 14 blocks, defined in info.php
1 - 3 are Main1, left, center and right - some conditions for php:
- default is 100% - if left, center or right is alone
- if center or right is not empty, show 66% + 33%
- if center and right is not empty, show 33% + 33% + 33%
- if left is empty and center has content, center is 66%, right has 33%
block4 is my anynews block, directly behind the main content
next is main2 - same conditions like main1 (block 5-7)
block8 is the teaser, show's every time in the top of all, doesn't matter, where you have it in the block overview
next row has two possibilitys, limited width or fullwidth, use it for content or leave it empty (block 9 or 10)
block11 and block12 has 50% if you use both blocks, otherwhise 100%
block13 is my BottomBlock, come's everytime behind the footer, is on the bottom of the page
block 14 is the footer content, you can use it for a mixed content with menus etc, i use it for my Footerblock-Module, is this case for a submenu for Bakery, for shop pages, a wysiwyg-block and a contactbox
all block together looks like this
Block administration:
johnbroeckaert:
Hi Uwe,
That are a lot of blocks :-D.
I am not a coder but manage to understand some php. The solution from @ruud is something like this:
above the head:
// get the grid
--- Code: --->?php
if (!defined('WB_PATH')) die(header('Location: ../../index.php'));
ob_start(); page_content(1); $content=ob_get_contents(); ob_end_clean(); // Main
ob_start(); page_content(2); $right=ob_get_contents(); ob_end_clean(); // Right from main
ob_start(); page_content(3); $left=ob_get_contents(); ob_end_clean(); // Left from main
ob_start(); page_content(4); $fulltop=ob_get_contents(); ob_end_clean(); // Full top of the page
ob_start(); page_content(5); $fullbottom=ob_get_contents(); ob_end_clean(); // Full bottom of the page
?>
--- End code ---
and to display the content:
--- Code: ---<div class="container content">
<?php if ($fulltop) {
echo '<br />'.$fulltop; } ?>
<div class="row">
<?php if ($content && $right && $left) { ?>
<div class="col-1"><div class="box"><?php echo $left ?></div></div>
<div class="col-1"><div class="box"><?php echo $content ?></div></div>
<div class="col-1"><div class="box"><?php echo $right ?></div></div>
<?php } elseif ($right) { ?>
<div class="col-2"><div class="box"><?php echo $content ?></div></div>
<div class="col-1"><div class="box"><?php echo $right ?></div></div>
<?php } elseif ($left) { ?>
<div class="col-1"><div class="box"><?php echo $left ?></div></div>
<div class="col-2"><div class="box"><?php echo $content ?></div></div>
<?php } else { ?>
<div class="col-3"><div class="box"><?php echo $content ?></div></div>
</div>
<?php } ?>
<?php if ($fullbottom) { ?>
<div class="col-4">
<?php echo $fullbottom ?>
</div>
<?php } ?>
<div class="row">
<div class="col-4 footer">
<?php page_footer(); ?>
</div>
</div>
--- End code ---
In the info.php
--- Code: ---$block[1] = 'Main';
$block[2] = 'Right from main';
$block[3] = 'Left from main';
$block[4] = 'Full Top';
$block[5] = 'Full Bottom';
$block[99] = 'nothing to display';
--- End code ---
Do i have to insert a new row in every if then else if i should use your defenition?
How does that effect the speed of the site, because it's a lot of coding then.....
John
Gast:
--- Quote from: johnbroeckaert on October 15, 2019, 11:19:52 AM ---That are a lot of blocks
--- End quote ---
i add some more last night, total now: 16 :-D
maybe it looks like a chaos, but what i need, is flexibility - the possibility, to have a line with 50% to 50%, or three in a row. But if i dont need it, i can work also with one single block - and everything without to work in the Code - the switch is the select-box in section-administration.
--- Quote from: johnbroeckaert on October 15, 2019, 11:19:52 AM ---The solution from @ruud is something like this
--- End quote ---
i think, it need one condition more. Whats happend, if the user select no main content, if he select only Left && Right? :wink:
The Rest of the code is from the base nearly the same like my code
--- Quote from: johnbroeckaert on October 15, 2019, 11:19:52 AM ---How does that effect the speed of the site, because it's a lot of coding then.
--- End quote ---
in this time's, when we use Fullwide-Pictures with 400 kb, background-image-sliders with 4 pics a 280kb and inline-videos, i dont think about some bytes for a condition.
i'm sure, that i never use all blocks together on a single page and if one condition is not true, the script goes to the next step.
Or in example: if this condition is true
--- Code: ---<?php if ($content && $right && $left) { ?>
--- End code ---
the script will not read the followed elseif and else - it goes to the next condition like
--- Code: ---<?php if ($fullbottom) { ?>
--- End code ---
and dont forget - we talk about some miliseconds - not from seconds or minutes :wink:
--- Quote ---Do i have to insert a new row in every if then else if i should use your defenition?
--- End quote ---
#1 - the original code goes shorter - spend some bytes :wink:
--- Code: ---ob_start(); page_content(1); $content=ob_get_contents(); ob_end_clean(); // Main
--- End code ---
shorter version
--- Code: ---ob_start();page_content(1);$content = ob_get_clean();
--- End code ---
#2 - is Content empty or not?
the code from your example show's a defined block, doesn't matter, what you have inside as content. That means: if you add 3 blocks, main content, left && right, but Left is empty (you'll add it later) - it will show an empty Block, it show only a whitespace - in worst case, you've a block with 33% in the middle, but empty block's a 33% left and right
the secret: the script say: read the content and define a variable with this content. And if you have a defined right block (but empty at the moment), the condition is true, but the variable is empty, has only a whitespace inside. And in this case, the condition (if ($fulltop)) is true and the script has to display the html-code for this.
Better solution:
ask for the content and check, is it empty or not. Example from my code:
--- Code: ---<?php if(trim($page_Teaser)!=''){ ?>
--- End code ---
trim() remove the whitespaces at the begin and at the end and in the case of a empty block, it show's nothing like "not defined", because, the condition is not true
#3 if you need more blocks, you need more conditions
Take every Mainblock as a row in the page. For example: the code from the top use 3 row's, the FullTop, the Main-Content, the FullFooter. And: you can split the Main-Content into 3 Parts (Left, Center, Right)
In my solution, i can use some row's more (if i want) and i can switch the design of the rows, fullwidth, Normalwidth, 50/50, 33/66 or 66/33
I'm sure, my code to read the page_content_Blocks is longer then the whole script in your post, but thats the price, if you want to have a solution for every case.
to give an answer to your question:
--- Quote ---Do i have to insert a new row in every if then else if i should use your defenition?
--- End quote ---
Yes.
Only as Example:
#1 think about your template. What is the best solution for you and for this case (this project)? Is it okay, that you have only one row with maybe 1, 2 or 3 Blocks inside or is it important, to have more?
#2 think about all the pages in the project, not only one. In the most cases, the startpage has more content and the most differents in the styling. the example code has "only" 3 possible variants, 1 block = 100%, 2 blocks = 66%/33% or two blocks = 33%/66%
The problem: if you want now another fullwidth-block, it will add this content to the existed block, the only working solution is a new block, so that you come out from this row and go into the next one. And then, you have to know, what you want. For me, it was not good, to have the same schema from row#1 (3 blocks a 33%) also in the next row, so i add here a fullwidth-block. But then, i think, its better to have here a switch, fullwidth over the whole desktop or a limited width with 960 Pixel, so i add two new blocks for this instead of only one, you can copy the code from the Fulltop or Fullbottom and rename it.
In the next step, i think, maybe, its good, to have another possibility, to add here a row with 33%-Blocks, so i make a copy of the maincontent-block and another one with 50/50
my teaserblock is the same like ruud's FullTop, and my BottomBlock the same like FullBottom in the Code. My AnynewsBlock is part of this template since the begin, so i leave it there, it doesn't matter now :wink:
And that's all - the "secret" is a good overview, a good description in the block names and "self-speaking Variable-Names" like $half_leftBlock or $half_rightBlock.
In my case, all my customers have no experience with HTML and maybe, they are schocked, if they see the selectbox in the section administration, but it's simple to understand and it's not possible, to make errors there - it show's the content in every case and will not destroy the rest, if you choose the wrong block. if the user want, he can try all possible blocks and look for the best solution.
Important for me is also, to stay in the responsive structure and this goes only with a grid system. it doesn't matter, what system you have at the end, bootstrab, flexbox or w3css, it makes no differents in a browser. it's only the personal experience, your experience...
in my case, i'm not sure about some possible conflicts, if i mix bootstrab with the w3css from form, news or the galleries
At last point.... everything has also a bad side - in my case: the backernd overview. For the example here, i work with wysiwyg's only and i have now a list with 14 WysiwygBlocks. You have to look very carefull and you have to use the section title. A wysiwyg section is very small in the height, so no problem. but if i use here also other modules like news, Form, Folder- or DownloadGallery, it's a long way down to the bottom :-D
johnbroeckaert:
many thanks for this extensive explanation!
Navigation
[0] Message Index
[*] Previous page
Go to full version