Format an AGOL Pop-Up with Images

[JulioGarrido]

Hello,

I have created a public-facing sex offender map that shows the location of all sex offenders registered in the county as well as a pop-up with their information.  The information in the pop-up has their State Registration Number (SRN), name, address, and a hyperlink to the state's offender page. Wayne County Sex Offenders  This link is dynamic based on their SRN (e.g. URL+{SRN}).  There is also a dynamic image of their mug shot created the same way as the hyperlink.  

The pop-up is the basic fields list and the image module below it.  The pop-up has worked flawlessly since its time of creation.  However, I want to kick it up a notch.

I found out that I can configure the displayed fields better if I use the Text module instead of the fields list.  Also, to further format the pop-up, I can insert a table in the text module to perfectly align my data.  One thing I would like to do is to have the dynamic mugshot of the offender off to the side of his information instead of down below (see attachments).

I've been researching how to do this, but I haven't been able to find out how to do it.  The hard part of creating a dynamic image based on the offender is done and working.  I just need to format the pop-up better.

Thank you for looking into this.

[jcarlson · Accepted solution]

You can actually wrap the whole thing in another table. Here's the HTML:

<figure class="table">
    <table>
        <tbody>
            <tr>
                <td>
                    <figure class="table">
                        <table>
                            <tbody>
                                <tr>
                                    <td>
                                        SRN
                                    </td>
                                    <td>
                                        {SRN}&nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Name
                                    </td>
                                    <td>
                                        {Name}
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Address
                                    </td>
                                    <td>
                                        {Address}&nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        City
                                    </td>
                                    <td>
                                        {City}&nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        ZIP
                                    </td>
                                    <td>
                                        {Zip}&nbsp;
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Link
                                    </td>
                                    <td>
                                        <a href="{Hyperlink}">Link</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </figure>
                </td>
                <td>
                    <img src="https://sexoffender.ncsbi.gov/photo.aspx?srn={SRN}">
                </td>
            </tr>
        </tbody>
    </table>
</figure>

  And the result:

Any of the tables, cells, etc., can take inline CSS with a style tag, to make the table nicer to look at, to improve the spacing between elements. You can even force the height and width of the image to fix that vertical stretch.

[JulioGarrido]

This is awesome!!!   Thank you!!!  

[JulioGarrido]

The new and improved (Thanks to Josh)