Use the figure builder component inside the controller classes to gen…

…erate the pictures.

config/services.yaml

@@ -11,6 +11,7 @@ services:
             $galleryCreatorValidExtensions: '%markocupic_gallery_creator.valid_extensions%'
             $imageFactory: '@contao.image.factory'
             $insertTagParser: '@contao.insert_tag.parser'
+            $filesStorage: '@contao.filesystem.virtual.files'
 
     Markocupic\GalleryCreatorBundle\:
         resource: ../src/

contao/templates/component/_album.html.twig → contao/templates/_new/component/_album.html.twig

@@ -1,14 +1,14 @@
 {# component/_album.html.twig #}
+{% use "@Contao/component/_figure.html.twig" %}
+
 {% trans_default_domain 'contao_default' %}
 
 {% block album_component %}
 
     <div{{ attrs(album_inner_attributes|default).addClass('gc-album-list-inner') }}>
         {% block album_figure %}
             <div{{ attrs(album_figure_attributes|default).addClass('gc-album-list-figure') }}>
-                {% include "@Contao/component/_figure.html.twig" with {
-                    figure: figure(album.figureUuid, album.figureSize, album.figureOptions)
-                } %}
+                {% if album.figure.build|default %}{% with {figure: album.figure.build} %}{{ block('figure_component') }}{% endwith %}{% endif %}
             </div>
         {% endblock %}
 

contao/templates/component/_album_detail_view.html.twig → contao/templates/_new/component/_album_detail_view.html.twig

@@ -1,3 +1,5 @@
+{% use "@Contao/component/_list.html.twig" %}
+
 {# component/_album_detail_view.html.twig #}
 {% trans_default_domain 'contao_default' %}
 
@@ -60,27 +62,12 @@
                 {% endif %}
             {% endblock %}
 
-            {% block album_detail_pagination %}
-                {{ detailPagination|raw }}
-            {% endblock %}
-
-            {% block album_detail_picture_list %}
-                {% if arrPictures %}
-                    {% set album_detail_picture_list_tag_name = album_detail_picture_list_tag_name|default('ul') %}
-                    {% set album_detail_picture_list_item_tag_name = album_detail_picture_list_item_tag_name|default('li') %}
-
-                    <{{ album_detail_picture_list_tag_name }}{{ attrs(album_detail_picture_list_attributes|default).addClass('gc-album-detail-picture-list') }}>
-                        {% for picture in arrPictures %}
-                            <{{ album_detail_picture_list_item_tag_name }}{{ attrs(album_detail_picture_list_item_attributes|default).addClass('gc-album-detail-picture-list-item') }}>
-                                {% include "@Contao/component/_figure.html.twig" with {
-                                    figure: figure(picture.figureUuid, picture.figureSize, picture.figureOptions)
-                                } %}
-                            </{{ album_detail_picture_list_item_tag_name }}>
-                        {% endfor %}
-                    </{{ album_detail_picture_list_tag_name }}>
-                {% endif %}
-            {% endblock %}
-
+            {% if images|default %}
+                {% block album_detail_picture_list %}
+                    {# !!! The gallery is rendered here!!! #}
+                    {% with {items: images } %}{{ block('list_component') }}{% endwith %}
+                {% endblock %}
+            {% endif %}
             {% block album_detail_article_post %}
                 {% if insertArticlePost %}
                     <div{{ attrs(album_detail_article_post_attributes|default).addClass('gc-album-detail-article-post') }}>
@@ -90,4 +77,8 @@
             {% endblock %}
         </div>
     </div>
+
+    {% block album_detail_script %}
+        {# Add your javascript here. #}
+    {% endblock %}
 {% endblock %}

contao/templates/component/_album_list_view.html.twig → contao/templates/_new/component/_album_list_view.html.twig

@@ -3,7 +3,7 @@
 
 {% block album_list_view %}
     <!-- indexer::stop -->
-    <div{{ attrs(album_list_view_attributes|default).addClass('gc-album-list-view') }}>
+<div{{ attrs(album_list_view_attributes|default).addClass('gc-album-list-view') }}>
     {% block album_list_pagination %}
         {{ listPagination|raw }}
     {% endblock %}
@@ -34,5 +34,8 @@
         </{{ album_list_tag }}>
     {% endblock %}
     </div>
+    {% block album_list_script %}
+        {# Add your javascript here. #}
+    {% endblock %}
     <!-- indexer::continue -->
 {% endblock %}

contao/templates/_new/content_element/gallery_creator.html.twig

@@ -0,0 +1,52 @@
+{# content_element/gallery_creator.html.twig #}
+
+{% extends "@Contao/content_element/_base.html.twig" %}
+{% use '@Contao_MarkocupicGalleryCreatorBundle/component/_album_list_view.html.twig' %}
+{% use '@Contao_MarkocupicGalleryCreatorBundle/component/_album_detail_view.html.twig' %}
+{% use "@Contao_MarkocupicGalleryCreatorBundle/component/_album.html.twig" %}
+{% use "@Contao/component/_figure.html.twig" %}
+
+{% block content %}
+
+    {% if hasBreadcrumb and showAlbumDetail %}
+        <nav class="gc-breadcrumb-nav">
+            {{ breadcrumb|raw }}
+        </nav>
+    {% endif %}
+
+    {% if showAlbumDetail %}
+        {% block album_detail_view %}
+            {# Do your template modification (e.g. add css classes, replace tag names, etc.) below here: #}
+
+            {{ parent() }}
+        {% endblock %}
+    {% endif %}
+
+    {% if showAlbumListing %}
+        {% block album_list_view %}
+            {# Do your template modification (e.g. add css classes, replace tag names, etc.) below here: #}
+
+            {{ parent() }}
+        {% endblock %}
+    {% endif %}
+
+{% endblock %}
+
+{% block list_item %}
+    {% if showAlbumDetail and item.figure.build|default %}
+        {% with {figure: item.figure.build} %}{{ block('figure_component') }}{% endwith %}
+    {% endif %}
+{% endblock %}
+
+{% block list %}
+    {% if showAlbumDetail %}
+        {% set list = list|merge({'list_attributes': attrs(list.list_attributes|default)
+            .removeClass("content-#{type}")
+            .addClass('gc-album-detail-picture-list')}) %}
+
+        {% set list = list|merge({'item_attributes': attrs(list.item_attributes|default)
+            .addClass('gc-album-detail-picture-list-item')}) %}
+    {% endif %}
+
+    {{ parent() }}
+{% endblock %}

contao/templates/_new/content_element/gallery_creator_news.html.twig

@@ -0,0 +1,34 @@
+{# content_elemnt/gallery_creator_news.html.twig #}
+
+{% extends '@Contao/block_searchable' %}
+{% use '@Contao_MarkocupicGalleryCreatorBundle/component/_album_detail_view.html.twig' %}
+{% use "@Contao/component/_figure.html.twig" %}
+
+{% block content %}
+
+    {% block album_detail_view %}
+        {# Do your template modification (e.g. add css classes, replace tag names, etc.) below here: #}
+
+        {{ parent() }}
+    {% endblock %}
+
+{% endblock %}
+
+{% block list_item %}
+    {% if showAlbumDetail %}
+        {% with {figure: item.figure} %}{{ block('figure_component') }}{% endwith %}
+    {% endif %}
+{% endblock %}
+
+{% block list %}
+    {% if showAlbumDetail %}
+        {% set list = list|merge({'list_attributes': attrs(list.list_attributes|default)
+            .removeClass("content-#{type}")
+            .addClass('gc-album-detail-picture-list')}) %}
+
+        {% set list = list|merge({'item_attributes': attrs(list.item_attributes|default)
+            .addClass('gc-album-detail-picture-list-item')}) %}
+    {% endif %}
+
+    {{ parent() }}
+{% endblock %}