Make a default avatar with transparent background and adaptive coloring based on username #1357

TheVillageGuy · 2025-01-08T13:50:59Z

Code works flawlessly, just have to create a default avatar and somehow point to it from the code

github-actions · 2025-02-18T02:37:28Z

This PR is stale because it has been open 40 days with no activity.

use drop-shadow instead of background remove border-color: #0f0; border-width: 3px;

create overlay with color instead

try sepia instead

simplify style

different approach

twig is a pita

melroy89 · 2025-03-14T19:15:16Z

.gitignore

+/.vs/mbin/CopilotIndices/17.12.68.61481/CodeChunks.db-wal
+/.vs/mbin/CopilotIndices/17.12.68.61481/SemanticSymbols.db-shm
+/.vs/mbin/CopilotIndices/17.12.68.61481/SemanticSymbols.db-wal
+/.gitignore


Do not ignore .gitignore!

melroy89 · 2025-03-14T19:16:36Z

.gitignore

@@ -272,3 +272,10 @@ $RECYCLE.BIN/
 *.msi
 *.msm
 *.msp
+/.vs/mbin/CopilotIndices/17.12.68.61481


This can be reduced to a single: /.vs

Why is vs such a pita

melroy89 · 2025-03-14T19:21:48Z

public/default_avatar.png

Why does this image looks like it is created in Ms Paint? The borders are very pixelated. You do know that we have very quality infinitely sharp SVG files? https://github.com/MbinOrg/mbin/blob/main/assets/images/sources/mbin-notext.svg

These can be opened in Inkscape. edited and then exported to PNG if you wish to use png.

See my response below. I did all the work for you already now. You can just take that SVG content and only modify the style in the <stop ..> section to any color you want for either the foreground or background.

Do not ignore .gitignore

… default-avatar

melroy89 · 2025-03-17T14:32:06Z

templates/user/_user_popover.html.twig

@@ -1,13 +1,13 @@
 <div class="user-popover">
    <header>
