How to center justify image component

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.

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.

3 Likes

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

4 Likes

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.

1 Like

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?

Use a template column.

1 Like

Here’s the relevant documentation.

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.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.