| 1: | <?php |
| 2: | |
| 3: | class HeaderImage extends \Sphp\tools\Component{ |
| 4: | private static $renderon = true; |
| 5: | |
| 6: | protected function onrender() { |
| 7: | if(self::$renderon){ |
| 8: | self::$renderon = false; |
| 9: | $this->tagName = 'section'; |
| 10: | $this->element->appendAttribute('class', 'hero'); |
| 11: | if(! $this->element->hasAttribute('src')) $this->src = SphpBase::sphp_settings()->comp_uikit_res_path . '/masters/default/assets/img/hero-bg.jpg'; |
| 12: | $this->element->setInnerPreTag('<img src="'. $this->src .'" data-aos="fade-in" /><div class="container">'); |
| 13: | $this->element->setInnerPostTag('</div>'); |
| 14: | $strcs1 = ""; |
| 15: | if($this->styler == 1){ |
| 16: | $strcs1 = '.hero .container { |
| 17: | position: relative; |
| 18: | z-index: 3; |
| 19: | color: #FFFFFF; |
| 20: | } |
| 21: | .hero { |
| 22: | --default-color: #ffffff; |
| 23: | --default-color-rgb: 255, 255, 255; |
| 24: | --background-color-rgb: 0, 0, 0; |
| 25: | --background-color: 0, 0, 0; |
| 26: | width: 100%; |
| 27: | min-height: 30vh; |
| 28: | padding: 160px 0 80px 0; |
| 29: | display: flex; |
| 30: | align-items: center; |
| 31: | justify-content: center; |
| 32: | } |
| 33: | .hero img { |
| 34: | position: absolute; |
| 35: | inset: 0; |
| 36: | display: block; |
| 37: | width: 100%; |
| 38: | height: 30%; |
| 39: | -o-object-fit: cover; |
| 40: | object-fit: cover; |
| 41: | z-index: 1; |
| 42: | } |
| 43: | .hero:before { |
| 44: | content: ""; |
| 45: | background: rgba(var(--background-color-rgb), 0.5); |
| 46: | position: absolute; |
| 47: | inset: 0; |
| 48: | z-index: 2; |
| 49: | height: 30%; |
| 50: | } |
| 51: | section, .section { |
| 52: | color: var(--default-color); |
| 53: | background-color: var(--background-color); |
| 54: | padding: 60px 0; |
| 55: | overflow: clip; |
| 56: | } |
| 57: | '; |
| 58: | |
| 59: | }else{ |
| 60: | $strcs1 = '.hero .container { |
| 61: | position: relative; |
| 62: | z-index: 3; |
| 63: | color: #FFFFFF; |
| 64: | } |
| 65: | .hero { |
| 66: | --default-color: #ffffff; |
| 67: | --default-color-rgb: 255, 255, 255; |
| 68: | --background-color-rgb: 0, 0, 0; |
| 69: | --background-color: 0, 0, 0; |
| 70: | width: 100%; |
| 71: | min-height: 100vh; |
| 72: | padding: 160px 0 80px 0; |
| 73: | display: flex; |
| 74: | align-items: center; |
| 75: | justify-content: center; |
| 76: | } |
| 77: | .hero img { |
| 78: | position: absolute; |
| 79: | inset: 0; |
| 80: | display: block; |
| 81: | width: 100%; |
| 82: | height: 100%; |
| 83: | -o-object-fit: cover; |
| 84: | object-fit: cover; |
| 85: | z-index: 1; |
| 86: | } |
| 87: | .hero:before { |
| 88: | content: ""; |
| 89: | background: rgba(var(--background-color-rgb), 0.5); |
| 90: | position: absolute; |
| 91: | inset: 0; |
| 92: | z-index: 2; |
| 93: | } |
| 94: | section, .section { |
| 95: | color: var(--default-color); |
| 96: | background-color: var(--background-color); |
| 97: | padding: 60px 0; |
| 98: | overflow: clip; |
| 99: | } |
| 100: | '; |
| 101: | } |
| 102: | addHeaderCSS('headerimage',$strcs1); |
| 103: | }else{ |
| 104: | $this->fu_unsetrender(); |
| 105: | } |
| 106: | } |
| 107: | } |
| 108: |