... | ... |
@@ -12,9 +12,9 @@ if ($this->valign) |
12 | 12 |
{ |
13 | 13 |
$cssClasses[] = $this->valign; |
14 | 14 |
} |
15 |
-if ($this->valignCenter) |
|
15 |
+if ($this->viewportHeight) |
|
16 | 16 |
{ |
17 |
- $cssClasses[] = '-valign-center'; |
|
17 |
+ $cssClasses[] = '-viewportHeight'; |
|
18 | 18 |
} |
19 | 19 |
|
20 | 20 |
$figure = ''; |
... | ... |
@@ -72,8 +72,8 @@ if (($file = \FilesModel::findByUuid($this->backgroundImage)) !== null) |
72 | 72 |
<div class="media-col-content"> |
73 | 73 |
<?= $figure ?> |
74 | 74 |
<?php if ($this->featureLink && $this->linkUrl): ?> |
75 |
- <div class="feature-link"> |
|
76 |
- <a href="<?= $this->linkUrl ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?php if ($this->newWindow): ?> target="_blank"<?php endif; ?>><?= $this->linkLabel ?></a> |
|
75 |
+ <div class="feature-link<?php if ($this->linkAlign): ?> <?= $this->linkAlign ?><?php endif; ?>"> |
|
76 |
+ <a href="<?= $this->linkUrl ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?php if ($this->newWindow): ?> target="_blank"<?php endif; ?>><span><?= $this->linkLabel ?></span></a> |
|
77 | 77 |
</div> |
78 | 78 |
<?php endif; ?> |
79 | 79 |
</div> |
... | ... |
@@ -32,12 +32,20 @@ if (($file = \FilesModel::findByUuid($this->backgroundImage)) !== null) |
32 | 32 |
'options' => [ |
33 | 33 |
'attr' => [ |
34 | 34 |
'class' => 'feature-image', |
35 |
+ ], |
|
36 |
+ 'picture_attr' => [ |
|
35 | 37 |
'style' => "object-fit: $this->backgroundSize;" . |
36 |
- "object-position: $this->backgroundPosition;" . |
|
38 |
+ ($this->backgroundPosition ? "object-position: $this->backgroundPosition;" : "") . |
|
39 |
+ "font-family: 'object-fit: $this->backgroundSize';" |
|
40 |
+ ], |
|
41 |
+ 'img_attr' => [ |
|
42 |
+ 'style' => "object-fit: $this->backgroundSize;" . |
|
43 |
+ ($this->backgroundPosition ? "object-position: $this->backgroundPosition;" : "") . |
|
37 | 44 |
"font-family: 'object-fit: $this->backgroundSize';" |
38 | 45 |
] |
39 | 46 |
] |
40 |
- ] |
|
47 |
+ ], |
|
48 |
+ '@ContaoCore/Image/Studio/figure.html.twig' |
|
41 | 49 |
); |
42 | 50 |
} else |
43 | 51 |
{ |
... | ... |
@@ -49,20 +57,29 @@ if (($file = \FilesModel::findByUuid($this->backgroundImage)) !== null) |
49 | 57 |
|
50 | 58 |
<?php $this->block('content'); ?> |
51 | 59 |
<div class="<?php echo implode(' ', $cssClasses) ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>> |
60 |
+ <div class="feature-wrapper-boundary"> |
|
61 |
+ <div class="feature-wrapper-cols"> |
|
62 |
+ <div class="media-col"> |
|
63 |
+ <?php if ($blnIsVideo && $file !== null): ?> |
|
64 |
+ <div class="media-col-content"> |
|
65 |
+ <div class="feature-video"> |
|
66 |
+ <video autoplay muted loop playsinline> |
|
67 |
+ <source src="<?php echo TL_FILES_URL . $file->path ?>" type="video/<?php echo $file->extension ?>"> |
|
68 |
+ </video> |
|
69 |
+ </div> |
|
70 |
+ </div> |
|
71 |
+ <?php elseif ($figure !== null): ?> |
|
72 |
+ <div class="media-col-content"> |
|
73 |
+ <?= $figure ?> |
|
74 |
+ <?php if ($this->featureLink && $this->linkUrl): ?> |
|
75 |
+ <div class="feature-link"> |
|
76 |
+ <a href="<?= $this->linkUrl ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?php if ($this->newWindow): ?> target="_blank"<?php endif; ?>><?= $this->linkLabel ?></a> |
|
77 |
+ </div> |
|
78 |
+ <?php endif; ?> |
|
79 |
+ </div> |
|
80 |
+ <?php endif ?> |
|
81 |
+ </div> |
|
52 | 82 |
|
53 |
- <div class="photo-wall"> |
|
54 |
- <?php if ($blnIsVideo && $file !== null): ?> |
|
55 |
- <div class="photo-wall-content"> |
|
56 |
- <video class="no-mejs" autoplay loop> |
|
57 |
- <source src="<?php echo TL_FILES_URL . $file->path ?>" type="video/<?php echo $file->extension ?>"> |
|
58 |
- </video> |
|
59 |
- </div> |
|
60 |
- <?php elseif ($figure !== null): ?> |
|
61 |
- <div class="photo-wall-content"> |
|
62 |
- <?= $figure ?> |
|
63 |
- </div> |
|
64 |
- <?php endif ?> |
|
65 |
- </div> |
|
66 |
- |
|
67 |
- <div class="text-wall"><div class="text-wall-content<?php if ($this->padding): ?> <?= $this->padding ?><?php endif; ?>"> |
|
83 |
+ <div class="content-col"> |
|
84 |
+ <div class="content-col-inside<?php if ($this->padding): ?> <?= $this->padding ?><?php endif; ?>"> |
|
68 | 85 |
<?php $this->endblock(); ?> |
... | ... |
@@ -1,16 +1,19 @@ |
1 | 1 |
<?php |
2 | 2 |
$cssClasses = array( |
3 |
- 'feature-wrapper', |
|
4 |
- 'feature-wrapper_'.$this->id, |
|
5 |
- $this->class, |
|
3 |
+ 'feature-wrapper', |
|
4 |
+ 'feature-wrapper_' . $this->id, |
|
5 |
+ $this->class, |
|
6 | 6 |
); |
7 |
-if ($this->contentPosition) { |
|
7 |
+if ($this->contentPosition) |
|
8 |
+{ |
|
8 | 9 |
$cssClasses[] = $this->contentPosition; |
9 | 10 |
} |
10 |
-if ($this->valign) { |
|
11 |
+if ($this->valign) |
|
12 |
+{ |
|
11 | 13 |
$cssClasses[] = $this->valign; |
12 | 14 |
} |
13 |
-if ($this->valignCenter) { |
|
15 |
+if ($this->valignCenter) |
|
16 |
+{ |
|
14 | 17 |
$cssClasses[] = '-valign-center'; |
15 | 18 |
} |
16 | 19 |
|
... | ... |
@@ -18,27 +21,28 @@ $figure = ''; |
18 | 21 |
$blnIsVideo = false; |
19 | 22 |
if (($file = \FilesModel::findByUuid($this->backgroundImage)) !== null) |
20 | 23 |
{ |
21 |
- if (in_array( |
|
22 |
- $file->extension, |
|
23 |
- array_map('trim', explode(',', \Config::get('validImageTypes'))) |
|
24 |
- )) |
|
25 |
- { |
|
26 |
- $figure = $this->figure( |
|
27 |
- $file->uuid, $this->backgroundImageSize, |
|
28 |
- [ |
|
29 |
- 'options' => [ |
|
30 |
- 'attr' => [ |
|
31 |
- 'class' => 'feature-image', |
|
32 |
- 'style' => "object-fit: $this->backgroundSize;" . |
|
33 |
- "object-position: $this->backgroundPosition;" . |
|
34 |
- "font-family: 'object-fit: $this->backgroundSize';" |
|
35 |
- ] |
|
36 |
- ] |
|
37 |
- ] |
|
38 |
- ); |
|
39 |
- } else { |
|
40 |
- $blnIsVideo = !$blnIsVideo; |
|
41 |
- } |
|
24 |
+ if (in_array( |
|
25 |
+ $file->extension, |
|
26 |
+ array_map('trim', explode(',', \Config::get('validImageTypes'))) |
|
27 |
+ )) |
|
28 |
+ { |
|
29 |
+ $figure = $this->figure( |
|
30 |
+ $file->uuid, $this->backgroundImageSize, |
|
31 |
+ [ |
|
32 |
+ 'options' => [ |
|
33 |
+ 'attr' => [ |
|
34 |
+ 'class' => 'feature-image', |
|
35 |
+ 'style' => "object-fit: $this->backgroundSize;" . |
|
36 |
+ "object-position: $this->backgroundPosition;" . |
|
37 |
+ "font-family: 'object-fit: $this->backgroundSize';" |
|
38 |
+ ] |
|
39 |
+ ] |
|
40 |
+ ] |
|
41 |
+ ); |
|
42 |
+ } else |
|
43 |
+ { |
|
44 |
+ $blnIsVideo = !$blnIsVideo; |
|
45 |
+ } |
|
42 | 46 |
} |
43 | 47 |
|
44 | 48 |
|
1 | 1 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,65 @@ |
1 |
+<?php |
|
2 |
+$cssClasses = array( |
|
3 |
+ 'feature-wrapper', |
|
4 |
+ 'feature-wrapper_'.$this->id, |
|
5 |
+ $this->class, |
|
6 |
+); |
|
7 |
+if ($this->contentPosition) { |
|
8 |
+ $cssClasses[] = $this->contentPosition; |
|
9 |
+} |
|
10 |
+if ($this->valign) { |
|
11 |
+ $cssClasses[] = $this->valign; |
|
12 |
+} |
|
13 |
+if ($this->valignCenter) { |
|
14 |
+ $cssClasses[] = '-valign-center'; |
|
15 |
+} |
|
16 |
+ |
|
17 |
+$figure = ''; |
|
18 |
+$blnIsVideo = false; |
|
19 |
+if (($file = \FilesModel::findByUuid($this->backgroundImage)) !== null) |
|
20 |
+{ |
|
21 |
+ if (in_array( |
|
22 |
+ $file->extension, |
|
23 |
+ array_map('trim', explode(',', \Config::get('validImageTypes'))) |
|
24 |
+ )) |
|
25 |
+ { |
|
26 |
+ $figure = $this->figure( |
|
27 |
+ $file->uuid, $this->backgroundImageSize, |
|
28 |
+ [ |
|
29 |
+ 'options' => [ |
|
30 |
+ 'attr' => [ |
|
31 |
+ 'class' => 'feature-image', |
|
32 |
+ 'style' => "object-fit: $this->backgroundSize;" . |
|
33 |
+ "object-position: $this->backgroundPosition;" . |
|
34 |
+ "font-family: 'object-fit: $this->backgroundSize';" |
|
35 |
+ ] |
|
36 |
+ ] |
|
37 |
+ ] |
|
38 |
+ ); |
|
39 |
+ } else { |
|
40 |
+ $blnIsVideo = !$blnIsVideo; |
|
41 |
+ } |
|
42 |
+} |
|
43 |
+ |
|
44 |
+ |
|
45 |
+?> |
|
46 |
+ |
|
47 |
+<?php $this->block('content'); ?> |
|
48 |
+<div class="<?php echo implode(' ', $cssClasses) ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>> |
|
49 |
+ |
|
50 |
+ <div class="photo-wall"> |
|
51 |
+ <?php if ($blnIsVideo && $file !== null): ?> |
|
52 |
+ <div class="photo-wall-content"> |
|
53 |
+ <video class="no-mejs" autoplay loop> |
|
54 |
+ <source src="<?php echo TL_FILES_URL . $file->path ?>" type="video/<?php echo $file->extension ?>"> |
|
55 |
+ </video> |
|
56 |
+ </div> |
|
57 |
+ <?php elseif ($figure !== null): ?> |
|
58 |
+ <div class="photo-wall-content"> |
|
59 |
+ <?= $figure ?> |
|
60 |
+ </div> |
|
61 |
+ <?php endif ?> |
|
62 |
+ </div> |
|
63 |
+ |
|
64 |
+ <div class="text-wall"><div class="text-wall-content<?php if ($this->padding): ?> <?= $this->padding ?><?php endif; ?>"> |
|
65 |
+<?php $this->endblock(); ?> |