Video Tutorial - Embedding Images Into Sources

[Jaxel]

This video is expansion of the previous tutorial (http://8wr.io/threads/video-tutorial-advanced-scripting-and-coding.2/). As such, I will only be listed the new code added in this video.

Page HTML:

<div class="countries c1" id="c1"><div class="flag"></div></div>
<div class="countries c2" id="c2"><div class="flag"></div></div>

Page CSS:

.countries { position: absolute; top: 10px; }
.countries.c1 { left: 10px; }
.countries.c2 { right: 10px; }

.flag
{
    width: 100px;
    height: 50px;
    background-position: center;
    background-size: 100%;
}
.flag.CAN { background-image: url('http://data.8wr.io/sba/1/countries/CAN.png'); }
.flag.MEX { background-image: url('http://data.8wr.io/sba/1/countries/MEX.png'); }
.flag.USA { background-image: url('http://data.8wr.io/sba/1/countries/USA.png'); }

Page JS:

let c1 = docData['players_1'].split('||');
let c2 = docData['players_2'].split('||');
docData['players_1'] = c1[0];
docData['players_2'] = c2[0];

$('#c1 .flag').removeClass().addClass('flag '+c1[1]);
$('#c2 .flag').removeClass().addClass('flag '+c2[1]);

 

[Jaxel]

Addendum:

When using `||` double pipes in fields, and also using the `copy` button, you can simply append a `[#]` tag to the end of the field to only get specific parts of the replacement. For instance, with `Jaxel || USA`, setting your replacement as `{players_1[0]}` will return only `Jaxel`.