Social > Team Blogs

Blocks In Blocks

(1/18) > >>

[SiNaN]:
I have been meaning to make a blog post about how to display blocks in blocks with SimplePortal for some time but never got to it. Seeing as we just got a request for it (here), I thought I would clarify it. Are we going to add such a feature in future SimplePortal versions? Nope, certainly not, never gonna happen.

Because it's already there! Actually it has been there since version 2.0.4. In case the idea is not clear for you, have a look at this sample page here:

http://simpleportal.net/index.php?page=blocks_in_block_sample

You'll see that there are 5 blocks in total, 4 of them embedded in a single block. This is quite easy to do with SimplePortal.

First: Create the blocks you want inside the other block. Be sure the box labelled Active is not checked. This will prevent the block from being displayed anywhere else on your site.

Second: find out the ids of the blocks you just created. You can find them by looking at the link to edit the block:

httx://someforum.com/index.php?action=admin;area=portalblocks;sa=edit;block_id=2;{session_var}={session_id}

What you need is the value of block_id (here it's 2). In the example below, I'll be using 49, 50, 52, 53 as the ids of blocks.

Third: create a Custom PHP block that does just what SimplePortal normally does with blocks. Here's a sample:


--- Code: ---$block = current(getBlockInfo(false, 49, false, false));  // Load block info
$block['style'] = sportal_parse_style('explode', $block['style'], true);  //Parse block style parameters.
template_block($block); // Output the block.
--- End code ---

Line 1 loads the block with getBlockInfo(). Line 2 parses the block style. Line 3 finally uses that information to write it all out as HTML.

If you are putting more than one block inside your custom PHP block, you can use a table to control how they are arranged. So you can display blocks 49, 50, 52, and 53 in a custom php block like this:


--- Code: ---$columns = 2;
$block_ids = array(49, 50, 52, 53);

$block_data = array();
foreach ($block_ids as $block)
{
   $block_data[$block] = current(getBlockInfo(false, $block, false, false));
   $block_data[$block]['style'] = sportal_parse_style('explode', $block_data[$block]['style'], true);
}

echo '
<table style="width: 100%;">
   <tr>';

$counter = 0;
foreach ($block_data as $data)
{
   if ($counter != 0 && $counter % $columns == 0)
   {
      echo '
   </tr>
   <tr>';
   }

   echo '
      <td style="width: ', ceil((100 / $columns)), '%; vertical-align: top;">
         ', template_block($data), '
      </td>';

   $counter++;
}

echo '
   </tr>
</table>';
--- End code ---

You can even call the block functions, without the block template, using the proper parameters. And with some JavaScript, you can have pretty blocks like this:

http://simpleportal.net/index.php?page=blocks_in_block_sample#sp_collapse_54


--- Code: ---global $txt;

$txt['recent_topics'] = 'Recent Topics';
$txt['recent_posts'] = 'Recent Posts';

$buttons = array(
   'recent_topics' => array(
      'text' => 'recent_topics',
      'image' => '',
      'lang' => true,
      'url' => '#recent_topics" id="b_rt" onclick="change_display(\'rp\'); return false;',
      'active' => true,
   ),
   'recent_posts' => array(
      'text' => 'recent_posts',
      'image' => '',
      'lang' => true,
      'url' => '#recent_posts" id="b_rp" onclick="change_display(\'rt\'); return false;',
   ),
);

echo '
<div style="overflow: auto;">
   ', template_button_strip($buttons), '
</div>
<div id="recent_topics">
   ', sp_recent(array('type' => 1, 'display' => 1), 0), '
</div>
<div id="recent_posts" style="display: none;">
   ', sp_recent(array('display' => 1), 0), '
</div>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
   function change_display(block)
   {
      var current = block == \'rt\' ? 1 : 0;

      document.getElementById(\'recent_topics\').style.display = current ? \'none\' : \'\';
      document.getElementById(\'recent_posts\').style.display = current ? \'\' : \'none\';
      document.getElementById(\'b_rt\').className = current ? \'button_strip_recent_topics\' : \'button_strip_recent_topics active\';
      document.getElementById(\'b_rp\').className = current ? \'button_strip_recent_posts active\' : \'button_strip_recent_posts\';
   }
// ]]></script>';
--- End code ---

So this is what I call "power of simplicity". I hope this gave a brief idea about how flexible and powerful SimplePortal is. If you have any questions, feel free to ask. ;)


There is also an alternative easier way explained here:

http://simpleportal.net/index.php?topic=5332.msg37841#msg37841

Edit: Fixed a minor issue with last block code.
Edit: disabled link to **** site

AngelinaBelle:
Wow! Before I read this, I had not figured out how the blocks got called and wrapped in their formatting wrappers.
 
I had already seen a SimplePortal user calling a block on the fly (http://simpleportal.net/index.php?topic=5195.msg31460#msg31460) to put it in the page footer, LOL.
 
If the block already exists, though, this can be even easier.

MultiformeIngegno:
Great "tutorial"!! Thanks Sinan!!

Nas:
That's quite cool, Sinan. :)

lakechurch:
Very nice tutorial, works great, thanks!

Navigation

[0] Message Index

[#] Next page