add_text_img

add_text_img(text, img_url, height=30, gap=3.0, left=False, alt_text='')

Create an HTML element with text and an image, displayed inline.

Note that depending on where you are placing the output in the table, you may want to wrap it in GT.html().

Parameters

text : str: The text to display alongside the image.
img_url : str: The URL of the image to display. This can be a filepath or an image on the web.
height : int = 30: The height of the image in pixels.
gap : float = 3.0: The spacing between the text and the image in pixels.
left : bool = False: If True, the image is displayed to the left of the text.
alt_text : str = '': The alternative text for the image, used for accessibility and displayed if the image cannot be loaded.

Returns

: str: A string with html content of the combined image and text. Depending on where you are placing the output in the table, you may want to wrap it in GT.html().

Examples

import pandas as pd
from great_tables import GT, md, html
import gt_extras as gte

df = pd.DataFrame(
    {
        "Player": ["Josh Hart", "Jalen Brunson"],
        "Points": [1051, 1690],
        "Assists": [453, 475],
    }
)

hart_img = gte.add_text_img(
    text="Josh Hart",
    img_url="https://a.espncdn.com/combiner/i?img=/i/headshots/nba/players/full/3062679.png",
)

brunson_img = gte.add_text_img(
    text="Jalen Brunson",
    img_url="https://a.espncdn.com/combiner/i?img=/i/headshots/nba/players/full/3934672.png",
)

df["Player"] = [hart_img, brunson_img]
gt = (
    GT(df, rowname_col="Player")
    .tab_source_note(md("Images and data courtesy of [ESPN](https://www.espn.com)"))
)

gt

	Points	Assists
Josh Hart	1051	453
Jalen Brunson	1690	475
Images and data courtesy of ESPN

We can even apply the add_text_img() function to content outside of body/stub cells. We must remember to wrap the output in GT.html() so the table renders the element properly.

points_with_img = gte.add_text_img(
    text="Points",
    img_url="../assets/hoop.png",
    left=True,
)

assists_with_img = gte.add_text_img(
    text="Assists",
    img_url="../assets/pass.png",
    left=True,
)

points_img_html = html(points_with_img)
assists_img_html = html(assists_with_img)

(
    gt
    .cols_label({"Points": points_img_html, "Assists": assists_img_html})
    .cols_align("center")
)

	Points	Assists
Josh Hart	1051	453
Jalen Brunson	1690	475
Images and data courtesy of ESPN

Parameters

Returns

Examples

See Also