five_5x20.inc

  1. cis7 sites/all/themes/ulmus/adaptivetheme/at_core/layouts/panels/five_5x20/five_5x20.inc
  2. cle7 sites/all/themes/ulmus/adaptivetheme/at_core/layouts/panels/five_5x20/five_5x20.inc
  3. ecd7 sites/all/themes/ulmus/adaptivetheme/at_core/layouts/panels/five_5x20/five_5x20.inc
  4. elmsmedia7 sites/all/themes/ulmus/adaptivetheme/at_core/layouts/panels/five_5x20/five_5x20.inc
  5. harmony7 sites/all/themes/ulmus/adaptivetheme/at_core/layouts/panels/five_5x20/five_5x20.inc
  6. icor7 sites/all/themes/ulmus/adaptivetheme/at_core/layouts/panels/five_5x20/five_5x20.inc
  7. meedjum_blog7 sites/all/themes/ulmus/adaptivetheme/at_core/layouts/panels/five_5x20/five_5x20.inc
  8. mooc7 sites/all/themes/ulmus/adaptivetheme/at_core/layouts/panels/five_5x20/five_5x20.inc

Implimentation of an Adaptivetheme Panels Layout Plugin A panels layout plugin on steroids and an implementation of hook_panels_layouts().

These plugins must use the function method - Panels can support two methods, one that uses a function name and one that simply defines a $plugins array. You MUST use the function method, which requires correct naming of the function: function [theme name]_[plugin name]_panels_layouts()

Adaptivetheme needs more data to build the actual CSS since it does not use Panels normal method of defining a static CSS file. In AT the CSS is built programmatically for each selected option when the user saves the theme settings. This is for two main reasons - first so we are optimizing the CSS and not adding any duplicate CSS declarations, and secondly so we can easily insert the CSS into the right media query in the generated stylsheet.

Adding Selectors and CSS Declarations: Each CSS declaration is an array, keyed by an "identifier". The array items are selector/css pairs. For example: '40' => array('.five-5x20 .row-1' => 'width:40%'), Here '40' is the identifier, '.five-5x20 .row-1' is the selector and 'width:40%' is the actual CSS style.

Identifiers: Each identifier represents a CSS style. It's basically shorthand notation for the actual CSS. To ensure the CSS is optimized as much as possible you should use an existing identifier if it exists, although you can use your own, just make sure to re-use them as much as possible in order to get the smallest CSS files - here is a full list of the existing identifiers used by AT Core Panels plugins:

Basic Widths (all must be in percentages):

ID CSS

'25' 'width:25%' '33' 'width:33.333333%' '40' 'width:40%' '50' 'width:50%' '60' 'width:60%' '66' 'width:66.666666%' '75' 'width:75%' '100' 'width:100%'

Floats with widths:

'25fl' 'width:25%;float:left' '25fr' 'width:25%;float:right' '33fl' 'width:33.333333%;float:left' '50fl' 'width:50%;float:left' '75fl' 'width:75%;float:left' '75fr' 'width:75%;float:right'

Floats:

'fl' 'float:left' 'fr' 'float:right' 'fn' 'float:none'

Stacked Regions get a specail cased identifier:

'fdw' 'float:none;display:block;width:100%;clear:both'

Functions

File

