Last active
May 29, 2016 19:50
-
-
Save uzielweb/be79fb1ccb0b28a6ece4a7ab20a1c569 to your computer and use it in GitHub Desktop.
Dynamic Width Joomla Positions in a Template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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'; | |
| ?> | |
| <?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'); | |
| ?> | |
| <!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 | |
| 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Success .
Now the basic code contains many options to dinamyc width for custom and for bootstrap.
Next TODO: publish template on GitHub.