Author Topic: Event message image alignment  (Read 89 times)

Blind Joe

  • Newbie
  • *
  • Posts: 22
    • View Profile
Event message image alignment
« on: September 03, 2021, 03:47:35 AM »
In an event message, player images seem to align to the bottom while custom images align to the top.

For example, if I use the same image twice side by side, first using <playerimage> and second using <image path="C:\...jpg"> they will be misaligned.

Any way to change this?

Corey Cooper

  • Administrator
  • Hero Member
  • *****
  • Posts: 5977
    • View Profile
Re: Event message image alignment
« Reply #1 on: September 04, 2021, 02:34:03 PM »
You can try putting the elements in a table, or use flexbox or grid layout.

Examples:

<table>
  <tr>
    <td><playerimage></td>
    <td><img src="C:\...jpg"></td>
  </tr>
</table>


or


<div style="display: flex; flex-direction: row"><playerimage><img src="C:\...jpg"></div>


Flex has other options that allow the individual elements to be aligned in different ways.  Can you show me how your images look?

Blind Joe

  • Newbie
  • *
  • Posts: 22
    • View Profile
Re: Event message image alignment
« Reply #2 on: September 05, 2021, 12:24:14 PM »
I've tried both of your suggested methods and attached pictures of the results of each (in order). In both cases the images are resized to 360px, though this seems to have no effect in the flex method.
« Last Edit: September 05, 2021, 12:27:08 PM by Blind Joe »

Corey Cooper

  • Administrator
  • Hero Member
  • *****
  • Posts: 5977
    • View Profile
Re: Event message image alignment
« Reply #3 on: September 06, 2021, 11:06:39 PM »
Are they the same image file?  Can you provide the exact HTML you used?  Attach the image(s) too if you don't mind.  I can play around with it.

Blind Joe

  • Newbie
  • *
  • Posts: 22
    • View Profile
Re: Event message image alignment
« Reply #4 on: September 07, 2021, 02:17:27 AM »
Yes they are the same image. Here's what I used for table:

<table>
  <tr>
    <td><playerimage size=360></td>
    <td><img src="C:\...jpg"  width="360" height="360"></td>
  </tr>
</table>

And here's what I used for flexbox:

<div style="display: flex; flex-direction: row"><playerimage size=360><img src="C:\...jpg" width="360" height="360"></div>

Corey Cooper

  • Administrator
  • Hero Member
  • *****
  • Posts: 5977
    • View Profile
Re: Event message image alignment
« Reply #5 on: September 07, 2021, 09:07:41 AM »
What is the original image size?  Also, if you could attach it that would be great, too.

Blind Joe

  • Newbie
  • *
  • Posts: 22
    • View Profile
Re: Event message image alignment
« Reply #6 on: September 07, 2021, 12:30:47 PM »
The original is 1404 by 1404

Corey Cooper

  • Administrator
  • Hero Member
  • *****
  • Posts: 5977
    • View Profile
Re: Event message image alignment
« Reply #7 on: September 07, 2021, 05:49:30 PM »
Thanks.  Took me a bit to reproduce, but I think I've figured this out for the most part.

The first issue is right here: <playerimage size=360>.  I can't recall if I knew this was slightly different going into version 3.7 or not, but the XML parser apparently works a little differently.  It does not like that the attribute value doesn't have quotes around it.  To fix this, add quotes: <playerimage size="360">.  This will size your player image correctly.  Without it the size defaults to 100 pixels.  And to get around that, I had to change the player image size override for the Game window in the Display section of the Preferences tab.  Using quotes fixes the sizing.

As for the <table> version, I honestly don't know why the element in one <td> would be aligned differently than the other.  I'm sure there's some obscure CSS rule somewhere that explains it.  But you can fix this by setting the alignment in the first <td>:

<table>
  <tr>
    <td style="vertical-align: top"><playerimage size="360"></td>
    <td><img src="C:\...\joe2.png"  width="360" height="360"></td>
  </tr>
</table>


With the adjustments, the two methods are more or less equal, but the table version has some extra whitespace around the images and even more whitespace at the bottom.  I'm sure that could be cleared up with some more adjustments, but I would just use the simpler flexbox version, as it adds no additional whitespace.

Ultimately I see what is missing is an option to utilize the player image in a way you want.  That is, the <playerimage> output will be rendered according to the player image preferences: it will be a specific size (unless overridden with the size attribute), and will have a border and background color and be shaped according to the player image preferences.  It would be nice I think to have another token that provides just the image path, allowing you to put that image into any HTML you want without restriction.  Thanks for bringing this to my attention.

Blind Joe

  • Newbie
  • *
  • Posts: 22
    • View Profile
Re: Event message image alignment
« Reply #8 on: September 09, 2021, 01:51:40 AM »
Thanks for your help Corey  :)

Essentially I was experimenting to try and achieve something like the event message attached below (bust out messages with an individual "busted" style player image) but I think it's prohibitively time consuming and I keep running into more hurdles, eg. adding text between the image columns makes them go out of alignment again for some reason!

It's no big deal though, just something I thought I'd try. If there was ever a way to do this using the built in images rather than individual messages based on player IDs and custom images I'd be all for it though  ;)