sites/all/themes/ulmus/adaptivetheme/at_core/layouts/panels/five_5x20/five_5x20.inc
View source
  1. <?php
  2. /**
  3. * @file
  4. * Implimentation of an Adaptivetheme Panels Layout Plugin
  5. * A panels layout plugin on steroids and an implementation of
  6. * hook_panels_layouts().
  7. *
  8. * These plugins must use the function method - Panels can support two
  9. * methods, one that uses a function name and one that simply defines
  10. * a $plugins array. You MUST use the function method, which requires
  11. * correct naming of the function:
  12. * function [theme name]_[plugin name]_panels_layouts()
  13. *
  14. * Adaptivetheme needs more data to build the actual CSS since it does not use
  15. * Panels normal method of defining a static CSS file. In AT the CSS is built
  16. * programmatically for each selected option when the user saves the theme
  17. * settings. This is for two main reasons - first so we are optimizing the
  18. * CSS and not adding any duplicate CSS declarations, and secondly so we can
  19. * easily insert the CSS into the right media query in the generated stylsheet.
  20. *
  21. * Adding Selectors and CSS Declarations:
  22. * Each CSS declaration is an array, keyed by an "identifier". The array items
  23. * are selector/css pairs. For example:
  24. * '40' => array('.five-5x20 .row-1' => 'width:40%'),
  25. * Here '40' is the identifier, '.five-5x20 .row-1' is the selector and 'width:40%'
  26. * is the actual CSS style.
  27. *
  28. * Identifiers:
  29. * Each identifier represents a CSS style. It's basically shorthand notation for the
  30. * actual CSS. To ensure the CSS is optimized as much as possible you should use an
  31. * existing identifier if it exists, although you can use your own, just make sure
  32. * to re-use them as much as possible in order to get the smallest CSS files -
  33. * here is a full list of the existing identifiers used by AT Core Panels plugins:
  34. Basic Widths (all must be in percentages):
  35. ID CSS
  36. '25' 'width:25%'
  37. '33' 'width:33.333333%'
  38. '40' 'width:40%'
  39. '50' 'width:50%'
  40. '60' 'width:60%'
  41. '66' 'width:66.666666%'
  42. '75' 'width:75%'
  43. '100' 'width:100%'
  44. Floats with widths:
  45. '25fl' 'width:25%;float:left'
  46. '25fr' 'width:25%;float:right'
  47. '33fl' 'width:33.333333%;float:left'
  48. '50fl' 'width:50%;float:left'
  49. '75fl' 'width:75%;float:left'
  50. '75fr' 'width:75%;float:right'
  51. Floats:
  52. 'fl' 'float:left'
  53. 'fr' 'float:right'
  54. 'fn' 'float:none'
  55. Stacked Regions get a specail cased identifier:
  56. 'fdw' 'float:none;display:block;width:100%;clear:both'
  57. */
  58. function adaptivetheme_five_5x20_panels_layouts() {
  59. $items['five_5x20'] = array(
  60. 'title' => t('AT Five column 5x20'),
  61. 'category' => t('AT Responsive Panels - 4,5,6 column'),
  62. 'icon' => 'five_5x20.png', // Used in Panels Admin only. AT Core uses a CSS sprite for the icons in theme settings.
  63. 'theme' => 'five_5x20',
  64. 'admin css' => 'five_5x20.admin.css', // This holds a basic layout for Panels Admin and the CSS for theme settings sprite. Sprite icons must be 40px by 40px.
  65. 'theme arguments' => array('id', 'content'),
  66. 'regions' => array(
  67. 'five_first' => t('Column 1'),
  68. 'five_second' => t('Column 2'),
  69. 'five_third' => t('Column 3'),
  70. 'five_fourth' => t('Column 4'),
  71. 'five_fifth' => t('Column 5'),
  72. ),
  73. // The array items below are added by Adaptivetheme and are not normally present
  74. // in a Panels layout plugin. AT uses these to build the theme settings and generate
  75. // the CSS used when rendering the layout in the front end.
  76. 'type' => 'five', // - type: dictates what group it will fall into in theme settings.
  77. 'options' => array( // - options: the various layout options the user can choose in theme settings for each device group.
  78. 'five-5x20' => 'default', // - option key: the key used here MUST match the key used in the 'styles', the first one must be called 'default'.
  79. 'five-5x20-2x3-grid' => '2/3 split grid',
  80. 'five-5x20-1x2x2-grid' => 'stack',
  81. 'five-5x20-stack-2' => 'Stack 50/50 bottom',
  82. 'five-5x20-stack' => 'stack', // stack should always refer to "all regions stacked", and use the 'fdw' identifier in 'styles'.
  83. ),
  84. 'styles' => array( // - styles: these items are used to programatically build and optimize the CSS for each break-point.
  85. 'five-5x20' => array( // - styles keys: these key must match the 'options' keys, the first one must be the default.
  86. 'css' => array( // - css: holds the array of CSS identifiers
  87. '40' => array('.five-5x20 > .row-1' => 'width:40%'), // selectors as keys, CSS as values, values should align to the the "css" array key identifiers.
  88. '60' => array('.five-5x20 > .row-2' => 'width:60%'),
  89. 'fl' => array('.five-5x20 > .panel-row' => 'float:left'),
  90. '50' => array('.five-5x20 > .row-1 > .region' => 'width:50%'),
  91. '33' => array('.five-5x20 > .row-2 > .region' => 'width:33.333333%'),
  92. ),
  93. ),
  94. 'five-5x20-2x3-grid' => array(
  95. 'css' => array(
  96. '33' => array('.five-5x20 > .panel-row > .region' => 'width:33.333333%'),
  97. '50' => array('.five-5x20 > .row-1 div.region-five-first,.five-5x20 .row-1 div.region-five-second' => 'width:50%'),
  98. 'fdw' => array('.five-5x20 > .panel-row' => 'float:none;display:block;width:100%;clear:both'),
  99. ),
  100. ),
  101. 'five-5x20-1x2x2-grid' => array(
  102. 'css' => array(
  103. '50' => array('.five-5x20 > .panel-row > div.region' => 'width:50%'),
  104. 'fdw' => array('.five-5x20 > div.panel-row,.five-5x20 > div.panel-row > div.region-five-fifth' => 'float:none;display:block;width:100%;clear:both'),
  105. ),
  106. ),
  107. 'five-5x20-stack-2' => array(
  108. 'css' => array(
  109. '50' => array('.five-5x20 > .row-1 > div.region' => 'width:50%'),
  110. 'fdw' => array('.five-5x20 > .panel-row,.five-5x20 > .row-2 > .region' => 'float:none;display:block;width:100%;clear:both'),
  111. ),
  112. ),
  113. 'five-5x20-stack' => array(
  114. 'css' => array(
  115. 'fdw' => array('.five-5x20 > .panel-row > .region,.five-5x20 > .panel-row' => 'float:none;display:block;width:100%;clear:both'),
  116. ),
  117. ),
  118. ),
  119. );
  120. return $items;
  121. }
  122. /**
  123. * Preprocess variables for five-5x20.tpl.php
  124. */
  125. function template_preprocess_five_5x20(&$vars) {
  126. /**
  127. * We need to initialize these variables when Panels is displaying the template.
  128. * These are used primarily when the template is being rendered via Display suite
  129. * as a "node" so we can programatically wrap the layout in <article> elements
  130. * with appropriate classes and id.
  131. *
  132. * Note that in Display Suite layout plugin preprocess and process functions are
  133. * not fired, instead we need to use the functions for the template being
  134. * modified by DS, such as node, user or search. AT Core sets these prefix and
  135. * suffix vars for nodes in adaptivetheme_process_node().
  136. */
  137. $vars['panel_prefix'] = '';
  138. $vars['panel_suffix'] = '';
  139. }