How to combine text and image

Ask for Help
1

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)

2

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

3

collection>Items Data>description

4

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

image


/*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

5

If this works for you, the original technique is here: CSS Library

6

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

7

ok. @Himaladin might be able to help

2 Likes
8

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

1 Like
9

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.

5 Likes
10

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

11

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

<div style="position: relative;">
    <img src="https://us1.discourse-cdn.com/flex020/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>
4 Likes
12

I created a template column like below

PIN
PIN1162×801 122 KB

I replaced img src link address with my image link address and TEXT with my text

1 Like
13

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

3 Likes
14

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