[Resolved] Adding clickable link to widget custom HTML in Footer

[George]

Love the product – and the support – old man of 72 bothering again, but this is great stuff ya’ll have!

Situation:

Have widgets in footer of site: https://urbansurvival.com
Just above the copyright bar are three charts which are updated every minute or so when markets are open.
I want to have a link to the source (Kitco – skookum metals people)
My widget Custom HMTL is (for Widget 1 – the gold price chart)
The charts display fine (nods appreciatively) but the link back to them doesn’t work. It’s laid out as custom iFrame in HTML widgets…

<iframe src=”https://www.kitconet.com/charts/metals/gold/t24_au_en_usoz_2.gif?Id=1234567890&1207241014&#8243; scrolling=”no” style=”overflow: hidden”></iframe>

Is this something in GP or (looking bewildered and like a bad night in rehab here…) some in AutoOptimize or Comet Cache?

Do I need to put the iframe into a more formal box (doctype and Body and all that falderal) or should I just take the dole and give up?

Thanks for helping the aged and [code] infirm…it was all so much easier back in Trash-80 days!

George

[Elvin]

Hi George,

Do you have the links to the site you want the clickable links to go to?

Also, to clarify: do you want the charts to be the clickable link or do you want to add a text link?

If you want the charts to be clickable, you can try markup:

<div style="position:relative;">
<a class="chart-link" href="https://kitco.com">
</a>
<iframe class="footer-chart" src="https://www.kitconet.com/charts/metals/gold/t24_au_en_usoz_2.gif?Id=1234567890&1207241014&#8243" scrolling="no"></iframe>	
</div>

<style>
.chart-link{
	position:absolute; 
	top:0; 
	left:0; 
	display:block;
	height:100%;
	width: 100%;
}
	
.footer-chart{
height:114px;
width: 172px;
overflow: hidden;
}
</style>

You can copy this structure for the other iframes as well. just change the href and src values.

[George]

Thanks Elvin! Spot-on, dude!

A couple of “learnings for newbies” from a 71-YO Oldman:

0. With three footers with this call, no appreciable change in Adwords/Insights page load speed mobile or desktop.
1. If you are using HTTPS for your site, you can paste code all day and not see the iframe content if you paste an http:// instead of https://. Will publish fine, but no display.
2. Don’t use a fat editor (Word) because of unpredictable handling of copy/paste. NotePad remains the tool…

Thanks – Great Product! Premium is the best deal out there for small-time site operators…

[Elvin]

1. If you are using HTTPS for your site, you can paste code all day and not see the iframe content if you paste an http:// instead of https://. Will publish fine, but no display.

Yeah this is actually important to know. http:// is an unsecure link and if the external source is using it, WP will block it.

2. Don’t use a fat editor (Word) because of unpredictable handling of copy/paste. NotePad remains the tool…

For coding, perhaps you can consider my recommendation:
Visual Studio Code – https://code.visualstudio.com/

All of us here on GP dev/support team uses it. It’s great.

[Author]

Posts