Images as Links to websites

[spencersRus]

@John_Cabrera - continuing a discussion from another topic:

Dream features - what’s yours?

@spencersRus why don’t you just use the RichText component? Just build your button in HTML using images in the HTML that are links. I have several image links in my app this way. Social Media logos, etc. I’m using the RichText component all over my app in the absolutely goofiest ways using CSS to move them all over the screen, rotate them, etc. It’s easily my favorite component in the app. I just wish it could interact a bit better with screens within the app. I’ve actually done the opposite of …

You inspired me to try to do some quick and easy HTML to link my image.

I played around with getting my images to link to outside websites, you can see a trial app here:
https://jvacy.glideapp.io

But the Rich Text seems to leave a lot of space.
If there are just images, they seem to be closer.
I am no expert (well ZERO knowlege) of Rich Text)
I know even less about CSS.
I had to google how to link an image just to get that part down.

so I am wondering what workarounds you have.

[Rosewebstudio]

You know what? I prefer the extra space

[John_Cabrera]

@spencersRus don’t even sweat it. There was a time when even the Glide Devs didn’t know how to do HTML. We all need pointers to get us going. This is an easy one. Ready?

Wrap those image tags in div tags like so:

<div><img src="[your 1st image url]"></div>
<div><img src="[your 2nd image url]"></div>

Take a look at that in your app. My guess is now you’re going to have the opposite problem. The images will have no space between them. Okay, so let’s use some simple CSS to give them some breathing room.

In the first div tag for the first image add a style attribute like so:

<div style="margin-bottom:10px;"><img src="[your 1st image url]"></div>
<div"><img src="[your 2nd image url]"></div>

Now that top image has 10 pixels of space between it’s bottom edge and the image below it.

You could get the same effect by instead adding the style attribute to the div tag of the second image and putting the 10px of space for its top margin, like so:

<div><img src="[your 1st image url]"></div>
<div style="margin-top:10px;"><img src="[your 2nd image url]"></div>

or you can use style attribute on both and give each of them 5px on top and bottom which would together equal 10px:

<div style="margin-top:5px;margin-bottom:5px"><img src="[your 1st image url]"></div>
<div style="margin-top:5px;margin-bottom:5px"><img src="[your 1st image url]"></div>

You can also use "margin:5px 0 5px 0;” to do that, which is a quicker way of doing margins around the entire element. With the first of those 4 numbers being top margin, the second being the right margin, third being bottom margin and 4th being left margin.

This is basic stuff, but once you start getting the gist of using style attributes in

You’ll be using it all over your app. Just google what CSS style you’re trying to do: “CSS align my text” or “CSS add space around image”

Pretty much any style you can think of has been figured out by folks using CSS, and google is filled with solutions.

Good luck!

[spencersRus]

Just getting my brain around this.

Are you saying put both (or all) images inside ONE Rich Text component?

[John_Cabrera]

You can do it either way. Either one div-enclosed image per RichText component or both in one RichText component. Glide will see the HTML code as exactly the same.

Now obviously if you put them in separate RichText components then you have more power over each of them individually in Glide since you could turn one off or on with visibility under certain conditions, you can move them if you need to a little easier. But whatever you put in that component, Glide sees as the bare text of that component. So two RichText components on top of each other with those div tags is treated as two div tags on top of each other… and one RichText component with two div tags on top of each other is treated as two div tags on top of each other.

Is that clear?

[John_Cabrera]

Also, I just used 10px as an arbitrary number. I don’t know what is the right space you want, but just play with those numbers until the space is right. You can even use negative numbers to pull components closer to one another:

style=“margin-top:-10px;”

Trial and error is really the best way to learn this stuff. But you’re well on your way. You’ve got images linking externally, so you’re already way further along with getting things on your wish list than some of us

[spencersRus]

Thank you sooooo much for the explaination and the tutoring sessioin.

It was a big help … but gave me more todo!

I am just starting with zero and working up and down from there.

Now I just need to RESIZE the image (I was doing 1:1 in glide)

See the div tab here: https://jvacy.glideapp.io/

[John_Cabrera]

Already ahead of you. Saw the second tab with the div you created.

Add a width to both divs in style:

style=“width:100%;margin-bottom:10px”

Then in the image tag of each add a width attribute as well:

<img width=100% height=auto src="[url]" />

And boom, you’re there.

[spencersRus]

OK, John … you are the BEST! I understood it the way you told me …

You can see it looks great on the div tab now.

but where does the link come in? Is is all between that [url]?

My mind is really stretching!

[John_Cabrera]

‘a’ tags inside each of the div tags but around each of the img tags.

<div><a href="[link]"><img src="[url]" /></a></div>

[url] is the address of the image file. [link] is where you want the image to link.

[spencersRus]

@John_Cabrera

<img width=100% height=auto src="[url]" />

OK, here is what I have …

    <div><a href="[link]"><img width=100% height=auto src="[url]" </a></div>

It seems to be working

[John_Cabrera]

That looks good. But don’t forget those style=“margin:[#]px” inside the first part of the div tags if you want to control the space between your two graphics (With the [#] being the number of pixels of space).

[Jeff_Hager]

@spencersRus

src=“[url]”

Looks like you are missing a closing “/>” after the URL

[John_Cabrera]

I looked at your test app and it looks good, man!

But wondering why your links are opening a new browser tab rather than opening the window in Glide. Did you add a target="_blank" Attribut to the “a” tag? You can certainly do that, but I think from an app flow perspective, it would be nicer for your users that the window comes up inside your app. You can do that by just getting rid of the target attribute.

[John_Cabrera]

Yep. He’s right. Close that tag.

[spencersRus]

Not sure why it is opening up in a browser … almost all my apps do that the first day, then they ‘settle down’ and open IN APP later … I’ll just wait.

BTW- you are giving me a lot of credit thinking I even know what a target-blank is! HA! Thanks!

[John_Cabrera]

Oh never mind. I know why it’s doing that. Because I was looking at your app in the safari browser (since it’s public) not as a bookmarked app on my home screen which behaves like a proper app.

[spencersRus]

Coming back here @John_Cabrera.
What did you mean by this?

Images as Links to websites - #15 by John_Cabrera

@John_Cabrera

But wondering why your links are opening a new browser tab rather than opening the window in Glide. Did you add a target=“_blank” Attribut to the “a” tag? You can certainly do that, but I think from an app flow perspective, it would be nicer for your users that the window comes up inside your app. You can do that by just getting rid of the target attribute.

I would like to have it open in safari.

[John_Cabrera]

Disregard. My brain was fried and I was opening your app on a normal desktop browser rather than as an app on a phone. The phone version wouldn’t have opened in a separate tab, but on browser it does, and I just got confused in the moment. Nothing to see here. Carry on.

[spencersRus]

Actually I was wondering if there IS a way to open from a Glide app into Safari?