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.
When I sit in my pc tomorrow morning I send to you!
Thank you! I hope for that friend
@Jorge_Hernandez Here it is:
- 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;
}
- Replace
COVER-IMAGE-URL
andIMAGE-URL
for the Cover and Image you wanna add respectively. -
Important: Add a Rich text component at first in your screen (above all components!)
Result
- Doc in Notion with the CSS
Powered by @Serpa
Oh man. This is beautiful. I thank you in my soul, Lucas. All the best!
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!
You can do this simply with a column template
I have updated the code and add one more important step. Plz take a look
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!
Oh wow Lucas
You are superb
@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
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
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.