# How to center justify image component

**URL:** https://community.glideapps.com/t/how-to-center-justify-image-component/56827
**Category:** Ask for Help
**Created:** [January 18, 2023, 9:40am UTC](https://community.glideapps.com/t/how-to-center-justify-image-component/56827 "2023-01-18T09:40:13Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![kikipipi](https://avatars.discourse-cdn.com/v4/letter/k/e79b87/32.png) [@kikipipi](https://community.glideapps.com/u/kikipipi)
#### Post date: [January 18, 2023, 9:40am UTC](https://community.glideapps.com/t/how-to-center-justify-image-component/56827/1 "2023-01-18T09:40:13Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [January 19, 2023, 1:00am UTC](https://community.glideapps.com/t/how-to-center-justify-image-component/56827/2 "2023-01-19T01:00:44Z")

</div>

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

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

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/d/2de2ffc14ec48aefd8dbf54f2558abd48b013327.png)

What control the size are the height & width params.

---

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [January 19, 2023, 1:20am UTC](https://community.glideapps.com/t/how-to-center-justify-image-component/56827/3 "2023-01-19T01:20:53Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [January 19, 2023, 1:31am UTC](https://community.glideapps.com/t/how-to-center-justify-image-component/56827/4 "2023-01-19T01:31:13Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![kikipipi](https://avatars.discourse-cdn.com/v4/letter/k/e79b87/32.png) [@kikipipi](https://community.glideapps.com/u/kikipipi)
#### Post date: [January 19, 2023, 11:08am UTC](https://community.glideapps.com/t/how-to-center-justify-image-component/56827/5 "2023-01-19T11:08:50Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [January 19, 2023, 11:21am UTC](https://community.glideapps.com/t/how-to-center-justify-image-component/56827/6 "2023-01-19T11:21:25Z")

</div>

Use a template column.

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [January 19, 2023, 11:34pm UTC](https://community.glideapps.com/t/how-to-center-justify-image-component/56827/7 "2023-01-19T23:34:11Z")

</div>

Here’s the relevant documentation.

> **[Glide Docs • Template Column](https://www.glideapps.com/docs/reference/computed-columns/template-column)**
>
> Display dynamic text that can change with the values in other columns.

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

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

```

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

---

<div class="post-metadata">

### Author: ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)
#### Post date: [January 20, 2023, 11:34pm UTC](https://community.glideapps.com/t/how-to-center-justify-image-component/56827/8 "2023-01-20T23:34:14Z")

</div>

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