It seems like you'll need to do something like this:
Replace line 65 - 86:
HTML:
{% if config.character_samples|length > 1 %}
<td>
<table class="TableContent" width="100%">
<tr class="Odd" valign="top">
<td width="160"><br/><b>Select your vocation:</b></td>
<td>
<div class="vocations">
{% for key, sample_char in config.character_samples %}
<div class="vocation">
<input type="radio" class="vocation__radio-item" name="vocation" id="vocation{{ key }}" value="{{ key }}"
{% if vocation is not null and vocation == key %} checked="checked"{% endif %}>
<label for="vocation{{ key }}" class="vocation-label">
<img class="vocation-label__img" src="{{ config['vocation_images'][key] }}" alt="{{ config['vocations'][key] }}"/>
<span class="vocation-label__name">{{ config['vocations'][key] }}</span>
</label>
</div>
{% endfor %}
</div>
</td>
</tr>
</table>
{% endif %}
Then add some styles:
CSS:
<style>
.vocations {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.vocation {
flex: 50%;
text-align: center;
}
.vocation input[type=radio] {
display: none;
}
.vocation__radio-item:checked +.vocation-label .vocation-label__name {
color: red;
}
.vocation-label__img {
max-width: 100%;
}
.vocation-label__name {
display: block;
margin-top: 20px;
}
.vocation-label:hover .vocation-label__name, .vocation-label:active .vocation-label__name, .vocation-label:focus .vocation-label__name {
color: red;
}
</style>
Then add some images to the "images" folder on your server, e.g. "images/vocations/", such as "images/vocations/vocation_1.png", "images/vocations/vocation_2.png" and set them up in your config.php:
PHP:
// new character config
'vocation_images' => array( // vocations, format: ID_of_vocation => 'Path to image'
1 => '/images/vocations/vocation_1.png',
2 => '/images/vocations/vocation_2.png',
3 => '/images/vocations/vocation_3.png',
4 => '/images/vocations/vocation_4.png',
),
This is of course very basic, I've got no idea how does your template look and thus can't assume the proper stylings required.