# background-block/0.09/build/render.php

Section Builder with Backgrounds – Customize with Color, Gradient, Image and Parallax., version 0.09. 246 lines.

- Page: https://pluginprobe.com/plugins/background-block/0.09/code/build/render.php
- Raw: https://pluginprobe.com/plugins/background-block/0.09/raw/build/render.php
- Modified: 2024-09-25T16:32:02+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/background-block/0.09/code/build/render.php#L10-L20`.

```php
<?php
$innerContent = $content;

if( !function_exists( 'evbbGetBoxValues' ) ){
	function evbbGetBoxValues( $val ) {
		return implode( ' ', array_values( $val ) );
	}
}

if( !function_exists( 'evbbStyle' ) ){
	function evbbStyle( $attributes, $id ) {
		extract( $attributes );
		extract( $background['desktop'] ?? [] );

		$plxSpeed = $wrapper['animation']['parallax']['speed'] ?? 1;

		// Selectors
		$mainSl = "#$id";
		$backgroundSl = "$mainSl .evbBackground";
		$contentWrapperSl = "$mainSl .backgroundContentWrapper";
		$contentSl = "$mainSl .backgroundContent";

		// Image Destructure
		$url = $image['url'] ?? '';
		$position = $image['position'] ?? '';
		$attachment = $image['attachment'] ?? '';
		$repeat = $image['repeat'] ?? '';
		$size = $image['size'] ?? '';

		// Wrapper CSS
		$wMHeight = $wrapper['minHeight'];
		$wDPadding = evbbGetBoxValues( $wrapper['padding']['desktop'] ?? [] );
		$wTPadding = evbbGetBoxValues( $wrapper['padding']['tablet'] ?? [] );
		$wMPadding = evbbGetBoxValues( $wrapper['padding']['mobile'] ?? [] );

		// Shape CSS
		$tShape = $shape['top'] ?? [];
		$bShape = $shape['bottom'] ?? [];

		$tWidth = $tShape['width'] ?? '100%';
		$tHeight = $tShape['height'] ?? '150px';
		$tColor = $tShape['color'] ?? '#fff';

		$bWidth = $bShape['width'] ?? '100%';
		$bHeight = $bShape['height'] ?? '150px';
		$bColor = $bShape['color'] ?? '#fff';

		// Content CSS
		$contentBG = $content['background'];
		$cVAlign = $content['align']['vertical'];
		$cHAlign = $content['align']['horizontal'] ?? 'center';
		$cTAlign = $content['align']['text'];
		$cDMaxW = $content['maxWidth']['desktop'] ?? '100%';
		$cTMaxW = $content['maxWidth']['tablet'] ?? '100%';
		$cMMaxW = $content['maxWidth']['mobile'] ?? '100%';
		$cDPadding = evbbGetBoxValues( $content['padding']['desktop'] ?? [] );
		$cTPadding = evbbGetBoxValues( $content['padding']['tablet'] ?? [] );
		$cMPadding = evbbGetBoxValues( $content['padding']['mobile'] ?? [] );

		$bgStyles = 'image' === $type ? "url($url)" :
			('gradient' === $type ? $gradient : $color);

		$bgImgStyles = 'image' === $type ? "
			background-position: $position;
			background-attachment: $attachment;
			background-repeat: $repeat;
			background-size: $size;
		" : '';

		$styles = "$mainSl {
			min-height: $wMHeight;
			padding: $wDPadding;
		}
		$mainSl.scroll-parallax .evbBackground{
			height: calc( 100% + ( 100% * $plxSpeed ) );
		}
		$backgroundSl {
			background: $bgStyles;
			$bgImgStyles
		}
		$mainSl .evbShape.top{
			width: $tWidth;
			height: $tHeight;
			color: $tColor;
		}
		$mainSl .evbShape.bottom{
			width: $bWidth;
			height: $bHeight;
			color: $bColor;
		}

		$contentWrapperSl{
			align-items: $cVAlign;
			justify-content: $cHAlign;
			$contentBG
			padding: $cDPadding;
		}
		$contentSl {
			max-width: $cDMaxW;
			text-align: $cTAlign;
		}
		@media (min-width: 481px) and (max-width: 960px) {
			$mainSl {
				padding: $wTPadding;
			}
			$contentWrapperSl{
				padding: $cTPadding;
			}
			$contentSl {
				max-width: $cTMaxW;
			}
		}
		@media (max-width: 480px) {
			$mainSl {
				padding: $wMPadding;
			}
			$contentWrapperSl{
				padding: $cMPadding;
			}
			$contentSl {
				max-width: $cMMaxW;
			}
		}";

		ob_start(); ?>
		<style><?php echo esc_html( wp_strip_all_tags( $styles ) ); ?></style>
		<?php return ob_get_clean();
	}
}

$id = wp_unique_id( 'evbBackground-' );
extract( $attributes );

$aniType = $wrapper['animation']['type'] ?? 'none';

global $allowedposttags;
$allowedHTML = wp_parse_args( [
	'style' => [],
	'svg' => [
		'xmlns' => [],
		'viewbox' => [],
		'width' => [],
		'height' => [],
		'fill' => [],
		'class' => [],
	],
	'path' => [
		'd' => [],
		'fill' => [],
		'stroke' => [],
		'stroke-width' => [],
	],
	'rect' => [
		'x' => [],
		'y' => [],
		'width' => [],
		'height' => [],
		'fill' => [],
		'stroke' => [],
		'stroke-width' => [],
	],
	'circle' => [
		'cx' => [],
		'cy' => [],
		'r' => [],
		'fill' => [],
		'stroke' => [],
		'stroke-width' => [],
	],
	'ellipse' => [
		'cx' => [],
		'cy' => [],
		'rx' => [],
		'ry' => [],
		'fill' => [],
		'stroke' => [],
		'stroke-width' => [],
	],
	'line' => [
		'x1' => [],
		'y1' => [],
		'x2' => [],
		'y2' => [],
		'stroke' => [],
		'stroke-width' => [],
	],
	'polyline' => [
		'points' => [],
		'fill' => [],
		'stroke' => [],
		'stroke-width' => [],
	],
	'polygon' => [
		'points' => [],
		'fill' => [],
		'stroke' => [],
		'stroke-width' => [],
	],
	'g' => [
		'fill' => [],
		'transform' => [],
	],
	'title' => [],
	'desc' => [],
	'iframe' => [
		'src' => [],
		'width' => [],
		'height' => [],
		'frameborder' => [],
		'allowfullscreen' => [],
	],
], $allowedposttags );

// Shape
$tShape = $shape['top'] ?? [];
$bShape = $shape['bottom'] ?? [];

$tType = $tShape['type'] ?? null;
$tSVG = $tShape['svg'] ?? null;
$tFlip = $tShape['flip'] ?? false;
$tInvert = $tShape['invert'] ?? false;

$bType = $bShape['type'] ?? null;
$bSVG = $bShape['svg'] ?? null;
$bFlip = $bShape['flip'] ?? false;
$bInvert = $bShape['invert'] ?? false;
?>
<div <?php echo get_block_wrapper_attributes([ 'class' => "align$align scroll-$aniType" ]); ?> id='<?php echo esc_attr( $id ); ?>' data-attributes='<?php echo esc_attr( wp_json_encode( $attributes ) ); ?>'>
	<?php if ( $tType && $tSVG ): ?>
		<div class="evbShape top <?php echo $tFlip ? 'flip' : '' ?> <?php echo $tInvert ? 'invert' : '' ?>" data-svg='<?php echo esc_attr( wp_json_encode( $tSVG ) ); ?>'></div>
	<?php endif; ?>

	<?php echo wp_kses( evbbStyle( $attributes, $id ), [ 'style' => [] ] ); ?>

	<div class='evbBackground'></div>

	<div class='backgroundContentWrapper'>
		<div class='backgroundContent'>
			<?php echo wp_kses( $innerContent, $allowedHTML ); ?>
		</div>
	</div>

	<?php if ( $bType && $bSVG ): ?>
		<div class="evbShape bottom <?php echo $bFlip ? 'flip' : '' ?> <?php echo $bInvert ? 'invert' : '' ?>" data-svg='<?php echo esc_attr( wp_json_encode( $bSVG ) ); ?>'></div>
	<?php endif; ?>
</div>
```