Browse code
Support responsive images through Contao source sets
Benjamin Roth authored on01/08/2018 08:45:04 Showing4 changed files
- elements/ContentSlickSliderImage.php
- elements/ContentSlickSliderSlideStart.php
- templates/elements/ce_slick_slider_image.html5
- templates/slides/slide_start_default.html5
| ... | ... |
@@ -74,36 +74,63 @@ class ContentSlickSliderImage extends \ContentElement |
| 74 | 74 |
|
| 75 | 75 |
$this->addImageToTemplate($this->Template, array('singleSRC'=>$this->singleSRC, 'size'=>$this->size));
|
| 76 | 76 |
|
| 77 |
+ $backgroundStyle = ''; |
|
| 78 |
+ |
|
| 77 | 79 |
if ($this->eSM_slick_minHeight) {
|
| 78 | 80 |
if ($this->eSM_slick_bgSize && $this->eSM_slick_bgSize == 'auto auto') {
|
| 79 |
- $this->Template->minHeight = $this->Template->picture['img']['height'] . 'px'; |
|
| 81 |
+ $minHeight = $this->Template->picture['img']['height'] . 'px'; |
|
| 80 | 82 |
} else |
| 81 | 83 |
{
|
| 82 |
- $this->Template->minHeight = round($this->Template->picture['img']['height'] / $this->Template->picture['img']['width'] * 100) . '%'; |
|
| 84 |
+ $minHeight = round($this->Template->picture['img']['height'] / $this->Template->picture['img']['width'] * 100) . '%'; |
|
| 83 | 85 |
} |
| 86 |
+ $backgroundStyle .= '.slide_'.$this->id.':before { content: ""; display: block; float: left; padding-top: '.$minHeight.'; }';
|
|
| 84 | 87 |
} |
| 85 |
- } |
|
| 86 | 88 |
|
| 87 |
- $backgroundStyle = 'background-image: url(\''.$this->Template->src.'\');'; |
|
| 89 |
+ $backgroundStyle .= '.slide_'.$this->id.' .slick-slider-slide-image { background-image: url(\''.$this->Template->src.'\');';
|
|
| 88 | 90 |
|
| 89 |
- if ($this->eSM_slick_bgSize) {
|
|
| 90 |
- $backgroundStyle .= 'background-size: ' . $this->eSM_slick_bgSize . ';'; |
|
| 91 |
- } else {
|
|
| 92 |
- $backgroundStyle .= 'background-size: cover;'; |
|
| 93 |
- } |
|
| 94 |
- if ($this->eSM_slick_bgPosition) {
|
|
| 95 |
- $backgroundStyle .= 'background-position: ' . $this->eSM_slick_bgPosition . ';'; |
|
| 96 |
- } else {
|
|
| 97 |
- $backgroundStyle .= 'background-position: 0 0;'; |
|
| 98 |
- } |
|
| 99 |
- if ($this->eSM_slick_bgOpacity) {
|
|
| 100 |
- $backgroundStyle .= 'opacity:' . $this->eSM_slick_bgOpacity/100 . ';'; |
|
| 101 |
- } |
|
| 102 |
- if ($this->eSM_slick_bgRepeat) {
|
|
| 103 |
- $backgroundStyle .= 'background-repeat: ' . $this->eSM_slick_bgRepeat . ';'; |
|
| 104 |
- } |
|
| 91 |
+ if ($this->eSM_slick_bgSize) {
|
|
| 92 |
+ $backgroundStyle .= 'background-size: ' . $this->eSM_slick_bgSize . ';'; |
|
| 93 |
+ } else {
|
|
| 94 |
+ $backgroundStyle .= 'background-size: cover;'; |
|
| 95 |
+ } |
|
| 96 |
+ if ($this->eSM_slick_bgPosition) {
|
|
| 97 |
+ $backgroundStyle .= 'background-position: ' . $this->eSM_slick_bgPosition . ';'; |
|
| 98 |
+ } else {
|
|
| 99 |
+ $backgroundStyle .= 'background-position: 0 0;'; |
|
| 100 |
+ } |
|
| 101 |
+ if ($this->eSM_slick_bgOpacity) {
|
|
| 102 |
+ $backgroundStyle .= 'opacity:' . $this->eSM_slick_bgOpacity/100 . ';'; |
|
| 103 |
+ } |
|
| 104 |
+ if ($this->eSM_slick_bgRepeat) {
|
|
| 105 |
+ $backgroundStyle .= 'background-repeat: ' . $this->eSM_slick_bgRepeat . ';'; |
|
| 106 |
+ } |
|
| 107 |
+ |
|
| 108 |
+ $this->Template->backgroundStyle = $backgroundStyle.' }'; |
|
| 109 |
+ |
|
| 110 |
+ // Responsive handling |
|
| 111 |
+ if ($this->Template->picture['sources'] && is_array($this->Template->picture['sources'])) |
|
| 112 |
+ {
|
|
| 113 |
+ $backgroundStyleResponsive = ''; |
|
| 114 |
+ foreach ($this->Template->picture['sources'] as $srcSet) |
|
| 115 |
+ {
|
|
| 116 |
+ $srcSetStyle = '.slide_'.$this->id.' .slick-slider-slide-image { background-image: url(\''.$srcSet['src'].'\'); }';
|
|
| 117 |
+ |
|
| 118 |
+ if ($this->eSM_slick_minHeight) {
|
|
| 119 |
+ if ($this->eSM_slick_bgSize && $this->eSM_slick_bgSize == 'auto auto') {
|
|
| 120 |
+ $minHeight = $srcSet['height'] . 'px'; |
|
| 121 |
+ } else |
|
| 122 |
+ {
|
|
| 123 |
+ $minHeight = round($srcSet['height'] / $srcSet['width'] * 100) . '%'; |
|
| 124 |
+ } |
|
| 125 |
+ $srcSetStyle .= '.slide_'.$this->id.':before { content: ""; display: block; float: left; padding-top: '.$minHeight.'; }';
|
|
| 126 |
+ } |
|
| 127 |
+ |
|
| 128 |
+ $backgroundStyleResponsive .= '@media screen and '.$srcSet['media'].' { '.$srcSetStyle.' }';
|
|
| 129 |
+ } |
|
| 130 |
+ $this->Template->backgroundStyleResponsive = $backgroundStyleResponsive; |
|
| 131 |
+ } |
|
| 105 | 132 |
|
| 106 |
- $this->Template->backgroundStyle = $backgroundStyle; |
|
| 133 |
+ } |
|
| 107 | 134 |
} |
| 108 | 135 |
|
| 109 | 136 |
$this->Template->text = nl2br($this->eSM_slick_text); |
| ... | ... |
@@ -50,36 +50,64 @@ class ContentSlickSliderSlideStart extends \ContentElement |
| 50 | 50 |
|
| 51 | 51 |
$this->addImageToTemplate($this->Template, array('singleSRC'=>$this->singleSRC, 'size'=>$this->size));
|
| 52 | 52 |
|
| 53 |
+ $backgroundStyle = ''; |
|
| 54 |
+ |
|
| 53 | 55 |
if ($this->eSM_slick_minHeight) {
|
| 54 | 56 |
if ($this->eSM_slick_bgSize && $this->eSM_slick_bgSize == 'auto auto') {
|
| 55 |
- $this->Template->minHeight = $this->Template->picture['img']['height'] . 'px'; |
|
| 57 |
+ $minHeight = $this->Template->picture['img']['height'] . 'px'; |
|
| 56 | 58 |
} else |
| 57 | 59 |
{
|
| 58 |
- $this->Template->minHeight = round($this->Template->picture['img']['height'] / $this->Template->picture['img']['width'] * 100) . '%'; |
|
| 60 |
+ $minHeight = round($this->Template->picture['img']['height'] / $this->Template->picture['img']['width'] * 100) . '%'; |
|
| 59 | 61 |
} |
| 62 |
+ $backgroundStyle .= '.slide_'.$this->id.':before { content: ""; display: block; float: left; padding-top: '.$minHeight.'; }';
|
|
| 60 | 63 |
} |
| 61 |
- } |
|
| 62 | 64 |
|
| 63 |
- $backgroundStyle = 'background-image: url(\''.$this->Template->src.'\');'; |
|
| 64 | 65 |
|
| 65 |
- if ($this->eSM_slick_bgSize) {
|
|
| 66 |
- $backgroundStyle .= 'background-size: ' . $this->eSM_slick_bgSize . ';'; |
|
| 67 |
- } else {
|
|
| 68 |
- $backgroundStyle .= 'background-size: cover;'; |
|
| 69 |
- } |
|
| 70 |
- if ($this->eSM_slick_bgPosition) {
|
|
| 71 |
- $backgroundStyle .= 'background-position: ' . $this->eSM_slick_bgPosition . ';'; |
|
| 72 |
- } else {
|
|
| 73 |
- $backgroundStyle .= 'background-position: 0 0;'; |
|
| 74 |
- } |
|
| 75 |
- if ($this->eSM_slick_bgOpacity) {
|
|
| 76 |
- $backgroundStyle .= 'opacity:' . $this->eSM_slick_bgOpacity/100 . ';'; |
|
| 77 |
- } |
|
| 78 |
- if ($this->eSM_slick_bgRepeat) {
|
|
| 79 |
- $backgroundStyle .= 'background-repeat: ' . $this->eSM_slick_bgRepeat . ';'; |
|
| 80 |
- } |
|
| 66 |
+ $backgroundStyle .= '.slide_'.$this->id.' .slick-slider-slide-image { background-image: url(\''.$this->Template->src.'\');';
|
|
| 81 | 67 |
|
| 82 |
- $this->Template->backgroundStyle = $backgroundStyle; |
|
| 68 |
+ if ($this->eSM_slick_bgSize) {
|
|
| 69 |
+ $backgroundStyle .= 'background-size: ' . $this->eSM_slick_bgSize . ';'; |
|
| 70 |
+ } else {
|
|
| 71 |
+ $backgroundStyle .= 'background-size: cover;'; |
|
| 72 |
+ } |
|
| 73 |
+ if ($this->eSM_slick_bgPosition) {
|
|
| 74 |
+ $backgroundStyle .= 'background-position: ' . $this->eSM_slick_bgPosition . ';'; |
|
| 75 |
+ } else {
|
|
| 76 |
+ $backgroundStyle .= 'background-position: 0 0;'; |
|
| 77 |
+ } |
|
| 78 |
+ if ($this->eSM_slick_bgOpacity) {
|
|
| 79 |
+ $backgroundStyle .= 'opacity:' . $this->eSM_slick_bgOpacity/100 . ';'; |
|
| 80 |
+ } |
|
| 81 |
+ if ($this->eSM_slick_bgRepeat) {
|
|
| 82 |
+ $backgroundStyle .= 'background-repeat: ' . $this->eSM_slick_bgRepeat . ';'; |
|
| 83 |
+ } |
|
| 84 |
+ |
|
| 85 |
+ $this->Template->backgroundStyle = $backgroundStyle.' }'; |
|
| 86 |
+ |
|
| 87 |
+ // Responsive handling |
|
| 88 |
+ if ($this->Template->picture['sources'] && is_array($this->Template->picture['sources'])) |
|
| 89 |
+ {
|
|
| 90 |
+ $backgroundStyleResponsive = ''; |
|
| 91 |
+ foreach ($this->Template->picture['sources'] as $srcSet) |
|
| 92 |
+ {
|
|
| 93 |
+ $srcSetStyle = '.slide_'.$this->id.' .slick-slider-slide-image { background-image: url(\''.$srcSet['src'].'\'); }';
|
|
| 94 |
+ |
|
| 95 |
+ if ($this->eSM_slick_minHeight) {
|
|
| 96 |
+ if ($this->eSM_slick_bgSize && $this->eSM_slick_bgSize == 'auto auto') {
|
|
| 97 |
+ $minHeight = $srcSet['height'] . 'px'; |
|
| 98 |
+ } else |
|
| 99 |
+ {
|
|
| 100 |
+ $minHeight = round($srcSet['height'] / $srcSet['width'] * 100) . '%'; |
|
| 101 |
+ } |
|
| 102 |
+ $srcSetStyle .= '.slide_'.$this->id.':before { content: ""; display: block; float: left; padding-top: '.$minHeight.'; }';
|
|
| 103 |
+ } |
|
| 104 |
+ |
|
| 105 |
+ $backgroundStyleResponsive .= '@media screen and '.$srcSet['media'].' { '.$srcSetStyle.' }';
|
|
| 106 |
+ } |
|
| 107 |
+ $this->Template->backgroundStyleResponsive = $backgroundStyleResponsive; |
|
| 108 |
+ } |
|
| 109 |
+ |
|
| 110 |
+ } |
|
| 83 | 111 |
} |
| 84 | 112 |
|
| 85 | 113 |
} |
| ... | ... |
@@ -3,10 +3,12 @@ |
| 3 | 3 |
|
| 4 | 4 |
<div class="slick-slider-slide slide_<?= $this->id ?>"> |
| 5 | 5 |
<?php if ($this->src): ?> |
| 6 |
- <div class="slick-slider-slide-image" style="<?= $this->backgroundStyle ?>"></div> |
|
| 7 |
- <?php if ($this->minHeight): ?> |
|
| 8 |
- <style>.slide_<?= $this->id ?>:before { content: ""; display: block; padding-top: <?= $this->minHeight ?>; float: left; }</style>
|
|
| 9 |
- <?php endif; ?> |
|
| 6 |
+ <div class="slick-slider-slide-image"></div> |
|
| 7 |
+ |
|
| 8 |
+ <style> |
|
| 9 |
+ <?= $this->backgroundStyle ?> |
|
| 10 |
+ <?php if ($this->backgroundStyleResponsive): ?><?= $this->backgroundStyleResponsive ?><?php endif; ?> |
|
| 11 |
+ </style> |
|
| 10 | 12 |
<?php endif; ?> |
| 11 | 13 |
<div class="slide-content"> |
| 12 | 14 |
|
| ... | ... |
@@ -1,13 +1,14 @@ |
| 1 |
-<?php //$this->dumpTemplateVars(); ?> |
|
| 2 | 1 |
<?php $this->block('content'); ?>
|
| 3 | 2 |
|
| 4 |
- <div class="slick-slider-slide slide_<?= $this->id ?>"> |
|
| 5 |
- <?php if ($this->eSM_addImage && $this->src): ?> |
|
| 6 |
- <div class="slick-slider-slide-image" style="<?= $this->backgroundStyle ?>"></div> |
|
| 7 |
- <?php if ($this->minHeight): ?> |
|
| 8 |
- <style>.slide_<?= $this->id ?>:before { content: ""; display: block; padding-top: <?= $this->minHeight ?>; float: left; }</style>
|
|
| 9 |
- <?php endif; ?> |
|
| 10 |
- <?php endif; ?> |
|
| 11 |
- <div class="slide-content"> |
|
| 3 |
+<div class="slick-slider-slide slide_<?= $this->id ?>"> |
|
| 4 |
+ <?php if ($this->eSM_addImage && $this->src): ?> |
|
| 5 |
+ <div class="slick-slider-slide-image"></div> |
|
| 6 |
+ |
|
| 7 |
+ <style> |
|
| 8 |
+ <?= $this->backgroundStyle ?> |
|
| 9 |
+ <?php if ($this->backgroundStyleResponsive): ?><?= $this->backgroundStyleResponsive ?><?php endif; ?> |
|
| 10 |
+ </style> |
|
| 11 |
+ <?php endif; ?> |
|
| 12 |
+ <div class="slide-content"> |
|
| 12 | 13 |
|
| 13 | 14 |
<?php $this->endblock(); ?> |