Untitled
plain_text
a month ago
3.7 kB
3
Indexable
Never
<?php if(!$this->getStatus()) return; $selector = 'alo-content-'.uniqid(); $slider = $this->getSlider(); if(!count($slider)) return; $notLazyload = (int) $this->getData('exclude_lazyload_visible'); if($notLazyload) $notLazyload = (int) $this->getData('visible'); $imageAsBackground = (int) $this->getData('background-image'); ?> <style type="text/css">.magicslider-caption {display: none;} .magicslider-caption.mobile.desktop{display: block;}</style> <div class="<?php echo $selector ?>" data-use-intersection-observer='<?php echo $this->getData('useIntersectionObserver')?>' > <div class="magicslider grid-slider <?php echo $this->getData('class')?>" <?php foreach ($this->getFrontendCfg() as $opt) :?> data-<?php echo $opt ?>='<?php echo $this->getData($opt) ?>' <?php endforeach;?> data-lazy-load="ondemand" > <?php foreach ($slider as $image) :?> <div class="item <?php echo $image->getmediaType() ?>" <?php echo ($image['video_url']) ? 'data-video="'. $image['video_url'] .'"' : ''; ?> > <?php $classImage = $this->getData('image-class'); if($notLazyload){ $classImage .= ' loaded'; $notLazyload--; } if($imageAsBackground){ $classImage .= ' background-image'; } ?> <a href="<?php echo isset($image['link']) ? $image['link'] : '#'; ?>"> <picture> <?php $img = $image->getMobile(); if($img){ $mWidth = $img->getWidth(); echo '<source media="(min-width: ' . ++ $mWidth . 'px)" srcset=" ' . $image->getUrl() . ' ">'; } ?> <img class="img-responsive <?php /* @escapeNotVerified */ echo $classImage ?>" src="<?php echo $img ? $img->getUrl() : $image->getUrl() ?>" alt="<?php echo __($image->getLabel()) ?>" title="<?php echo __($image->getLabel()) ?>" width="<?php echo $image->getWidth() ?>" height="<?php echo $image->getHeight() ?>" /> </picture> </a> <?php if ($img) { $classes = 'caption-' . uniqid(); $width = $img->getWidth(); echo isset($img['caption']) ? '<div class="magicslider-caption mobile ' . $classes . '" >' . $img['caption'] . '</div>' : ''; echo isset($image['caption']) ? '<div class="magicslider-caption desktop ' . $classes . '" >' . $image['caption'] . '</div>' : ''; $style = '<style>'; $style .= '@media only screen and (max-width: ' . $width . 'px){ .mobile.' .$classes . '{display:block}}'; $style .= '@media only screen and (min-width: ' . ++$width . 'px){ .desktop.' . $classes . ' {display:block}}'; $style .= '</style>'; echo $style; } else { echo isset($image['caption']) ? '<div class="magicslider-caption mobile desktop" >' . $image['caption'] . '</div>' : ''; } ?> </div> <?php endforeach ?> </div> </div> <script type="text/javascript"> require(['jquery','gridSlider'], function($, gridSlider){ var el = $('.<?php echo $selector ?>'); if(el.length) el.gridSlider(el.data()); }); </script>