You are here

Home » API reference » GridStack 8.2

gridstack.html.twig in GridStack 8.2

Same filename and directory in other branches
  1. 8 templates/gridstack.html.twig

Default theme implementation for the GridStack template.

Available variables:

  • items: The array of items containing gridstack contents and captions.
  • settings: A cherry-picked settings that mostly defines the box HTML or layout, and none of JS settings/options which are defined at data-config.
  • attributes: The array of attributes to hold classes, id and config data containing JSON object aka JS settings the GridStack expects. We don't store these JS settings in the normal <head>, but inline within data-config attribute instead.

Important! If you are adding additional contents to any content-related variable here, e.g.: aside, bottom, preface, postscript, etc., be sure to add your own key, normally unique like UUID or module name, to not conflict against, or nullify, module features, or other providers, e.g.: Good: postscript.cta, or postscript.widget (This extends postscript) Bad: postscript = cta (This overrides/ nullifies other postscripts with cta)

Debug: Use Kint: {{ kint(variable) }} Dump all available variables and their contents: {{ dump() }} Dump only the available variable keys: {{ dump(_context|keys) }}

See also

https://www.drupal.org/node/1906780

https://www.drupal.org/node/1903374

2 theme calls to gridstack.html.twig
GridStackEnginePluginBase::buildNestedItems in src/GridStackEnginePluginBase.php
Provides nested items if so configured.
GridStackManager::build in src/GridStackManager.php
Returns a cacheable renderable array of a single gridstack instance.

File

templates/gridstack.html.twig
View source 
  1. {#

  2. /**

  3.  * @file

  4.  * Default theme implementation for the GridStack template.

  5.  *

  6.  * Available variables:

  7.  * - items: The array of items containing gridstack contents and captions.

  8.  * - settings: A cherry-picked settings that mostly defines the box HTML or

  9.  *     layout, and none of JS settings/options which are defined at data-config.

  10.  * - attributes: The array of attributes to hold classes, id and config data

  11.  *     containing JSON object aka JS settings the GridStack expects. We don't

  12.  *     store these JS settings in the normal <head>, but inline within

  13.  *     data-config attribute instead.

  14.  *

  15.  * Important!

  16.  * If you are adding additional contents to any content-related variable here,

  17.  * e.g.: aside, bottom, preface, postscript, etc., be sure to add your own key,

  18.  * normally unique like UUID or module name, to not conflict against, or

  19.  * nullify, module features, or other providers, e.g.:

  20.  * Good: postscript.cta, or postscript.widget (This extends postscript)

  21.  * Bad: postscript = cta (This overrides/ nullifies other postscripts with cta)

  22.  *

  23.  * Debug:

  24.  * @see https://www.drupal.org/node/1906780

  25.  * @see https://www.drupal.org/node/1903374

  26.  * Use Kint: {{ kint(variable) }}

  27.  * Dump all available variables and their contents: {{ dump() }}

  28.  * Dump only the available variable keys: {{ dump(_context|keys) }}

  29.  */

  30. #}

  31. {%

  32.   set classes = [

  33.     settings.optionset ? 'gridstack--' ~ settings.optionset|clean_class,

  34.     settings.skin ? 'gridstack--skin--' ~ settings.skin|clean_class,

  35.   ]

  36. %}

  37. {% spaceless %}

  38. {% if settings.use_wrapper %}

  39.   <div{{ wrapper_attributes.addClass('gridstack-wrapper') }}>

  40. {% endif %}

  41. 

  42.   {# Extra contents for administration such as layout editor. #}

  43.   {% block gridstack_aside %}

  44.     {{ aside }}

  45.   {% endblock %}

  46. 

  47.   {# Allows ungriding nested wrapper such as for parallax to work. #}

  48.   {% if settings.ungrid is empty %}

  49.     <{{ wrapper }}{{ attributes.addClass(settings.root ? classes) }}>

  50.   {% endif %}

  51. 

  52.     {# Allows more complex layouts than regular plain list. Beware might break! #}

  53.     {% if content_attributes is not empty %}<div{{ content_attributes }}>{% endif %}

  54. 

  55.       {% block gridstack_preface %}

  56.         {{ preface }}

  57.       {% endblock %}

  58. 

  59.       {{ items }}

  60. 

  61.       {% block gridstack_postscript %}

  62.         {{ postscript }}

  63.       {% endblock %}

  64. 

  65.     {% if content_attributes is not empty %}</div>{% endif %}

  66. 

  67.   {% if settings.ungrid is empty %}

  68.     </{{ wrapper }}>

  69.   {% endif %}

  70. 

  71.   {# Extra contents for alternative administration such as layout editor. #}

  72.   {% block gridstack_bottom %}

  73.     {{ bottom }}

  74.   {% endblock %}

  75. 

  76.   {% if settings.use_wrapper %}

  77.     </div>

  78.   {% endif %}

  79. {% endspaceless %}