# How to combine text and image

**URL:** <https://community.glideapps.com/t/how-to-combine-text-and-image/73465>\
**Category:** Ask for Help\
**Created:** [May 17, 2024, 4:29pm UTC](https://community.glideapps.com/t/how-to-combine-text-and-image/73465 "2024-05-17T16:29:30Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kemal1973](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kemal1973/32/72721_2.png) [@Kemal1973](https://community.glideapps.com/u/Kemal1973)\
**Post date:** [May 17, 2024, 4:29pm UTC](https://community.glideapps.com/t/how-to-combine-text-and-image/73465/1 "2024-05-17T16:29:30Z")

</div>

I want to put a pin pointer icon side a city name and this icon isn’t a symbol or emoji.my image format is PNG or SVG.  
image is ![143826_pointer_location_pin_icon (1)](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/b/7b8628d0295bc53fb89a607ff8dd53dd5630a30e.png)

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [May 17, 2024, 4:58pm UTC](https://community.glideapps.com/t/how-to-combine-text-and-image/73465/2 "2024-05-17T16:58:47Z")

</div>

How are you trying to display it in the app? Which component are you using?

---

<div class="post-metadata">

**Author:** ![Kemal1973](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kemal1973/32/72721_2.png) [@Kemal1973](https://community.glideapps.com/u/Kemal1973)\
**Post date:** [May 17, 2024, 7:37pm UTC](https://community.glideapps.com/t/how-to-combine-text-and-image/73465/3 "2024-05-17T19:37:49Z")

</div>

collection\>Items Data\>description

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 17, 2024, 9:08pm UTC](https://community.glideapps.com/t/how-to-combine-text-and-image/73465/4 "2024-05-17T21:08:10Z")

</div>

If it’s just to replace the pin, I’ve done it with css.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/f/ff6f93a08d7ede103c259e2162468057237321aa.jpeg)

```auto

/*Change mapbox icon to TT flag*/

.mapboxgl-marker {
background: url('https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/ov2nF5ayQc4wK5jVvF4R/pub/MrtQy1W1hqSNjfAs1Wbp.png') center/contain no-repeat; filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5)); 

}

.mapboxgl-marker > div > svg > path, .mapboxgl-marker > div > svg > circle {
display: none;
}

```

Check here for more styling options. [CSS Library](https://css-library.glide.page/dl/library)

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 17, 2024, 9:14pm UTC](https://community.glideapps.com/t/how-to-combine-text-and-image/73465/5 "2024-05-17T21:14:44Z")

</div>

If this works for you, the original technique is here: [CSS Library](https://css-library.glide.page/dl/library/s/8836b3/r/LDLEdJMFT02sE-FoUrcf1g)

---

<div class="post-metadata">

**Author:** ![Kemal1973](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kemal1973/32/72721_2.png) [@Kemal1973](https://community.glideapps.com/u/Kemal1973)\
**Post date:** [May 17, 2024, 9:14pm UTC](https://community.glideapps.com/t/how-to-combine-text-and-image/73465/6 "2024-05-17T21:14:59Z")

</div>

I just want to display in a field, not on the map

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 17, 2024, 9:16pm UTC](https://community.glideapps.com/t/how-to-combine-text-and-image/73465/7 "2024-05-17T21:16:16Z")

</div>

ok. @Himaladin might be able to help

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 17, 2024, 9:23pm UTC](https://community.glideapps.com/t/how-to-combine-text-and-image/73465/8 "2024-05-17T21:23:38Z")

</div>

Use custom CSS with the ::before pseudo class.  
Can you provide a screenshot so I can be more sure of what you mean.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [May 17, 2024, 9:26pm UTC](https://community.glideapps.com/t/how-to-combine-text-and-image/73465/9 "2024-05-17T21:26:29Z")

</div>

I would probably consider creating a little bit of HTML in a template column that joins the image and text together, and then use a custom collection to display it in a rich text component inside the custom collection container.

---

<div class="post-metadata">

**Author:** ![Kemal1973](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kemal1973/32/72721_2.png) [@Kemal1973](https://community.glideapps.com/u/Kemal1973)\
**Post date:** [May 17, 2024, 9:33pm UTC](https://community.glideapps.com/t/how-to-combine-text-and-image/73465/10 "2024-05-17T21:33:12Z")

</div>

currently I’m in Free Plan so I can’t use CSS

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 17, 2024, 9:38pm UTC](https://community.glideapps.com/t/how-to-combine-text-and-image/73465/11 "2024-05-17T21:38:00Z")

</div>

If what you want to achieve is a list, follow the path described by @Jeff_Hager. I included the HTML code:

![Screenshot 2024-05-18 at 05.42.56](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/1/e1472a3430e5e8d7b900f3d7b20ccd59481affdb.png)

```auto
<div style="position: relative;">
    <img src="https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/b/7b8628d0295bc53fb89a607ff8dd53dd5630a30e.png" alt="Sample Image" style="float: left; width: 30px; margin-right: 10px;">
    <div style="display: inline-block; padding-top: 8px; padding-bottom: 8px; font-size: 16px;font-weight:bold;">
        TEXT
    </div>
</div>

```

---

<div class="post-metadata">

**Author:** ![Kemal1973](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kemal1973/32/72721_2.png) [@Kemal1973](https://community.glideapps.com/u/Kemal1973)\
**Post date:** [May 18, 2024, 1:03pm UTC](https://community.glideapps.com/t/how-to-combine-text-and-image/73465/12 "2024-05-18T13:03:57Z")

</div>

I created a template column like below

 ![PIN](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/c/bc1bb17c4b0a99f4d59019371af0318424692de3.png)  
I replaced img src link address with my image link address and TEXT with my text

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [May 18, 2024, 1:10pm UTC](https://community.glideapps.com/t/how-to-combine-text-and-image/73465/13 "2024-05-18T13:10:08Z")

</div>

Put a rich text component on the screen and point it to your template column

---

<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:** [May 25, 2024, 1:10pm UTC](https://community.glideapps.com/t/how-to-combine-text-and-image/73465/14 "2024-05-25T13:10:59Z")

</div>

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