Какой селектор я бы использовал в CSS, чтобы сделать изображение профиля пользователя Buddypress круглым? - PullRequest
Новая
       103

Какой селектор я бы использовал в CSS, чтобы сделать изображение профиля пользователя Buddypress круглым?

0 голосов
/ 02 мая 2020

Я использую плагины поставщиков BuddyPress, woo-commerce и W C для создания моего последнего проекта WordPress.

Для каждого из моих поставщиков я хотел, чтобы их изображения профиля Buddypress отображались на каждом из перечисленных продуктов. для продажи, поэтому я добавил следующий код в мои функции. php file: 

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;
}

... и он сработал и теперь показывает изображение профиля BP пользователя рядом с его именем пользователя, рядом с "" продается по тексту, см. здесь:

https://prnt.sc/s9paz8

Но мне было просто интересно, можно ли сделать изображение округлым, используя CSS? Я попытался использовать следующий код в пользовательском разделе CSS для создания круга изображения, но он не работал, поэтому я думаю, что я использую неправильный селектор: 

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

Может кто-нибудь посоветовать, какой правильный селектор будет использовать для выбора изображения профиля BP, вот как это выглядит, когда я проверяю элемент с помощью Google chrome:

https://prnt.sc/s9pf8u

https://prnt.sc/s9pgat

Заранее спасибо,

1 Ответ

3 голосов
/ 02 мая 2020

вы можете использовать CSS свойство border-radius, чтобы сделать ваши изображения круглыми. Я нашел эту js скрипку для вас, посмотрите.

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

Редактировать: Вот демонстрационный код из вашего вопроса: 

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%;
}
...