Dynamic Width Joomla Positions in a Template


<?php

// THIS IS A BASIC MODIFICATION OF BLANK TEMPLATE TO SUPPORT AUTOMATIC, CUSTOM OR BOOTSTRAPPED DYNAMIC WIDTHS FOR MODULE POSITIONS
// WORKS IN ANY TEMPLATE :)
// SAY GOOD BYE TO FIXED WIDTH IN MODULE POSITIONS

defined('_JEXEC') or die;
include_once JPATH_THEMES . '/' . $this->template . '/logic.php';

?>
<!doctype html>
<html lang="<?php
echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="apple-touch-icon-precomposed" href="<?php
echo $tpath; ?>/images/apple-touch-icon-57x57-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php
echo $tpath; ?>/images/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php
echo $tpath; ?>/images/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php
echo $tpath; ?>/images/apple-touch-icon-144x144-precomposed.png">
</head>
<body class="<?php
echo (($menu->getActive() == $menu->getDefault()) ? ('front') : ('site')) . ' ' . $active->alias . ' ' . $pageclass; ?>">
<?php

function positions($position, $style)
    {

    // Default width - for one column
    // This gets new value, if there is more than one active position
    // For Bootstrap use

    $width = 'col-md-12';

    // For Custom width use
    // $width = "100";
    // Number of positions, which have modules

    $countOfActivePositions = 0;

    // Positions to search modules in
    // Loop over every position

    $totalWidth = 0;
    foreach($position as $name => $value)
        {

        // If position has modules

        if (JFactory::getDocument()->countModules($name))
            {

            // Increase active positions count

            $countOfActivePositions++;
            $totalWidth = $totalWidth + $value;
            }
        }

    if ($countOfActivePositions > 1)
        {

        // For Bootstrap with equal widths use
        // $width = "col-md-".(12 / $countOfActivePositions);
        // For Custom with equal widths use
        // $width = (100 / $countOfActivePositions);

        }

    foreach($position as $name => $value)
        {
        if ($value > 0)
            {
            $width = $value;
            }

        if ($totalWidth < 100)
            {

            // For Bootstrap remove/comment the $width bellow
            // For custom with equal widths add/uncomment the $width bellow
            // For custom with proporcional widths add/uncomment the $width bellow
            // $width=$value*100/$totalWidth;
            // For Bootstrap with proporcional widths add/uncomment the $width bellow
            // For Bootstrap with equal widths add/uncomment the $width bellow

            $width = 'col-md-' . round($value * 12 / $totalWidth);
            }

        /**

         // For Bootstrap with proporcional widths remove/comment the IF bellow
         // For Custom with with more then 1 position add/uncomment the IF bellow

         if (($value > 0) and ($countOfActivaPositions == 2) and (count($position) > 2))
         {
         $width = 100 / 2;
         }

         // For Bootstrap with proporcional widths remove/comment the IF bellow
         // For Custom with with more then 1 position add/uncomment the IF bellow

         if (($value > 0) and ($countOfActivePositions == 3) and (count($position) > 3))
         {
         $width = 100 / 3;
         }

         // For Bootstrap with proporcional widths remove/comment the IF bellow
         // For Custom with with more then 1 position add/uncomment the IF bellow

         if (($value > 0) and ($countOfActivePositions == 4) and (count($position) > 4))
         {
         $width = 100 / 4;
         }

         */
        if (JFactory::getDocument()->countModules($name))
            {

            // For Bootstrap use

            echo '<div class="' . $name . ' ' . $width . '"><jdoc:include type="modules" name="' . $name . '" style="' . $style . '" /></div>';

            // For Custom Width use
            // echo '<div class="' . $name . ' ' . '" style="float:left; width:' . $width . '%"><jdoc:include type="modules" name="' . $name . '" style="' . $style . '" /></div>';

            }
        }
    }

// For Bootstrap use the grid divisions by 12 in the width keys like this: 1,2,3,4,5,6,7,8,9,10,11
// Then use the code like this bellow
// echo positions(array('menu' => 4, 'login' => 6, 'nada' => 2), 'block');
// If You wish to use with equal percentages FOREVER use the code like this bellow
// echo positions(array('menu', 'login', 'nada'), 'block');
// If You wish to use with custom percentages use the code like this bellow
// echo positions(array('menu' => 60, 'login' => 20, 'nada' => 20), 'block');

?>
<?php

if ($this->countModules('menu', 'login', 'nothing')): ?>
<?php

    // If You wish to use with custom percentages use the code bellow

    echo positions(array(
        'menu' => 4,
        'search' => 1,
        'nothing' => 6
    ) , 'block');
?>
<?php
endif; ?>
<jdoc:include type="modules" name="debug" />
</body>
</html>