How do I set profile image as first letters of first and last name?

Question

Basically, i'm working on user registration system. which i'm doing front-end using ReactJS. for registered users there is an option to add images for their profiles. when there is no images for the profiles, profile image should be contain the first letter from the first and second name for the profile picture like google plus do.

please find the sample image below.

Looking forward a way to do this.. better if there are inbuilt plugin or library to do this.

Answer 1

The css option added in JsFiddle

• You just create a div inside div.
• Put the inner one in the complete center with line-height the same as container's size and text-align: center.

You can also have the text set by Javascript if needed.
HTML

<div id="container">
  <div id="name">
   </div>
</div>

CSS

#container {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background: #333;
}
#name {
  width: 100%;
  text-align: center;
  color: white;
  font-size: 36px;
  line-height: 100px;
}

Optional Javascript

  var name = "Adam";
  var lastname = "Sandler";
  var initials = name.charAt(0)+""+lastname.charAt(0);
  document.getElementById("name").innerHTML = initials;

Answer 2

I have assumed that you have access to the first name and last name. Using that, I have written this code which will take the first letter from First name and last name and apply to your profile image.

$(document).ready(function(){
  var firstName = $('#firstName').text();
  var lastName = $('#lastName').text();
  var intials = $('#firstName').text().charAt(0) + $('#lastName').text().charAt(0);
  var profileImage = $('#profileImage').text(intials);
});

#profileImage {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #512DA8;
  font-size: 35px;
  color: #fff;
  text-align: center;
  line-height: 150px;
  margin: 20px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="firstName">Kalpesh</span>
<span id="lastName">Singh</span>
<div id="profileImage"></div>