Use images as team names

[efkay1]

Hi,

is it possible to use images instead of team names? I tried html tags but they seem to be interpreted as strings

best regards

[Drarig29]

Yes, you can! First, to display the images, use:

brackets-viewer.js/demo/with-local-storage.html

Lines 45 to 48 in 4a69f6c

	window.bracketsViewer.setParticipantImages(data.participant.map(participant => ({
	participantId: participant.id,
	imageUrl: 'https://github.githubassets.com/pinned-octocat.svg',
	})));

You'll need to have team names even if you don't show them, so you can have names like "Team 1" for example.

After this, you'll need to set some CSS to hide names and make the overall look better. You can make your own custom theme too.

Here is an example:

.brackets-viewer {
  --match-width: 90px;
}

.brackets-viewer h3 {
  padding: 10px 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: var(--match-width);
}

.brackets-viewer .participant .name > img {
    width: 2em;
    height: 2em;
}

.brackets-viewer .participant .name {
    height: 2em;
    color: transparent;
    text-overflow: clip;
}

.brackets-viewer .participant .name.hint {
    text-overflow: ellipsis;
}

[efkay1]

tyvm, I was trying to get a solution with the well known jquery-brackets but failed so I wanted to ask this time before investing weeks of work ;) I will try this solution as soon as I get some free time for it!