How to centre an illustration

[KPT]

This seems like very obvious, but i can for some reason not centre an illustration.
I have a welcome page where I have an illustration I’ll like to centre - how do I do that without just setting it to fill?

[ThinhDinh]

Can you show some illustration on what you want to achieve? Are you on Glide Apps or Classic Apps?

[KPT]

I’m on glide apps. It’s a small illustrations for empty states and different welcome page/explainer pages to encourage users to do something.

[ThinhDinh]

So you have an image and you want to center it on the screen?

You can try a template like this:

<center><image src="your image link here"></image></center>

Then put that in a rich text component.

[KPT]

@ThinhDinh

<center><image src="your image link here"></image></center>

Ahh nice - somehow thought that the HTML markup, was also not possible along the CSS.

[ThinhDinh]

Inline HTML should still be possible.

[kabookie]

I don’t see how this works as when I add the link to the Rich Text, the image fills the entire screen width, so there is no centering of the image. I tried to pull the image link and then add to a template column and the same result.

[ThinhDinh]

Depends on what size of image you have, I think. You can always resize it within HTML using the width/height attributes.

It is working for me (an image of a loading GIF).

[kabookie]

I can get it to work if I manually plug the link right into the richtext element, but I can’t seem to get it to work with any kind of template/column element so that the image link can be dynamic.

[Uzo]

Can you show your template?

[kabookie]

I think I have it right but this is not where my skills are…

[Uzo]

your image dimensions are wrong… you need to define it… ie: the width:100px; height:100px

Try this:

<center><image style="height:100px;width:400px" src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/sMGyeKcmmiWw86WtVUlT-template-builder/pub/GlFCDPIeYNjfH9CUfwpB.png"></image></center>

replace image URL with XYZ

you can use %, vw, vh instead of px to better suit your proportions

but % will not work on height… if you want to keep the image’s original proportions… don’t use height.

[kabookie]

@Uzo

Thank you @Uzo ! This is how the template looks now, with XYZ as the replacement column:
When I use 100x400 it stretches this square image, but 100x100 gets me there. (colored container background for clarity)

[Xavier_Delplanque]

Another solution is to use the Title component for empty states :

[KPT]

aaahhhhh very nice - just what I was looking for. Going from apps to pages, still takes a little time to get used to… Actually, just checkking it out I don’t think the tittle component with the round image exists anylonger?

[ThinhDinh]

Maybe container > 3 columns, use the central one will help you get something similar.

[KPT]

@ThinhDinh

<center><image src="your image link here"></image></center>

It was more to get a round image however I figured it out with the HTML.

If anyone else needs this is what I used:

<center>
  <img src="URL" width="70%" style="border-radius: 50%;" 
</center>

[kabookie]

The problem with container columns is that on mobile they really don’t work. I’m not sure why and hoping a fix in in the works

[ThinhDinh]

Well, no good workaround for that at the moment. Responsiveness is one of the hardest things when building apps.