<?php $GLOBALS['TL_CSS'][] = \Contao\Config::get('uploadPath').'/cto_layout/css/customelements/ce_bgimage.css|static';if($this->field('parallax')->value()){ $GLOBALS['SEO_SCRIPTS_FILE'][] = \Contao\Config::get('uploadPath').'/cto_layout/scripts/parallax/jquery.stellar.min.js|static';}?><!-- SEO-SCRIPT-START --><script><?php if($this->field('fullscreen-image')->value()): ?>function bgImageFullscreen_<?php echo $this->id; ?>() { var windowHeight = jQuery(window).height(); var mobHeaderHeight = jQuery('.header.cloned').height(); if (jQuery(window).width() < 768) { var setNewHeightMobile = windowHeight - mobHeaderHeight; jQuery('.ce_bgimage_<?php echo $this->id; ?>').height(setNewHeightMobile); } else { <?php if($this->field('offset')->value()): ?> var offsetHeight_<?php echo $this->id; ?> = jQuery('<?php echo $this->field('offset')->value(); ?>').height(); var setNewHeight_<?php echo $this->id; ?> = windowHeight - offsetHeight_<?php echo $this->id; ?>; jQuery('.ce_bgimage_<?php echo $this->id; ?>').height(setNewHeight_<?php echo $this->id; ?>); <?php else: ?> jQuery('.ce_bgimage_<?php echo $this->id; ?>').height(windowHeight); <?php endif; ?> }};jQuery(document).ready(function(){ if( jQuery('body').hasClass('mobile') ) { setTimeout(function() { bgImageFullscreen_<?php echo $this->id; ?>() }, 100); } else { bgImageFullscreen_<?php echo $this->id; ?>(); } });jQuery(window).on("resize", function(){ bgImageFullscreen_<?php echo $this->id; ?>();});<?php endif; ?>function oversize_<?php echo $this->id; ?>() { var contentHeight_<?php echo $this->id; ?> = jQuery('.ce_bgimage_<?php echo $this->id; ?> .ce_bgimage-inside').height(); var availableHeight = jQuery(window).height() - 100; if (contentHeight_<?php echo $this->id; ?> > availableHeight) { jQuery('.ce_bgimage_<?php echo $this->id; ?>').addClass('oversize'); } else { jQuery('.ce_bgimage_<?php echo $this->id; ?>').removeClass('oversize'); }};jQuery(document).ready(function(){ oversize_<?php echo $this->id; ?>();});jQuery(window).on("resize", function(){ oversize_<?php echo $this->id; ?>();});</script><!-- SEO-SCRIPT-STOP --><?phpif($this->field('mobile_height')->value()){ $GLOBALS['TL_HEAD'][] = "<style>@media only screen and (max-width: 767px) {.ce_bgimage_" . $this->id . " {height:" . $this->field('mobile_height')->value() . "px!important;}}</style>";}?><?php // responsive images$objFile = \Contao\FilesModel::findByPk( $this->field('image')->value() );if( $objFile !== null ){ $objPicture = \Contao\Picture::create($objFile->path,\Contao\StringUtil::deserialize( $this->field('image')->option('size') ) ); $arrMediaQueries = array(); if( $objPicture !== null ) { $arrPicture = $objPicture->getTemplateData(); foreach($arrPicture['sources'] ?: array() as $data) { if( strlen($data['media']) < 1 ) { continue; } $arrMediaQueries[] = '@media '.$data['media'].' { .ce_bgimage_'.$this->id.' > .ce_bgimage-image { background-image:url('.$data['src'].') !important; } }'; } } if( count($arrMediaQueries) > 0 ) { $GLOBALS['TL_HEAD'][] = '<style>'.implode("\n",$arrMediaQueries).'</style>'; }}?><?php $offset_color = '';if( $this->field('offset_color')->value() ){ // compile color $color = $this->field('offset_color')->attribute()->compileColor( $this->field('offset_color')->value() ); $offset_color = $color->rgba;}$bg_owncolor = '';if( $this->field('bg_owncolor')->value() ){ // compile color $color = $this->field('bg_owncolor')->attribute()->compileColor( $this->field('bg_owncolor')->value() ); $bg_owncolor = $color->rgba;}?><div class="<?php echo $this->class; ?> block ce_bgimage_<?php echo $this->id; ?> boxed-content <?php echo $this->field('schema')->value(); ?> <?php echo $this->field('bg_color')->value(); ?><?php if($this->field('parallax')->value()): ?> parallax<?php endif; ?><?php if($this->field('invert')->value()): ?> color-white<?php endif; ?><?php if($this->field('fullscreen-image')->value()): ?> fullscreen-image<?php endif; ?><?php if($this->field('bg_contain')->value()): ?> bg_contain<?php endif; ?><?php if($this->field('vertical_centered')->value()): ?> vertical_centered<?php endif; ?><?php if($this->field('bg_position')->value()): ?> <?php echo $this->field('bg_position')->value(); ?><?php endif; ?><?php if($this->field('hide_mobile')->value()): ?> bg-hide-mobile<?php endif; ?><?php if($this->field('max_width')->value()): ?> <?php echo $this->field('max_width')->value(); ?><?php endif; ?>" style="<?php if($this->field('height')->value()): ?> height:<?php echo $this->field('height')->value(); ?>px;<?php endif; ?><?php if($this->field('bg_owncolor')->value()): ?>background-color:<?php echo $bg_owncolor; ?>;<?php endif; ?><?php if ($this->style): ?><?php echo $this->style; ?><?php endif; ?>"<?php echo $this->cssID; ?>> <?php if($this->field('image')->value()): ?> <div class="ce_bgimage-image" style="<?php if($this->field('image')->value()): ?>background-image: url(<?php echo $this->field('image')->generate(); ?>);<?php endif; ?>"<?php if($this->field('parallax')->value()): ?> data-stellar-background-ratio="0.1" data-stellar-offset-parent="true"<?php endif; ?>></div> <?php endif; ?> <div class="ce_bgimage-outer"> <?php if($this->field('offset_layer')->value() != 'no-offset-layer'): ?><div class="offset_layer <?php echo $this->field('offset_layer')->value(); ?>" style="background-color:<?= $offset_color; ?>;height:<?php echo $this->field('offset_height')->value(); ?>%"></div><?php endif; ?> <div class="ce_bgimage-inside contentwrap<?php if($this->field('padding_top_class')->value()): ?> <?php echo $this->field('padding_top_class')->value(); ?><?php endif; ?><?php if($this->field('padding_bottom_class')->value()): ?> <?php echo $this->field('padding_bottom_class')->value(); ?><?php endif; ?>"> <?php if($this->field('schema')->value() != 'img-as-bg'): ?><div class="mobile_image" style="display: none"><?php echo $this->field('image')->html(); ?></div><?php endif; ?>