Insert icon image in custom user field


(Marco) #1

Hi to all =D

Its possible to insert the image icon for the custom user field?
Example:

Or/And is possible to view in the profile thread?


(Dean Taylor) #2

This can be done with CSS.

So as an example where “Membership Number” is a custom field.

The following CSS was used to add the “” image on a translucent white background:

.public-user-field.membership-number .user-field-name:before {
    content: "";
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    background-image: url(https://www.example.com/someimage.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    margin-right: 0.5em;
    vertical-align: middle;
    background-color: rgba(255,255,255,0.5);
    border: solid 2px transparent;
}

(Marco) #3

I’m testing ^^

Mmmmm… If a custom field has more choices, it is possible for each selection, enter a personal icon?


(Dean Taylor) #4

I’m assuming you mean “if multiple custom fields how do I add a unique icon for each?”…

So for a custom field named “Membership Number” you need to use:
.public-user-field.membership-number

For a custom field named “Plays Hide and Seek” the CSS selector would probably be:
.public-user-field.plays-hide-and-seek

You would need to inspect the page with Chrome Dev Tools / Inspector to check for yourself.


(Marco) #5

The css works perfectly, thanks ^^

it is possible, however, for each option chosen, enter a different icon?


(Dean Taylor) #6

It gets more difficult and you’ll need to start either overriding templates (user-card.hbs) / using JavaScript to catch the render / creating a plugin to do that.

CSS can style based on attributes not the content of an HTML element.

Either overriding templates (user-card.hbs) or perhaps if the Discourse team would except the following change in user-card.hbs it would be possible, to go from:

  {{#if publicUserFields}}
    <div class="public-user-fields">
      {{#each uf in publicUserFields}}
        {{#if uf.value}}
          <div class="public-user-field {{uf.field.dasherized_name}}">
            <span class="user-field-name">{{uf.field.name}}:</span>
            <span class="user-field-value">{{uf.value}}</span>
          </div>
        {{/if}}
      {{/each}}
    </div>
  {{/if}}

To:

{{#if publicUserFields}}
    <div class="public-user-fields">
      {{#each uf in publicUserFields}}
        {{#if uf.value}}
          <div class="public-user-field {{uf.field.dasherized_name}}" data-value="{{uf.value}}">
            <span class="user-field-name">{{uf.field.name}}:</span>
            <span class="user-field-value">{{uf.value}}</span>
          </div>
        {{/if}}
      {{/each}}
    </div>
  {{/if}}

Then you could add CSS like this:

// This would go below the CSS already provided.
.public-user-field.membership-number[data-value="RPG Maker 2000"] .user-field-name:before {
    background-image: url('https://www.example.com/rpg-maker-2000.png');
}

(Marco) #7

:open_mouth:

This code:

{{#if publicUserFields}}
  <div class="public-user-fields">
    {{#each uf in publicUserFields}}
      {{#if uf.value}}
        <div class="public-user-field {{uf.field.dasherized_name}}" data-value="{{uf.value}}">
          <span class="user-field-name">{{uf.field.name}}:</span>
          <span class="user-field-value">{{uf.value}}</span>
        </div>
      {{/if}}
    {{/each}}
  </div>
{{/if}}

Where I need to add?