How to set Gravatar as background image in WordPress?

I am working on a custom WordPress theme and as per design requirements, I have to set the Author Gravatar in the background of a image.

I have tried using get_avatar_url() with wp_get_attachment_image_src as below, but could not achieve:

Read More

PHP in-line code:

<?php $thumb = wp_get_attachment_image_src(get_avatar_url($post->ID), '80'); ?>

<div class="author" style="background-image: url('<?php echo $thumb[0]; ?>')"></div>

CSS:

.author {
width:120px;
height:120px;
background: no-repeat center;
}

How do I achieve this ?

Related posts

2 comments

  1. I have found the answer in here (https://stackoverflow.com/a/29860844/3725816):

    function my_gravatar_url() { // Get user email
    $user_email = get_the_author_meta('user_email');
    // Convert email into md5 hash and set image size to 80 px
    $user_gravatar_url = 'http://www.gravatar.com/avatar/' . md5($user_email) . '?s=120';
    echo $user_gravatar_url;
    }
    
    
    <div class="author" style="background: url('<?php echo my_gravatar_url(); ?>') center center no-repeat; top: 50%; left: 50%;">
    </div>           
    
  2. Here’s the solution. It’s working fine in my website.

    <div 
        style = "background-image: 
                    url('<?php echo get_avatar_url(get_the_author_meta('ID'), array("size"=>450)); ?>'); 
                height: 450px; 
                width:450px">
    </div>
    

Comments are closed.