WordPress : Quel sélecteur utiliserais-je en CSS pour arrondir l’image du profil d’un utilisateur Buddypress ?

J’utilise les plugins BuddyPress, woo-commerce et WC vendors pour créer mon dernier projet WordPress.

Pour chacun de mes vendeurs, je voulais que leurs photos de profil Buddypress soient affichées sur chacun de leurs produits mis en vente, j’ai donc ajouté le code suivant à mon fichier functions.php :

function change_wcvendors_cart_sold_by_meta_template( $meta_html, $product_id, $vendor_id ) {
    if( ! $vendor_id ) {
        return $meta_html;
    }

    if( ! class_exists( 'WCV_Vendors' ) || ! function_exists( 'bbp_get_user_profile_url' ) ) {
        return $meta_html;
    }

    $profile_url    = bbp_get_user_profile_url( $vendor_id );
    $profile_name   = WCV_Vendors::is_vendor( $vendor_id ) ? WCV_Vendors::get_vendor_sold_by( $vendor_id ) : bp_core_get_user_displayname( $vendor_id );
    $profile_image  = bp_core_fetch_avatar( 'html=false&item_id=' . $vendor_id );

    $meta_html  = '%1$s %2$s <a href="' . $profile_url . '" class="no-lightbox vendor-bp-link">
                        <img src="' . $profile_image . '" class="avatar user-' . $vendor_id . '-avatar avatar-50 photo" alt="Profile picture" width="45" height="45">
                        &nbsp; ' . $profile_name . '
                    </a>';
    return $meta_html;
}

… et cela a fonctionné et affiche maintenant l’image du profil BP de l’utilisateur à côté de son nom d’utilisateur, à côté du texte « vendu par », veuillez voir ici :

https://prnt.sc/s9paz8

Mais je me demandais simplement s’il était également possible de rendre l’image ronde en utilisant CSS? J’ai essayé d’utiliser le code suivant dans la section CSS personnalisée pour faire le cercle de l’image mais cela n’a pas fonctionné donc je pense que j’utilise le mauvais sélecteur :

. $profile_image {
    border-radius: 50px;
}

Quelqu’un pourrait-il indiquer quel serait le bon sélecteur à utiliser pour sélectionner l’image de profil BP, voici à quoi cela ressemble lorsque j’inspecte l’élément à l’aide de Google Chrome :

https://prnt.sc/s9pf8u

https://prnt.sc/s9pgat

Merci d’avance,

Solution n°1 trouvée

vous pouvez utiliser la propriété CSS border-radiuspour arrondir vos images. J’ai trouvé ce violon js pour que vous jetiez un oeil.

http://jsfiddle.net/2QyY3/2/

Edit : Voici le code de démonstration de votre question :

function change_wcvendors_cart_sold_by_meta_template( $meta_html, $product_id, $vendor_id ) {
    if( ! $vendor_id ) {
        return $meta_html;
    }

    if( ! class_exists( 'WCV_Vendors' ) || ! function_exists( 'bbp_get_user_profile_url' ) ) {
        return $meta_html;
    }

    $profile_url    = bbp_get_user_profile_url( $vendor_id );
    $profile_name   = WCV_Vendors::is_vendor( $vendor_id ) ? WCV_Vendors::get_vendor_sold_by( $vendor_id ) : bp_core_get_user_displayname( $vendor_id );
    $profile_image  = bp_core_fetch_avatar( 'html=false&item_id=' . $vendor_id );

    $meta_html  = '%1$s %2$s <a href="' . $profile_url . '" class="no-lightbox vendor-bp-link">
                        <img src="' . $profile_image . '" class="round-image avatar user-' . $vendor_id . '-avatar avatar-50 photo" alt="Profile picture" width="45" height="45">
                        &nbsp; ' . $profile_name . '
                    </a>';
    return $meta_html;
}

CSS :

.round-image{
 border-radius: 50%;
}