Using a link to get solid colors in components

Hey, community! :wave:

Today, I’d like to share a useful tip on how to achieve solid colors in Glide components using a specific link. If you’ve ever wondered how to set a consistent background color for different elements such as images, headers, or profile pictures in Glide, this post is for you!


Step 1: Get the link

First, we need to obtain the link for the desired solid color. We’ll use the website singlecolorimage.com to generate the link. Here’s an example link you can use:

https://singlecolorimage.com/get/18BED4/1000x1000

In this link, #18BED4 represents the hexadecimal code for the desired color (you can replace it with any valid hexadecimal code) and 1000x1000 sets the dimensions of the image. You can adjust the dimensions as needed to suit your preferences.


Step 2: Applying the link in Glide

Now that we have the link for the solid color, let’s apply it to different components in Glide. Here are a few ways to do it:

  1. For Images or Headers: If you want to set a solid color for the images or header of a screen or section, add an “Image” or “Title” component in Glide. In the component’s settings panel, you’ll find the “Background Image” option. Paste the previously obtained link into this field to set the solid color as the header’s background.
  2. For Profile Pictures: If you want to set a solid color for a user’s profile picture, add an “Image” component in Glide. In the “Image” property, insert the link we obtained earlier. This will make the profile picture display the solid color as the background.
  3. In the Template Column: You can also use the link in the “Template” component to replace color data. For example, if you have a column named “Color” in your data sheet, you can use the link as follows: https://singlecolorimage.com/get/{{Color}}/1000x1000. This will make the “Template” component display the solid color based on the values in the “Color” column.


Step 3: Customizing colors and dimensions

The great advantage of this approach is that you can easily customize colors and dimensions as needed. Simply change the hexadecimal code in the link to the desired color. If you prefer different dimensions for the image, adjust the width and height values in the link.

Remember to maintain proportional dimensions to avoid image distortion.


That’s it! :smiley: Now you can add consistent solid colors to different Glide components using the obtained link. It’s a simple and effective way to customize your apps with a cohesive visual aesthetic.

Try it out and have fun exploring different color and dimension combinations to achieve impressive results!

If you have any further questions or would like to share your experiences, feel free to comment in this topic. I’m here to help!

8 Likes

That’s all very nice, but… um, are you aware of the Image from Colour plugin column? :wink:

1 Like

Yes, of course!

I think this option I posted would be if the person wanted to customize the dimensions of the image/color, then I see that it makes more sense

hehe, yeah I kind of guessed that :slight_smile:
But, to be honest, I don’t think changing the dimensions of the image actually makes any difference when you’re using it as (for example) a container background, as Glide will just adjust it to fill the space.

For example, both of the below give the same result when used as a container background:

https://singlecolorimage.com/get/18BED4/1000x1000
https://singlecolorimage.com/get/18BED4/1000x1

Yes, so maybe this is obsolete

mmm, maybe not. I was just experimenting with it a bit, and the following in an image component makes for a nice looking separator…

https://singlecolorimage.com/get/18BED4/1000x4

2 Likes

Exactly! We can explore the use cases

1 Like

Thanks for sharing!

1 Like