-        {% if user.avatar %}
+        {#% if user.avatar %#}


Why did you disable this? I think this should just be removed, right?

melroy89 · 2025-03-17T14:44:10Z

I will make it easier for you. Here is the svg in raw plain text:

<svg
   width="320"
   height="320"
   viewBox="0 0 320 320"
   version="1.1"
   id="svg1"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs1" />
  <rect
     style="display:none;opacity:1;fill:#29144a;fill-opacity:1;stroke:none;stroke-width:4.39823;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
     id="rect35"
     width="323.65826"
     height="325.41187"
     x="0"
     y="-2.7059329" />
  <g
     id="g1"
     transform="matrix(0.97092512,0,0,0.95099897,34.423647,35.890832)">
    <g
       id="layer1"
       style="display:inline;fill:none"
       transform="matrix(2.12871,0,0,2.0000001,-90.126008,15.218211)">
      <path
         id="path5"
         style="display:inline;opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
         d="m 97.229482,-27.966661 a 5.0000002,5.0000002 0 0 0 -4.330895,2.500455 L 23.616552,94.533014 a 4.9999999,4.9999999 0 0 0 4.330895,7.500336 H 166.51152 a 4.9999996,4.9999996 0 0 0 4.32995,-7.500336 l -69.28204,-119.99922 a 5.0000002,5.0000002 0 0 0 -4.329948,-2.500455 z M 97.247442,7.1649804 140.54977,82.164236 H 123.22998 L 110.23918,59.664254 97.247437,82.164236 84.256642,59.664254 71.266792,82.164236 H 53.946047 Z m 0,14.9996456 -10.824875,18.749814 a 7.5008819,7.5008819 0 0 0 0,7.500337 L 97.247437,67.164591 108.0742,48.414777 a 7.4997612,7.4997612 0 0 0 0,-7.500337 z"
         transform="translate(5.8501312,19.942587)" />
    </g>
  </g>
</svg>

melroy89 · 2025-03-17T14:57:06Z

I will make it easier for you. Here is the svg in raw plain text:

<svg
   width="320"
   height="320"
   viewBox="0 0 320 320"
   version="1.1"
   id="svg1"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs1" />
  <rect
     style="display:none;opacity:1;fill:#29144a;fill-opacity:1;stroke:none;stroke-width:4.39823;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
     id="rect35"
     width="323.65826"
     height="325.41187"
     x="0"
     y="-2.7059329" />
  <g
     id="g1"
     transform="matrix(0.97092512,0,0,0.95099897,34.423647,35.890832)">
    <g
       id="layer1"
       style="display:inline;fill:none"
       transform="matrix(2.12871,0,0,2.0000001,-90.126008,15.218211)">
      <path
         id="path5"
         style="display:inline;opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
         d="m 97.229482,-27.966661 a 5.0000002,5.0000002 0 0 0 -4.330895,2.500455 L 23.616552,94.533014 a 4.9999999,4.9999999 0 0 0 4.330895,7.500336 H 166.51152 a 4.9999996,4.9999996 0 0 0 4.32995,-7.500336 l -69.28204,-119.99922 a 5.0000002,5.0000002 0 0 0 -4.329948,-2.500455 z M 97.247442,7.1649804 140.54977,82.164236 H 123.22998 L 110.23918,59.664254 97.247437,82.164236 84.256642,59.664254 71.266792,82.164236 H 53.946047 Z m 0,14.9996456 -10.824875,18.749814 a 7.5008819,7.5008819 0 0 0 0,7.500337 L 97.247437,67.164591 108.0742,48.414777 a 7.4997612,7.4997612 0 0 0 0,-7.500337 z"
         transform="translate(5.8501312,19.942587)" />
    </g>
  </g>
</svg>

I will make it even even easier for you..

Here you go:

<svg
   width="320"
   height="320"
   viewBox="0 0 320 320"
   version="1.1"
   id="svg1"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs id="defs1">
    <!-- Define a linear gradient for the background -->
    <linearGradient id="bgGradient" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#d244f0;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#301a6f;stop-opacity:1" />
    </linearGradient>
    <!-- Define a vertical linear gradient for the logo with an abrupt color transition -->
    <linearGradient id="logoGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#2de2e6;stop-opacity:1" />
      <stop offset="80%" style="stop-color:#3399ff;stop-opacity:1" />
      <stop offset="80%" style="stop-color:#f61ab6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#f61ab6;stop-opacity:1" />
    </linearGradient>
  </defs>
  <!-- Background rectangle with gradient fill -->
  <rect
     width="320"
     height="320"
     fill="url(#bgGradient)" />
  <g
     id="g1"
     transform="matrix(0.97092512,0,0,0.95099897,34.423647,35.890832)">
    <g
       id="layer1"
       style="display:inline;fill:none"
       transform="matrix(2.12871,0,0,2.0000001,-90.126008,15.218211)">
      <path
         id="path5"
         style="display:inline;opacity:1;fill:url(#logoGradient);stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
         d="m 97.229482,-27.966661 a 5.0000002,5.0000002 0 0 0 -4.330895,2.500455 L 23.616552,94.533014 a 4.9999999,4.9999999 0 0 0 4.330895,7.500336 H 166.51152 a 4.9999996,4.9999996 0 0 0 4.32995,-7.500336 l -69.28204,-119.99922 a 5.0000002,5.0000002 0 0 0 -4.329948,-2.500455 z M 97.247442,7.1649804 140.54977,82.164236 H 123.22998 L 110.23918,59.664254 97.247437,82.164236 84.256642,59.664254 71.266792,82.164236 H 53.946047 Z m 0,14.9996456 -10.824875,18.749814 a 7.5008819,7.5008819 0 0 0 0,7.500337 L 97.247437,67.164591 108.0742,48.414777 a 7.4997612,7.4997612 0 0 0 0,-7.500337 z"
         transform="translate(5.8501312,19.942587)" />
    </g>
  </g>
</svg>

Example: https://melroy89.w3spaces.com/svg-example-1.html (cool huh?).

This allows you to add any colors for both the background or foreground. Any gradient you like. In any way or form you like.

TheVillageGuy added 2 commits January 8, 2025 14:50

Make a default avatar with static background color based on username

f9e96fb

Update user_inline.html.twig

df9b624

TheVillageGuy mentioned this pull request Jan 8, 2025

Make a default avatar with transparent background and adaptive coloring based on username #1356

Open

TheVillageGuy marked this pull request as draft January 8, 2025 14:09

github-actions bot added the Stale Inactivity for too long label Feb 18, 2025

TheVillageGuy added 13 commits March 13, 2025 16:47

Add files via upload

76747e7

Add files via upload

5b71cee

Update user_avatar.html.twig

6589998

Merge branch 'main' into default-avatar

3bf8446

Update user_inline.html.twig

e5579c8

Delete public/default_avatar.png

143015f

Add files via upload

8f10a63

Add files via upload

3f91bea

Add files via upload

011fd72

Add files via upload

e1f9ff6

Add files via upload

9f0c8e9

Add files via upload

f1ce464

Add files via upload

690c725

github-actions bot removed the Stale Inactivity for too long label Mar 14, 2025

TheVillageGuy added 10 commits March 14, 2025 12:03

Update user_inline.html.twig

20031e2

use drop-shadow instead of background remove border-color: #0f0; border-width: 3px;

Update user_inline.html.twig

ccfde0e

create overlay with color instead

Update user_inline.html.twig

b0ccc95

try sepia instead

Update user_inline.html.twig

98e0f31

simplify style

Delete default_avatar.png

128651c

Update user_inline.html.twig

619fbbc

different approach

Update user_inline.html.twig

584a9b8

twig is a pita

Update user_inline.html.twig

39ee1ed

Delete public/default_avatar.png

b272cfd

Add files via upload

05bf0f4

TheVillageGuy added 6 commits March 14, 2025 14:11

Add files via upload

c76fb3e

Add files via upload

d3a9c00

Add files via upload

4463ed3

improved handling of characters / values

4d8e354

Second attempt

456d96a

Delete .vs directory

af9089a

TheVillageGuy changed the title ~~Make a default avatar with static background color based on username~~ Make a default avatar with transparent background and adaptive coloring based on username Mar 14, 2025

TheVillageGuy added 3 commits March 14, 2025 18:27

Delete .gitignore

5ced290

here we go

e9028ff

Here we go

93b2c87

melroy89 reviewed Mar 14, 2025

View reviewed changes

TheVillageGuy added 7 commits March 14, 2025 23:19

Update .gitignore

3af659e

Do not ignore .gitignore

comment out if around user_avatar as it is now always active

f609a93

Merge branch 'default-avatar' of https://github.com/MbinOrg/mbin into…

5533144

… default-avatar

Merge branch 'main' into default-avatar

aabc057

Add files via upload

674bda3

huerotate sucks

76f2f84

Merge branch 'default-avatar' of https://github.com/MbinOrg/mbin into…

71ab2db

… default-avatar

melroy89 reviewed Mar 17, 2025

View reviewed changes

validname

4c8706d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make a default avatar with transparent background and adaptive coloring based on username #1357

Make a default avatar with transparent background and adaptive coloring based on username #1357

TheVillageGuy commented Jan 8, 2025

github-actions bot commented Feb 18, 2025

melroy89 Mar 14, 2025

melroy89 Mar 14, 2025

TheVillageGuy Mar 14, 2025

melroy89 Mar 14, 2025

melroy89 Mar 17, 2025

melroy89 Mar 17, 2025 •

edited

Loading

melroy89 commented Mar 17, 2025

melroy89 commented Mar 17, 2025 •

edited

Loading

Make a default avatar with transparent background and adaptive coloring based on username #1357

Are you sure you want to change the base?

Make a default avatar with transparent background and adaptive coloring based on username #1357

Conversation

TheVillageGuy commented Jan 8, 2025

github-actions bot commented Feb 18, 2025

melroy89 Mar 14, 2025

Choose a reason for hiding this comment

melroy89 Mar 14, 2025

Choose a reason for hiding this comment

TheVillageGuy Mar 14, 2025

Choose a reason for hiding this comment

melroy89 Mar 14, 2025

Choose a reason for hiding this comment

melroy89 Mar 17, 2025

Choose a reason for hiding this comment

melroy89 Mar 17, 2025 • edited Loading

Choose a reason for hiding this comment

melroy89 commented Mar 17, 2025

melroy89 commented Mar 17, 2025 • edited Loading

melroy89 Mar 17, 2025 •

edited

Loading

melroy89 commented Mar 17, 2025 •

edited

Loading