templates/layout/customelement_bgimage_start.html5 line 82

Open in your IDE?
  1. <script>
  2. /* <![CDATA[ */
  3. <?php if($this->field('fullscreen-image')->value()): ?>
  5. function bgImageFullscreen_<?php echo $this->id; ?>() {
  6.     var windowHeight = jQuery(window).height();
  7.     var mobHeaderHeight = jQuery('.header.cloned').height();
  9.     if (jQuery(window).width() < 768)
  10.     {
  11.         var setNewHeightMobile = windowHeight - mobHeaderHeight;
  12.         jQuery('.ce_bgimage_<?php echo $this->id; ?>').height(setNewHeightMobile);
  14.     } else {
  15.         <?php if($this->field('offset')->value()): ?>
  16.             var offsetHeight_<?php echo $this->id; ?> = jQuery('<?php echo $this->field('offset')->value(); ?>').height();
  17.             var setNewHeight_<?php echo $this->id; ?> = windowHeight - offsetHeight_<?php echo $this->id; ?>;
  18.             jQuery('.ce_bgimage_<?php echo $this->id; ?>').height(setNewHeight_<?php echo $this->id; ?>);
  19.         <?php else: ?>
  20.             jQuery('.ce_bgimage_<?php echo $this->id; ?>').height(windowHeight);
  21.         <?php endif; ?>
  22.     }
  23. };
  26. jQuery(document).ready(function()
  27. {
  28.     if( jQuery('body').hasClass('mobile') )
  29.     {
  30.         setTimeout(function() 
  31.         { 
  32.             bgImageFullscreen_<?php echo $this->id; ?>() 
  33.         }, 100);    
  34.     }
  35.     else
  36.     {
  37.         bgImageFullscreen_<?php echo $this->id; ?>();
  38.     }        
  39.     
  40. });
  42. jQuery(window).on("resize", function(){
  43.     bgImageFullscreen_<?php echo $this->id; ?>();
  44. });
  46. <?php endif; ?>
  48. function oversize_<?php echo $this->id; ?>() {
  50.     var contentHeight_<?php echo $this->id; ?> = jQuery('.ce_bgimage_<?php echo $this->id; ?> .ce_bgimage-inside').height();
  51.     var availableHeight = jQuery(window).height() - 100;
  53.     if (contentHeight_<?php echo $this->id; ?> > availableHeight)
  54.     {
  55.         jQuery('.ce_bgimage_<?php echo $this->id; ?>').addClass('oversize');
  57.     } else {
  58.         jQuery('.ce_bgimage_<?php echo $this->id; ?>').removeClass('oversize');
  59.     }
  60. };
  62. jQuery(document).ready(function(){
  63.     oversize_<?php echo $this->id; ?>();
  64. });
  66. jQuery(window).on("resize", function(){
  67.     oversize_<?php echo $this->id; ?>();
  68. });
  69. /* ]]> */
  70. </script>
  71. <?php
  72. if($this->field('mobile_height')->value())
  73. {
  74.     $GLOBALS['TL_HEAD'][] = "<style>@media only screen and (max-width: 767px) {.ce_bgimage_" . $this->id  . " {height:" . $this->field('mobile_height')->value() . "px!important;}}</style>";
  75. }
  76. ?>
  78. <?php // responsive images
  79. $objFile = \Contao\FilesModel::findByPk( $this->field('image')->value() );
  80. if( $objFile !== null )
  81. {
  82.     $objPicture = \Contao\Picture::create($objFile->path,deserialize( $this->field('image')->option('size') ) );
  83.     $arrMediaQueries = array();
  84.     if( $objPicture !== null )
  85.     {
  86.         $arrPicture = $objPicture->getTemplateData();
  88.         foreach($arrPicture['sources'] ?: array() as $data)
  89.         {
  90.             if( strlen($data['media']) < 1 )
  91.             {
  92.                 continue;
  93.             }
  94.             $arrMediaQueries[] = '@media ('.$data['media'].') { .ce_bgimage_'.$this->id.' .ce_bgimage-image { background-image:url('.$data['src'].') !important; } }';
  95.         }
  96.     }
  97.     if( count($arrMediaQueries) > 0 )
  98.     {
  99.         $GLOBALS['TL_HEAD'][] = '<style>'.implode("\n",$arrMediaQueries).'</style>';
  100.     }
  101. }
  102. ?>
  105. <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 $this->field('bg_owncolor')->html(); ?>;<?php endif; ?><?php if ($this->style): ?><?php echo $this->style; ?><?php endif; ?>"<?php echo $this->cssID; ?>>
  106. <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>
  107.     <div class="ce_bgimage-outer">
  108.     <?php if($this->field('offset_layer')->value() != 'no-offset-layer'): ?><div class="offset_layer <?php echo $this->field('offset_layer')->value(); ?>" style="background-color:<?php echo $this->field('offset_color')->html(); ?>;height:<?php echo $this->field('offset_height')->value(); ?>%"></div><?php endif; ?>
  109.         <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; ?>">
  110.             <?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; ?>