How to center justify image component

[kikipipi]

So I have this image component which looks really big on desktop, if I select the image size as small instead of full, the image automatically gets left justified. Question -

1. How can i reduce the size of full size image only on desktop to fit better
   OR
2. How can I center justify the image?

Thanks for the help.

[ThinhDinh]

You can have a rich text component and do it like this.

<center><img src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/pC0VUCcCIE3HKAPhcuCt/pub/nmMqCJN8Fz8dSSagztSc.png" height="100" width="200"></center>

What control the size are the height & width params.

[Robert_Petitto]

Or you can use Cloudinary to append the following as a “prefix” to the image URL by using a template column.

https://res.cloudinary.com/glide/image/fetch/c_pad,w_900,h_300/@ then replace the @ with the image URL.

For what it’s worth, Glide is well aware that we’ve been asking for more image layout and control in Glide Pages. I’d be shocked if more features aren’t released within Q1

[Uzo]

Yep, the sizes of images and elements, are just stupid…, especially on mobile. Without CSS is very hard to make Pages look good. At least we have an HTML, but that is a lot of work to make components from scratch.

[kikipipi]

Thanks guys, I get an idea now. So the image I am trying to show is coming from a data source, which means the src tag has to be dynamically inserted. Any ideas how?

[Robert_Petitto]

Use a template column.

[ThinhDinh]

Here’s the relevant documentation.

Glide Docs • Template Column

With my method, you would create a template column like this:

<center><img src="{I}" height="100" width="200"></center>

Then point {I} to the column that stores your image.