How to Set Profile Image as First Letters of First and Last Name

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

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>

how to get the first letter of the name and use it as a profile of the stores

You can change below line of your code :

<div id="profile"></div>

<div id="profile"><?php echo substr ($name , 0 ,1 ); ?></div>

This will pick the first character from name and show it at the time of rendering itself, so you will not require to do it in JS.

Display first and last names first letters in a div with only one input in JavaScript

Try something like this:

let text = ''
document.querySelector("input").addEventListener("input", () => {
  text = document.querySelector("input").value;

  let full_name = text.split(" ");
  let initials = full_name[0][0];
  if (text) {
    if (full_name.length >= 2 && full_name[1]) {
      initials += full_name[1][0];
    }
  } else {
    initials = '';
  }


  document.querySelector("div").innerHTML = initials;


});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
  </div>
  <input type="text">


</body>

</html>

Display an image in a post's details corresponding to the first letter of the user's name?

The simplest way to display images according to the user's first name is create a div instead of an image with rounded corners.

{% if post.author.profile.image %}
      <img src="{{ post.author.profile.image.url }}" class='logo3'/>
 {% else %}
 <div class="text-center align-center"  style="align-items:center !important;justify-content:center !important;background-color: black;width: 50px;height: 50px;border-radius: 50px">
     <p style="padding-top: 25%" >{{ post.author.username.0 }}</p>
 </div>
 {% endif %}

{{ post.author.username.0 }} will give you the first letter of username

Generate image having text with user's First Name and Last Name initials

You are not giving the correct path to the font.ttf file

change this

$font->file('font/Poppins.ttf');

to this

 $font->file(public_path('/fonts/font.ttf'));

Create an Icon with First and Last name first letter inside Icon in React native

You can create a simple component like below, this will place the text in the middle, I have passed the initials as props but you can modify it to take color and other properties.

const InitialIcon = ({ initials }) => {
  return (
    <View
      style={{
        backgroundColor: 'blue',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 30,
        width: 50,
        height: 50,
      }}>
      <Text style={{ color: 'white', fontSize: 25 }}>{initials}</Text>
    </View>
  );
};

Usage

 <InitialIcon initials="AB" />