bootstrap_italia-8.x-0.x-dev/components/components-2/gallery/gallery-demo.html.twig

{#
/**
 * @file
 * Hero demo.
 *
 * Example:
 *
   {% include '@bi-bcl/gallery/gallery-demo.html.twig' %}
 */
#}
{% apply spaceless %}

  {% set demo_gallery_items_1 = [
    {
      'image_url': 'https://placehold.co/660x300/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery A',
    },
    {
      'image_url': 'https://placehold.co/660x300/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery B',
      'show_image_caption': true,
      'icon_name': 'it-code-circle',
    },
    {
      'image_url': 'https://placehold.co/660x300/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery C',
      'show_image_caption': true,
      'icon_name': 'it-code-circle',
      'overlay': true
    },
  ] %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Image list'|t,
    path_demo_code: '/gallery/gallery-demo.html.twig#L39',
  } %}
    {% block content %}

      {% include '@bi-bcl/gallery/gallery.html.twig' with {
        items: demo_gallery_items_1,
      } %}

    {% endblock %}
  {% endembed %}{# End embed demo. #}

  {% set demo_gallery_items_2 = [
    {
      'image_url': 'https://placehold.co/660x300/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery 1',
      'icon_name': 'it-code-circle',
    },
    {
      'image_url': 'https://placehold.co/660x300/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery 2',
      'icon_name': 'it-code-circle',
    },
    {
      'image_url': 'https://placehold.co/660x300/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery 3',
      'icon_name': 'it-code-circle',
    },
    {
      'image_url': 'https://placehold.co/660x300/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery 4',
      'icon_name': 'it-code-circle',
    },
    {
      'image_url': 'https://placehold.co/660x300/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery 5',
      'icon_name': 'it-code-circle',
    },
    {
      'image_url': 'https://placehold.co/660x300/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery 6',
      'icon_name': 'it-code-circle',
    },
  ] %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Image list: grid standard'|t,
    path_demo_code: '/gallery/gallery-demo.html.twig#L85',
  } %}
    {% block content %}

      {% include '@bi-bcl/gallery/gallery.html.twig' with {
        items: demo_gallery_items_2,
      } %}

    {% endblock %}
  {% endembed %}{# End embed demo. #}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Image list: grid standard with caption'|t,
    path_demo_code: '/gallery/gallery-demo.html.twig#L98',
  } %}
    {% block content %}

      {% include '@bi-bcl/gallery/gallery.html.twig' with {
        items: demo_gallery_items_2,
        show_image_caption: true,
      } %}

    {% endblock %}
  {% endembed %}{# End embed demo. #}

  {% set demo_gallery_items_3 = [
    {
      'image_url': 'https://placehold.co/660x300/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery 7',
      'icon_name': 'it-code-circle',
    },
    {
      'image_url': 'https://placehold.co/660x300/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery 8',
      'icon_name': 'it-code-circle',
    },
    {
      'image_url': 'https://placehold.co/660x300/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery 9',
      'icon_name': 'it-code-circle',
    },
    {
      'image_url': 'https://placehold.co/660x300/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery 10',
      'icon_name': 'it-code-circle',
    },
  ] %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Image list: grid quilted with caption'|t,
    path_demo_code: '/gallery/gallery-demo.html.twig#L135',
  } %}
    {% block content %}

      {% include '@bi-bcl/gallery/gallery-first-image-double.html.twig' with {
        items: demo_gallery_items_3,
      } %}

    {% endblock %}
  {% endembed %}{# End embed demo. #}

  {% set demo_gallery_items_4 = [
    {
      'image_url': 'https://placehold.co/400x300/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery 11',
      'show_image_caption': true,
      'icon_name': 'it-code-circle',
    },
    {
      'image_url': 'https://placehold.co/400x500/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery 12',
      'show_image_caption': true,
      'icon_name': 'it-code-circle',
    },
    {
      'image_url': 'https://placehold.co/400x700/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery 13',
      'show_image_caption': true,
      'icon_name': 'it-code-circle',
    },
    {
      'image_url': 'https://placehold.co/400x600/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery 14',
      'show_image_caption': true,
      'icon_name': 'it-code-circle',
    },
    {
      'image_url': 'https://placehold.co/400x500/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery 15',
      'show_image_caption': true,
      'icon_name': 'it-code-circle',
    },
    {
      'image_url': 'https://placehold.co/400x400/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery 16',
      'show_image_caption': true,
      'icon_name': 'it-code-circle',
    },
    {
      'image_url': 'https://placehold.co/400x600/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery 17',
      'show_image_caption': true,
      'icon_name': 'it-code-circle',
    },
    {
      'image_url': 'https://placehold.co/400x500/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery 18',
      'show_image_caption': true,
      'icon_name': 'it-code-circle',
    },
    {
      'image_url': 'https://placehold.co/400x400/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery 19',
      'show_image_caption': true,
      'icon_name': 'it-code-circle',
    },
    {
      'image_url': 'https://placehold.co/400x600/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery 20',
      'show_image_caption': true,
      'icon_name': 'it-code-circle',
    },
    {
      'image_url': 'https://placehold.co/400x500/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery 21',
      'show_image_caption': true,
      'icon_name': 'it-code-circle',
    },
    {
      'image_url': 'https://placehold.co/400x400/ebebeb/808080/?text=Placeholder%20image',
      'image_description': 'Image description gallery 22',
      'show_image_caption': true,
      'icon_name': 'it-code-circle',
    },
  ] %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Image list: masonry'|t,
    path_demo_code: '/gallery/gallery-demo.html.twig#L223',
  } %}
    {% block content %}

      {% include '@bi-bcl/gallery/gallery.html.twig' with {
        items: demo_gallery_items_4,
        grid_type: 'masonry',
      } %}

    {% endblock %}
  {% endembed %}{# End embed demo. #}

{% endapply %}