BuddyBoss Home – Web Support Forums Themes Boss. theme Blur half of "bb-cover-photo"

Viewing 6 posts - 1 through 6 (of 6 total)
  • Question

    #43033
    @snikay

    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!

    Answers

    #43044

    Alyssa
    Participant
    @alyssa-buddyboss

    @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%;
    #43052
    @snikay

    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):

    #43116

    Alyssa
    Participant
    @alyssa-buddyboss

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

    #43137
    @snikay

    Ah, thanks – works! 🙂

    #43155

    Alyssa
    Participant
    @alyssa-buddyboss

    Great news!

Viewing 6 posts - 1 through 6 (of 6 total)
  • The question ‘Blur half of "bb-cover-photo"’ is closed to new replies.