Change Image Picker style for uploading profile photos in Glide Pages

Ask for Help
1

Hi everyone!

Our small team is working on a project in Glide Pages to build a basic social media app.

We’d like to allow users to upload a profile photo in a form, but would like to change the style of the Image Picker so that it is a round icon. Like so:

Screen Shot 2022-09-27 at 19.02.27
(Sample from Twitter)

With the help of older posts, here’s some code we tried so far. In a Rich Text field right above the form. (Not sure if we have the right class name, tbh.) Unfortunately, it does not work yet:

<pre><span><style>

[data-test="base-picker-button"] {
border-radius: 100px;
background-image: url("insertsampleurl.com");
}

Curious if anyone ran into a similar use case or has a solution. Thank you in advance!

2

Interesting. Had a go at this…try this:

CleanShot 2022-09-27 at 20.27.43

<pre><span><style>
[data-test="app-picker-button"] {
height: 100px !important;
width: 100px;
padding: 0;
border-radius: 50%;
}
.leftItem img {
width: 100px !important;
height: 100px !important; 
}

.rightItem {
position: absolute;
margin: 0 !important;
left: 75%;
bottom: 0%;
transform: translate(-50%, -50%);
}

[kind="twotone"] {
position: absolute;
margin: 0 !important;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
translate-x:
}

.main-content {
display: none;
}
2 Likes
3

Wow thanks so much @Robert_Petitto! Appreciate you taking the time to build that out.

I just tried this and it didn’t work… BUT I think it might just be because Glide has a different class name for GlidePages (versus GlideApps). The code itself looks awesome. Do you happen to know where the class name might be hidden here?

For reference: I tried the “base-picker-button” and the “wire-base-picker” to no avail.

Screen Shot 2022-09-27 at 20.47.11
Screen Shot 2022-09-27 at 20.47.111269×437 203 KB

4

You must have a Business plan to implement CSS in Glide Pages.

5

Ah…ya…I built this in Glide apps, not pages. I’d have to toy with it.

6

Thank you @ThinhDinh! I am currently on the Free Plan while I work on developing the platform, but intend on going to the Business Plan once we’re ready to launch.

Do you know if we must be on the Business Plan for us to experiment with CSS in the Editor? (It’s ok for now if it does not publish the custom code.) Thanks in advance!

7

Yeah, I think you must be on the Business Plan to have it as an option.