eSales Media Git repositories
Browse code

Fix background image min height issue with more than one wrapper configured like that

Benjamin Roth authored on30/04/2025 12:27:48
Showing1 changed files
contao/templates/content_element/background_wrapper.html.twig
History View file @881cd9d
... ... 
@@ -32,9 +32,9 @@
32 32
33 33 
 {% block script %}
34 34 
     {% if minHeight_ratio is defined %}
35 
-        {% add "background_wrapper" to head %}
35 
+        {% add to head %}
36 36 
             <style>
37 
-                #content-background-wrapper-fg--{{ data.id }} { display: flow-root; }
37 
+                {##content-background-wrapper-fg--{{ data.id }} { display: flow-root; }#}
38 38 
                 #content-background-wrapper-fg--{{ data.id }}::before {
39 39 
                     display: table;
40 40 
                     content: "";
Browse code

Initial commit

Benjamin Roth authored on09/10/2024 01:09:48
Showing1 changed files
contao/templates/content_element/background_wrapper.html.twig
History View file @7214d4d
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,47 @@
1 
+{% extends "@Contao/content_element/_base.html.twig" %}
2 
+{% import "@ContaoCore/Image/Studio/_macros.html.twig" as studio %}
3 
+
4 
+{% block content %}
5 
+    {% block background %}
6 
+        <div class="content-background-wrapper-bg">
7 
+            {% if background_figure is defined %}
8 
+                {{- studio.figure(background_figure) -}}
9 
+            {% endif %}
10 
+            {% if background_video is defined %}
11 
+                <figure>
12 
+                    <video autoplay muted loop playsinline>
13 
+                        <source src="{{ background_video.path }}" type="video/{{ background_video.extension }}">
14 
+                    </video>
15 
+                </figure>
16 
+            {% endif %}
17 
+        </div>
18 
+    {% endblock %}
19 
+
20 
+    {% block foreground %}
21 
+        <div id="content-background-wrapper-fg--{{ data.id }}" class="content-background-wrapper-fg">
22 
+            <div class="content-grid">
23 
+                <div class="fragments">
24 
+                    {% for fragment in nested_fragments %}
25 
+                        {{ content_element(fragment) }}
26 
+                    {% endfor %}
27 
+                </div>
28 
+            </div>
29 
+        </div>
30 
+    {% endblock %}
31 
+{% endblock %}
32 
+
33 
+{% block script %}
34 
+    {% if minHeight_ratio is defined %}
35 
+        {% add "background_wrapper" to head %}
36 
+            <style>
37 
+                #content-background-wrapper-fg--{{ data.id }} { display: flow-root; }
38 
+                #content-background-wrapper-fg--{{ data.id }}::before {
39 
+                    display: table;
40 
+                    content: "";
41 
+                    padding-top: {{ minHeight_ratio }}%;
42 
+                    float: left;
43 
+                }
44 
+            </style>
45 
+        {% endadd %}
46 
+    {% endif %}
47 
+{% endblock %}