.. include:: _include.rst .. highlight:: html+jinja .. _templates_surrounding_container: ####################### Surrounding container ####################### For :ref:`collections` and smart collections (see :ref:`shortcodes_asa2_smart_collection`) it can be very useful to place HTML code around the list of items. For example if you want to display the list of items in a box or even more important, if you want to design a modern CSS list layout. For this purpose |asa2| has the option to define a **"surrounding container"** for each template. This container HTML will only get used for collections and smart collections. ********************* {{ item_list }} ********************* If you want to use a surrounding container, you have to set the placeholder ``{{ item_list }}`` in it. This will be replaced with the rendered item list. .. note:: A surrounding container must contain the placeholder ``{{ item_list }}`` to be functional. ******* Example ******* **Single item HTML**: .. code::

{{ Title }}

**Surrounding container HTML**: .. code::
{{ item_list }}
Using the surrounding container with item lists, you are able to create dynamic item lists like the one in the following screenshot: .. image:: _static/sourround_container_example.jpg :height: 1003px :width: 940px :scale: 100% :alt: dynamic item list example