The Panels admin screen let's you select "Display the blocks according to a grid" with a choice of two layout options. Is it possible to define more of these?
Well, no, not really, or should I say, not at this time. First of all, for most forums, it doesn't make sense to use anything for the left and right panel other than the default vertical layout. In most cases, there just isn't enough real estate to do that though I suppose that if you didn't use the right panel, and setup a wider left panel with one of the grids, you could also use the upper and lower panel with a grid as well. If you did something like that, and used the first grid option for both, you could have up to 6 columns, 3 for the left panel grid and 3 for the upper/lower grid. If you combined these with the right panel and used the same grid with it, you could come up with some pretty creative though funky layouts and, of course, with too many columns, you need to be cognizant of what the screen resolutions being used by your members are so as to avoid having horizontal scrollbars come into play.
So, out of curiosity, what other grid options would you add if you were the Tinyportal developer?
I agree for the side panels. This question primarily relates to the front panel; the main CMS content page.
What I wanted was something like this:
+------------------------------------------------------+
| |
| |
+------------------------------------------------------+
+---------------+ +----------------+ +-----------------+
| | | | | |
| | | | | |
| | | | +-----------------+
| | | | +-----------------+
| | | | | |
| | | | | |
+---------------+ +----------------+ +-----------------+
but more generally, it would be neat to be able to specify our own layouts. Maybe similarly to the way HTML defines tables using Rows and Cols values at the layout level and then Row, Col, RowSpan and ColSpan values to describe each block.
I see what you are trying to do but I can think of several ways to accomplish the layout you specified with the existing code though it wouldn't be as easy as you imagine. A few things could probably be done with the code to make it easier though. For instance, if we were to make forcing the height and width of blocks a function of block settings instead of panel settings, that might help.
Maybe Bloc would care to comment on this.
Quote from: Wheelspin on November 29, 2014, 02:06:20 AM
I agree for the side panels. This question primarily relates to the front panel; the main CMS content page.
What I wanted was something like this:
+------------------------------------------------------+
| |
| |
+------------------------------------------------------+
+---------------+ +----------------+ +-----------------+
| | | | | |
| | | | | |
| | | | +-----------------+
| | | | +-----------------+
| | | | | |
| | | | | |
+---------------+ +----------------+ +-----------------+
but more generally, it would be neat to be able to specify our own layouts. Maybe similarly to the way HTML defines tables using Rows and Cols values at the layout level and then Row, Col, RowSpan and ColSpan values to describe each block.
There isn't a "language" in TP to specify what you need.
When you look at your layout..if those containers are single blocks, you could just as well use top,left,front and right blocks, where in the right panel you have shorter height on the blocks. Forcing a height being the same(and twice the height of rightblocks) on left and frontblocks would create it.
But its not a good idea to limit it like that, a webpage should flow with any width(thus the height must be fluid, to let the content flow down when needed), so pressing a set height will eventually show errors/scrollbars on certain widths.
But, if you are willing to try new things 8) there is a way to code in more "grids". I never got around to it, because the interest seem very little for even using whats there now, the 2 options.
Open Sources TPortal.php and find:
// set the grid type
if($flow == 'grid')
{
$grid_selected=$context['TPortal']['blockgrid_' . $side];
if($grid_selected == 'colspan3')
$grid_recycle = 4;
elseif($grid_selected == 'rowspan1')
$grid_recycle = 5;
$grid_entry = 0;
// fetch the grids..
TP_blockgrids();
add to it:
// set the grid type
if($flow == 'grid')
{
$grid_selected=$context['TPortal']['blockgrid_' . $side];
if($grid_selected == 'colspan3')
$grid_recycle = 4;
elseif($grid_selected == 'rowspan1')
$grid_recycle = 5;
elseif($grid_selected == 'mygrid')
$grid_recycle = 6;
$grid_entry = 0;
// fetch the grids..
TP_blockgrids();
The locate this:
function TP_blockgrids()
{
global $context;
$context['TPortal']['grid'] = array();
$context['TPortal']['grid']['colspan3'][0] = array('before' => '<tr><td valign="top" colspan="3" style="padding-bottom: 5px;">', 'after' => '</td></tr>');
$context['TPortal']['grid']['colspan3'][1] = array('before' => '<td width="33%" valign="top" style="padding-right: 5px;padding-bottom: 5px;">', 'after' => '</td>');
$context['TPortal']['grid']['colspan3'][2] = array('before' => '<td width="33%" valign="top" style="padding-right: 5px;padding-bottom: 5px;">', 'after' => '</td>');
$context['TPortal']['grid']['colspan3'][3] = array('before' => '<td width="33%" valign="top" style="padding-bottom: 5px;">', 'after' => '</td></tr>');
$context['TPortal']['grid']['rowspan1'][0] = array('before' => '<tr><td width="33%" valign="top" rowspan="2" style="padding-right: 5px; padding-bottom: 5px;">', 'after' => '</td>', 'doubleheight' => true);
$context['TPortal']['grid']['rowspan1'][1] = array('before' => '<td width="33%" valign="top" style="padding-right: 5px;padding-bottom: 5px;">', 'after' => '</td>');
$context['TPortal']['grid']['rowspan1'][2] = array('before' => '<td width="33%" valign="top" style="padding-bottom: 5px;">', 'after' => '</td></tr>');
$context['TPortal']['grid']['rowspan1'][3] = array('before' => '<tr><td width="33%" valign="top" style="padding-right: 5px;padding-bottom: 5px;">', 'after' => '</td>');
$context['TPortal']['grid']['rowspan1'][4] = array('before' => '<td width="33%" valign="top" style="padding-bottom: 5px;">', 'after' => '</td></tr>');
}
Add to it like this:
function TP_blockgrids()
{
global $context;
$context['TPortal']['grid'] = array();
$context['TPortal']['grid']['colspan3'][0] = array('before' => '<tr><td valign="top" colspan="3" style="padding-bottom: 5px;">', 'after' => '</td></tr>');
$context['TPortal']['grid']['colspan3'][1] = array('before' => '<td width="33%" valign="top" style="padding-right: 5px;padding-bottom: 5px;">', 'after' => '</td>');
$context['TPortal']['grid']['colspan3'][2] = array('before' => '<td width="33%" valign="top" style="padding-right: 5px;padding-bottom: 5px;">', 'after' => '</td>');
$context['TPortal']['grid']['colspan3'][3] = array('before' => '<td width="33%" valign="top" style="padding-bottom: 5px;">', 'after' => '</td></tr>');
$context['TPortal']['grid']['rowspan1'][0] = array('before' => '<tr><td width="33%" valign="top" rowspan="2" style="padding-right: 5px; padding-bottom: 5px;">', 'after' => '</td>', 'doubleheight' => true);
$context['TPortal']['grid']['rowspan1'][1] = array('before' => '<td width="33%" valign="top" style="padding-right: 5px;padding-bottom: 5px;">', 'after' => '</td>');
$context['TPortal']['grid']['rowspan1'][2] = array('before' => '<td width="33%" valign="top" style="padding-bottom: 5px;">', 'after' => '</td></tr>');
$context['TPortal']['grid']['rowspan1'][3] = array('before' => '<tr><td width="33%" valign="top" style="padding-right: 5px;padding-bottom: 5px;">', 'after' => '</td>');
$context['TPortal']['grid']['rowspan1'][4] = array('before' => '<td width="33%" valign="top" style="padding-bottom: 5px;">', 'after' => '</td></tr>');
$context['TPortal']['grid']['mygrid'][0] = array('before' => '<tr><td width="33%" valign="top" rowspan="2" style="padding-right: 5px; padding-bottom: 5px;">', 'after' => '</td>', 'doubleheight' => true);
$context['TPortal']['grid']['mygrid'][1] = array('before' => '<td width="33%" valign="top" style="padding-right: 5px;padding-bottom: 5px;">', 'after' => '</td>');.......
...........
.......
}
You have to work out what to add in those, but if you are used to td and tr it should not be so hard. :) And then you have it, a extra grid option. Remember that the 0,1,2 etc. are the order in which blocks are placed in the grid, they will just fill up until none left. So in the builtin ones you have 4 and 5 blocks before the grid "restarts". Thats the "recycle" variable further up, the one I put a "6" into.
Quote from: bloc on November 29, 2014, 10:42:57 PM
When you look at your layout..if those containers are single blocks, you could just as well use top,left,front and right blocks, where in the right panel you have shorter height on the blocks. Forcing a height being the same(and twice the height of rightblocks) on left and frontblocks would create it.
Just to clarify, the layout I diagrammed was for the front panel. I already have left, top and right panels defined.
Quote from: bloc on November 29, 2014, 10:58:10 PM
But, if you are willing to try new things 8) there is a way to code in more "grids". I never got around to it, because the interest seem very little for even using whats there now, the 2 options.
...
You have to work out what to add in those, but if you are used to td and tr it should not be so hard. :) And then you have it, a extra grid option. Remember that the 0,1,2 etc. are the order in which blocks are placed in the grid, they will just fill up until none left. So in the builtin ones you have 4 and 5 blocks before the grid "restarts". Thats the "recycle" variable further up, the one I put a "6" into.
Thanks for that; it shouldn't be too hard to work out from your examples.