Profile photo click to enlarge

  • drgozen

    (@drgozen)


    1 week ago

    Hello,

    In the user’s profile page, profile photo is clickable but links to the user’s profile (same page).

    I want to make it click to enlarge the profile photo. So if someone clicks on the profile photo, it will show the full-size photo. Can you help me with this?

    Thank you.

    • This topic was modified 1 week ago by drgozen.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Support yuriinalivaiko

    (@yuriinalivaiko)

    Hello @drgozen

    Try this code snippet. You can add it to the functions.php file in the theme.

    /**
     * If someone clicks on the profile photo in the user’s profile page, it will show the full-size photo.
     */
    remove_action( 'um_profile_header', 'um_profile_header', 9 );
    add_action( 'um_profile_header', 'um_profile_header__', 9 );
    function um_profile_header__( $args ){
    	if ( um_is_on_edit_profile() ) {
    		return um_profile_header( $args );
    	}

    	ob_start();
    	um_profile_header( $args );
    	$profile_header_html = ob_get_clean();

    	$search  = 'class="um-profile-photo-img"';
    	$replace = 'class="um-profile-photo-img um-photo-modal"';
    	if ( str_contains( $profile_header_html, $search ) ) {
    		$user_dir_url      = UM()->uploader()->get_upload_user_base_url( um_user( 'ID' ) );
    		$profile_photo     = um_profile( 'profile_photo' );
    		$profile_photo_url = "$user_dir_url/$profile_photo";
    		$data_src_attr     = sprintf( ' data-src="%s"', $profile_photo_url );
    		$replace          .= $data_src_attr;
    		$profile_header_html = str_replace( $search, $replace, $profile_header_html );
    	}

    	echo $profile_header_html;
    }

    You should see the original full-size profile photo in the popup on click. See expected result: https://prnt.sc/u6t5ZfQfNpIl

    This works on the profile “view” mode. The profile “edit” mode has built-in functionality on this click that we should not replace.

    Regards

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.