Renders a gallery of whale images + urls in a grid format using Streamlit.
The function formats whale names, creates a grid layout for images, and
applies custom CSS styles Each image is displayed with a caption and a link
to a reference URL.
Parameters:
| Name |
Type |
Description |
Default |
n_cols
|
int
|
Number of columns in the grid. Default is 4.
|
4
|
Source code in src/whale_gallery.py
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81 | def render_whale_gallery(n_cols:int = 4) -> None:
"""
Renders a gallery of whale images + urls in a grid format using Streamlit.
The function formats whale names, creates a grid layout for images, and
applies custom CSS styles Each image is displayed with a caption and a link
to a reference URL.
Parameters:
n_cols (int): Number of columns in the grid. Default is 4.
"""
def _format_whale_name(name:str) -> str:
'''clean up the whale name for display'''
return name.replace("_", " ").capitalize()
# make a grid of images, use some css to get more uniform
# https://discuss.streamlit.io/t/grid-of-images-with-the-same-height/10668/12
# nb: I think there are some community components, need to investigate their usage
st.markdown(
"""
<style>
.st-key-swgallery div[data-testid="stVerticalBlock"] {
justify-content: center;
}
.st-key-swgallery div[data-testid="stVerticalBlockBorderWrapper"] {
display: flex !important;
min-height: 185px !important; //185 for image+caption or 255 with link
align-items: center;
//background-color: darkgreen;
}
/*
.st-key-swheader div[data-testid="stVerticalBlockBorderWrapper"] {
background-color: lightgreen;
min-height: 16px !important;
border: 1px solid #ccc;
}
*/
.st-key-swgallery div[data-testid="stColumn"] {
flex: 1 !important; /* additionally, equal width */
padding: 1em !important;
align-items: center;
border: solid !important;
border-radius: 0px !important;
max-width: 220px !important;
border-color: #0000 !important;
}
</style>
""",
unsafe_allow_html=True,
)
cols = cycle(st.columns(n_cols))
for ix in range(len(sw_wv.df_whale_img_ref)):
img_name = sw_wv.df_whale_img_ref.iloc[ix].loc["WHALE_IMAGES"]
whale_name = _format_whale_name(str(sw_wv.df_whale_img_ref.iloc[ix].name))
url = sw_wv.df_whale_img_ref.iloc[ix].loc['WHALE_REFERENCES']
# Define image paths
current_dir = os.getcwd()
image_path = os.path.join(current_dir, "src/images/references/", img_name)
#image_path = f"images/references/{img_name}"
#next(cols).image(image_path, width=150, caption=f"{whale_name}")
thing = next(cols)
with thing:
with st.container(border=True):
# using the caption for name is most compact but no link.
#st.image(image_path, width=150, caption=f"{whale_name}")
st.image(image_path, width=150)
#st.markdown(f"[{whale_name}]({url})" ) # doesn't seem to allow styling, just do in raw html:w
html = f"<div style='text-align: center; font-size: 14px'><a href='{url}'>{whale_name}</a></div>"
st.markdown(html, unsafe_allow_html=True)
|