Creating a beautiful link

[sedovsedov1]

Good afternoon. I want to insert into the Streamlet project a link to another Streamlet project as on the website in the form of a block from an image that is a link. How is it here Gallery • Streamlit. How to create such a link?

[edsaac]

For adding a link to an image, check this thread where they use st.markdown.

---

For how to get a screenshot of a given URL, here is my approach:

At first, I thought you’d need selenium or playwright to get the screenshot of the website, but turns out there is this much simpler tool called wkhtmltopdf to precisely do that. And luckily someone made a python wrapper for it called imgkit, which is what i used for the example.

import streamlit as st
import imgkit

@st.cache
def get_screeshot(url):
    # Some options to pass to wkhtmltoimage
    # (More info in the man)
    options = {
        '--crop-h': '500',
        '--format': 'png',
        '--enable-javascript': None,
    }
    return imgkit.from_url(url, False, options=options)

# Add some styling with CSS selectors
st.markdown("""
    <style>
    img {
        border-radius: 10px;
        border: solid 1px #dadee8;
    }

    a[href] {
        text-decoration: none;
        color: #ff4b4b;
    }

    h1 {
        font-size: 5rem;
        text-align: center;
    }
    </style>
    """, unsafe_allow_html=True)

# Dict of URLS to screenshot
urls = {
    "Search engines": [
        'duckduckgo.com',
        'bing.com',
        'google.com'],
    "Tools": [
        'isocpp.org',
        'wkhtmltopdf.org',
        'www.python.org',
        'placekitten.com',
        'github.com'],
    "Distros": [
        'www.debian.org',
        'linuxmint.com',
        'archlinux.org'
    ]}

st.title("🖼️ Gallery of websites")

cols = st.columns([1, 2])
with cols[0]:
    category = st.radio("Categories", urls.keys())

for url in urls[category]:
    screenshot = get_screeshot(url)
    with cols[1]:
        st.markdown(f"#### [{url}](https://{url})")
        st.image(screenshot, use_column_width=True)
        st.caption("Some additional description")
        "*****"

Sadly, streamlit apps and sites fail to load using this method:

Also, I did not make the images clickable