Blur half of "bb-cover-photo"

[Tobias]

Hi,

I’m trying to blur half/part of the “bb-cover-photo” (BuddyPress User background image).
So idea wise like this: http://jsfiddle.net/Lmccn0vw/2/

In member-header.php my code is this:

[...]
<?php do_action( 'bp_before_member_header' ); ?>

<?php
	//output cover photo.
	echo buddyboss_cover_photo("user",bp_displayed_user_id());
?>

<div class="outerblur">
	<div class="testblur">
		<?php
			//output cover photo.
			echo buddyboss_cover_photo("user",bp_displayed_user_id());
		?>
	</div>
</div>

<div id="item-header-cover" class="table">

[...]

The CSS like this (already messed up by playing around):

	.outerblur {
		float: right;
		width: 400px;
	}
	
	.testblur .bb-cover-photo {
		overflow: hidden;
	}
	.testblur .bb-cover-photo div.holder {
		background-position: center right !important;
		-webkit-filter: blur(5px);
		-moz-filter: blur(5px);
		-o-filter: blur(5px);
		-ms-filter: blur(5px);
		filter: blur(5px);
		filter: blur(5px);
		height: 100%;
		right: 2px;
		float: right;
		position: absolute;		
	}

My problem is, that the blured background won’t align to “background-position: center right;“. It stays aligned to “center left”.

Also echo buddyboss_cover_photo("user",bp_displayed_user_id()); Causes that I now have two “Update Cover Photo”-icons/buttons. Do I just have to echo another “shortcode” for the cover photo?

Any ideas?
Thanks!

[Alyssa]

@snikay this is custom development so I can’t support this but I can help you with the BuddyBoss function. Instead of calling the cover photo again use this code:

$cover_photo = buddyboss_cover_photo_get("user",bp_displayed_user_id());
$actual_photo = wp_get_attachment_image_src($cover_photo["attachment"],"full");
echo $actual_photo[0];

You could also try this for background-position:

background-position-x: 100%;
  background-position-y: 50%;

[Tobias]

Thanks TJ! So, now my code looks like this:

<div class="outerblur">
	<div class="testblur">
		<?php
			//output cover photo without upload button
			$cover_photo = buddyboss_cover_photo_get($object,$object_id);
			$actual_photo = wp_get_attachment_image_src($cover_photo["attachment"],"full");
			echo $actual_photo[0];
		?>
	</div>
</div>

But I can’t see any image placed into the code (see screenshot of firefox developer info):

[Alyssa]

@snikay I thought you would replace object and object_id, I corrected the code above.

[Tobias]

Ah, thanks – works! 🙂

[Alyssa]

Great news!