Any way to do this with CSS?

[ThinhDinh]

I don’t think this was covered in our Notion, but @Lucas_Pires has this set up like a year ago He may help you.

[Jorge_Hernandez]

@Lucas_Pires ! Could you help me?

[Lucas_Pires]

When I sit in my pc tomorrow morning I send to you!

[Jorge_Hernandez]

Thank you! I hope for that friend

[Lucas_Pires]

Asking @Serpa because I guess he has this one easy-get than me

[Lucas_Pires]

@Jorge_Hernandez Here it is:

1. Create a template column and paste the CSS below

CSS Code

</div></div></div>
<div style="background-image: url(COVER-IMAGE-URL);
   -moz-border-radius: 50%;
   -webkit-border-radius: 0%;
   width:120%;
   height:200px;
   background-attachment:scroll;
   background-size: cover;
   background-position: center center;
   position: relative;
   z-index:1;
   opacity:1;
   transform:translate(-50%,-55%);
   left:50%;
   margin-top: 12px; border: 3px solid #c3c3c3; background-color:red;"></div>

<div style="background-image: url(IMAGE-URL); 
-moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 top: -200px;
 width:80px; 
height:80px;
 background-attachment:scroll;
 background-size: cover;
box-shadow: rgb(0 0 0 / 45%) 0px 2px 4px;
 background-position: center center;
 position: relative; 
z-index: 1; transform:translate(-50%,245%);
 left:50%; margin-top: -147px; border:4px 
solid #f3f3f3; background-color:white ;"></div>

<pre><span><style>
[data-test="glide-app-bar"] :nth-child(1) {
    backdrop-filter: blur(0px);
    background: transparent; 
    -webkit-backdrop-filter: blur(0px);
}

#app-root [opacity='1'] {
color: transparent;
}

[data-test="nav-bar"] >div +* {
  color: transparent !important; 
}

2. Replace COVER-IMAGE-URL and IMAGE-URL for the Cover and Image you wanna add respectively.
3. Important: Add a Rich text component at first in your screen (above all components!)

Result

---

• Doc in Notion with the CSS

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

Powered by @Serpa

[Jorge_Hernandez]

Oh man. This is beautiful. I thank you in my soul, Lucas. All the best!

[kabookie]

Is there an easy way to capture the url for an image that has been entered on a Glide table? I can view and copy the image urls for those on a Google sheet, but I always save images in Glide tables now that we can, and this would make it much easier to use the CSS above. In the table I can only view the actual image, not the url. Thanks!

[Jorge_Hernandez]

When I scroll the image goes down on my screen as well. Is there a way to correct that?

[Roldy]

You can do this simply with a column template

[Lucas_Pires]

I have updated the code and add one more important step. Plz take a look

@Lucas_Pires

Important: Add a Rich text component at first in your screen ( above all components! )

[Jorge_Hernandez]

Genius! @Lucas_Pires

[ThinhDinh]

If there are any more magic coming from @Serpa, and if he allows it, please upload it to our Notion Thanks a lot for the update bro!

[Jorge_Hernandez]

I had not seen Mr. @Serpa but this is really magic. Thankful to you, gentlemen!

[Dilon_Perera]

Oh wow Lucas

You are superb

[Lucas_Pires]

Always there’s magic coming from @Serpa and @Pedroydzito for sure!

[Lucas_Pires]

@kabookie a lil trick is click on the image cell in glide tables and do the command to copy (Ctrl/Cmd+C), when you paste it, you’ll see the link there

[Jeff_Hager]

Best practices pls for image sharing & storage from anywhere in app

An image column will show the rendered image, but it’s still just a url underneath. The database doesn’t store images. It just stores the location of those images. If you switch that column to a text column, you will see only the url. If you use that image column value in a template column for example, it’s still a url and will show you the url.

[L.M]

Great Is it possible to “make” that forefront image clickable? (I prefer when anything in UI is useful) I mean by say adding an invisible button right there that could edit Profile/trigger Sign in/Navigate to help/home screen?
And maybe use a template col to catch the current user’s Profile pic to condition the url in the CSS?

Thks Lucas.
And BTW, welcome to my LinkedIn! You found me! Cool surprise