Insert Auto-size TradingView Widget to phpBB 3.3.0 (or others)

[Mike R]

These are the changes required to get a self-adjusting TradingView Widget on the main page of a phpBB bulletin board.

• The widget code that is supplied is first edited - a simple cut and paste.
• A style is created to control the widget.
• Code snippets are inserted into the appropriate templates - another cut and paste.

Edit Widget
The widget code TradingView supplies has to be adjusted, which sounds worse than it is, but is a really simple cut and paste.

Here is the initial code they supplied with their widget creator tool --> https://www.tradingview.com/widget/advanced-chart/

Code: Select all

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div id="tradingview_e6f17"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/AMEX-TRX/" rel="noopener" target="_blank"><span class="blue-text">TRX Chart</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.widget(
  {
  "autosize": true,
  "symbol": "AMEX:TRX",
  "interval": "1",
  "timezone": "America/Toronto",
  "theme": "dark",
  "style": "1",
  "locale": "en",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "withdateranges": true,
  "hide_side_toolbar": false,
  "allow_symbol_change": true,
  "details": true,
  "container_id": "tradingview_e6f17"
}
  );
  </script>
</div>
<!-- TradingView Widget END -->

On the third line is the widget ID, which is embedded in the <div> tag

<div id="tradingview_e6f17"></div>

which doesn't do anything unless there is code placed between the >< symbols for it to point at (act upon). This is where the widget <script> gets pasted into.

Cut and paste the <script> into the <div>...
Cut the code from the beginning or the first <script typ.... to end of the last </script> tags above and paste it into the widget specific <div> tag.

eg. <div id="tradingview_e6f17">PASTE CODE HERE</div> Click SAVE! <--- clear as mud?

Create a style to control that <div>
Without getting into specifics, the code below will work for screens with 1680x1080 resolution. If yours is bigger, change the numbers accordingly:

Code: Select all

<style>
    #tradingview_e6f17 {

        width: 1600px;
        height: 800px;
        max-width: 100%;
        max-height: calc(800 / 1600 * 100vw);
    }

</style>

Insert the code into your templates.
The two templates are found in /styles/Your_Style/template/ of your install:

• overall_footer.html -- widget portion inserted here

• overall_header.htm -- style portion inserted here

I use the cPanel File Manger that comes with my hosting provider, but Notepad++ will work just fine. Brackets is another choice.

Open overall_header.html and place the <style> snippet just below the </head> tag.
Use "find" if you can't see it at first.... it's there.
Paste it in, comment it if you need, and click save.

Then open overall_footer.html and insert the widget code wherever you want to. I place all my extras just below

Code: Select all

	<!-- IF U_ACP -->
		<p class="footer-row">
			<a class="footer-link text-strong" href="{{ U_ACP }}">{{ lang('ACP') }}</a>
		</p>
		<!-- ENDIF -->

which is found in most modern phpBB styles - though I did have to mess around with a closing </div> tag on occasion to get things to center.

Edit, save, upload, done.

Now, go to the Administration Control Panel, purge the cache, and back to the Board Index where you should now see your changes. Some might say inline code is a sloppy hack. They may be right!! However, this way I don't have to worry about running a compiler, or having to mess with SASS (which I know nothing about) just to put a widget on my board.

Maybe later I'll see how easy it is, but now it's done, and I don't have to spend several more hours, chin in hand, staring at a computer screen to get it done.