Add an icon or string after all instances of a string on page

Need help
1

Firstly, if there’s a whole better way to handle this then find and replace… let me know!

My site has a virtual currency that I’d like to use an icon for. I’d like to dynamically appear in any text element etc. that makes reference to the currency.

For example, if I have a text element that says

‘You can refresh your current selection for 30 [currencyIcon]’

I’d like to sweep each page when it loads and somehow replace each instance of [currencyIcon] with an icon in the text.

And I as I said, if there’s a better way to approach this, do share!

Cheers

2

It might be easier to just group together a text element and an image element and upload the icon. That would be more difficult if the icon needs to be in the middle of a sentence. Are the locations of this icon dynamic or surely you are setting the locations, right? I think it might just be best to add an image element. Then there won’t be any weird page load tricks with changing texts and adding images.

3

Thanks for the reply. The issue I’m having is that it can pretty much pop in the middle of any text element, so my thinking was the replace would be the best approach.

It’s the sort of thing that I’m pretty sure you could do with a page wide html swap in and out, but javascript code snippets I found to do that don’t seem to do anything when I stick them in html elements or the page header. Not sure if I’m doing it wrong or that isn’t compatible with bubble’s tech.

4

You can make all your text elements html elements and then use some thing like this.

<div>
You can refresh your current selection for
Dynamic Value
<span>
<img src=“urlForImage”>
</span>
<div>
5

This topic was automatically closed after 70 days. New replies are no longer allowed.