Need to improve the clarity of the avatar and provide a size option

[jdzhu19]

Prerequisites

• I have searched for duplicate or closed feature requests
• I am mindful of the project scope

Proposal

When I use the https://github.com/HugoBlox/theme-academic-cv to configure, I find that the clarity of the avatar is not ideal, even though the provided photo is clear. On the other hand, the size of the avatar is very small. I hope you can provide an optional size.

Motivation and context

the clarity of the avatar is not ideal

[jdzhu19]

It would be even better if the shape could be easily selected (e.g. square and circle).

[RayCxggg]

Strongly agree. The avatar size is cropped to 150x150 which is too small. My original picture is around 10MB.

[LuisNavarro07]

Hello. I am facing the same struggle. I want to increase the size of my avatar picture. Is there already a solution for this? Can you provide some insights on how to solve it?

Thanks in advance for the support.

[Frozenheart1998]

I found a way that worked for me to link my original avatar rather than resizing it.

So blox-tailwind/layouts/partials/blox/resume-biography-3 Line 46, $avatar.Fill "150x150 Center" will render a resized image (150x150), which leads to a low-resolution avatar.

One viable way is to rewrite lines 43-51:

    {{ if $avatar }}
    <div class="avatar-wrapper {{ if $img }}-mt-[105px]{{else}}mt-10{{end}}">
      {{ $avatar_image := $avatar.RelPermalink }}
      <img class="avatar rounded-full bg-white dark:bg-gray-800 p-1" src="{{ $avatar_image }}" alt="{{$person_page.Title}}">
      {{with $person.status.icon}}<span class="avatar-emoji">{{.|emojify}}</span>{{end}}
    </div>
    {{ end }}
   <br>  {{/* Added line break here */}}

Now Hugo Academic can link to your original high-resolution avatar. However, the avatar and emoji will be shifted from their original place. And the avatar is a bit bigger than before. This is because the code still uses Tailwind's original CSS classes. So here I override these classes at line 20:

<style>
  .avatar-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
  }
  
  .avatar {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
  }

  .avatar-emoji {
    position: absolute;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 100%;
    bottom: -25px;
    right: -25px;
    text-align: center;
    font-size: 20px;
    background-color: #fff;
    color: #000; /* override parent alpha */
    box-shadow: 0 10px 20px rgb(0 0 0 / 4%), 0 2px 6px rgb(0 0 0 / 4%), 0 0 1px rgb(0 0 0 / 4%);
  }

  .dark .avatar-emoji {
    background-color: #000;
    box-shadow: 0 10px 20px rgb(0 0 0 / 4%), 0 2px 6px rgb(0 0 0 / 4%), 0 0 1px rgb(255 255 255 / 96%);
  }
</style>

Now, with the modified resume-biography-3.html file, put it under the directory of layouts/partials/blox/ of your local hugo-academic project according to Hugo override rule. Create new folders if you don't have layouts/partials/blox/ in your hugo-academic project space.

I haven't tested it on other machines but it will be fairly easy to adjust using a similar idea.