MyACC how to put image on character samples

Lopaskurwa · Jan 1, 2021

Hello
how to put image on "Character Creation" when you creating character lets say Knights Sample this knight sample would have Knight image and says Knight below. Example

.

Because now its just a like this

Knight
Mage
Archer
Balabla
Balablasd

and etc which is boring.

Code

Please choose a name{% if config.character_samples|length > 1 %}, vocation{% end - Pastebin.com

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

pastebin.com

Lopaskurwa · Jan 2, 2021

margoh · Jan 2, 2021

You can achieve it through css edits.

Lopaskurwa · Jan 2, 2021

margoh said:
You can achieve it through css edits.

Lol what a top tier answer wow just wow i can believe how much information i got. "-How can i make this code?" "-You can achieve it trough lua". "-How can i a draw a nice face?" "-You can achieve it trough pencil". "-How can i drift like a professional?" "-You can achieve it trough car".

Jacobs · Jan 2, 2021

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.

Lopaskurwa · Jan 2, 2021

Jacobs said:

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.

Yes its pretty much perfect but would be great to adjust two thinks.

Flex container would contain 5 items not 2
And they are on paragraph
Code:
```
<td width="160"> Select your vocation:</td>
```
when they should be below text Select your vocation. Tried using or non worked

Lopaskurwa · Jan 3, 2021

Lopaskurwa said:
Yes its pretty much perfect but would be great to adjust two thinks.

Flex container would contain 5 items not 2

And they are on paragraph

Code:

<td width="160"> Select your vocation:</td>

when they should be below text Select your vocation. Tried using or non worked

bump

Jacobs · Jan 3, 2021

Lopaskurwa said:
Yes its pretty much perfect but would be great to adjust two thinks.

Flex container would contain 5 items not 2

And they are on paragraph

Code:

<td width="160"> Select your vocation:</td>

when they should be below text Select your vocation. Tried using or non worked

1. If I understand it correctly, then just use "flex: 20%;", if your intention is to have 5 items per row
2. No idea what you're asking, would need to see it myself

SixNine · Jan 3, 2021

Jacobs said:
1. If I understand it correctly, then just use "flex: 20%;", if your intention is to have 5 items per row
2. No idea what you're asking, would need to see it myself

If he uses flex: 20% image size will change too

Lopaskurwa · Jan 3, 2021

SixNine said:
If he uses flex: 20% image size will change too

No its fine i can adjust

.vocation-label__img {
max-width: 200%;
}

Jacobs said:
1. If I understand it correctly, then just use "flex: 20%;", if your intention is to have 5 items per row
2. No idea what you're asking, would need to see it myself

2. This is what i mean. When images should be below text "SELECT YOUR CHARACTER" as you can see they are on the same line

EDIT: FIXED IT WAS ISSUE WITH TD

MyACC how to put image on character samples

Lopaskurwa

Well-Known Member

Please choose a name{% if config.character_samples|length > 1 %}, vocation{% end - Pastebin.com

Jacobs

Lopaskurwa

Well-Known Member

margoh

{{ user.title }}

Lopaskurwa

Well-Known Member

Jacobs

Webdev, mapper

Lopaskurwa

Well-Known Member

Lopaskurwa

Well-Known Member

Jacobs

Webdev, mapper

SixNine

Active Member

Lopaskurwa

Well-Known Member

Attachments