ui.links over ui.image

[Teancum-Q]

Question

I'm trying to build a photography website, and i'd like to have an image in the background of the homepage, with links to other pages. I figured i'd just do this with ui.link, but it seems that if i nest them in ui.image, I loose the ability to click the links. Is this the expected response? If so, could you offer an alternative? Thank you.

with ui.image('portrait.jpg').props('fit=scale-down').classes('w-full'):
        ui.link('Gallery', gallery_page)

[rodja]

You can use the all-pointer-events class on the link (or wrap your content in a row/cloumn to make it a caption):

ui.query('.nicegui-content').classes('p-0')
with ui.image('https://picsum.photos/1400/1400').props('fit=cover no-native-menu').classes('max-w-screen max-h-screen'):
    ui.link('https://nicegui.io').classes('all-pointer-events text-white text-4xl absolute-bottom m-4')

[falkoschindler]

Adding the class "all-pointer-events" to every child element might be a bit impracticable.

If I understand correctly, you're trying to create a background image for some container element

with ui.column().classes('w-80 h-80 bg-[url(https://picsum.photos/id/377/640/360)]'):
    ui.link('Google', 'https://www.google.com')
    ui.link('Yahoo', 'https://www.yahoo.com')
    ui.link('Bing', 'https://www.bing.com')

or the whole page

ui.context.client.layout.classes('bg-[url(https://picsum.photos/id/377/1920/1080)] bg-cover bg-center')
ui.link('Google', 'https://www.google.com')
ui.link('Yahoo', 'https://www.yahoo.com')
ui.link('Bing', 'https://www.bing.com')

[Teancum-Q]

Thank you very much. I was having trouble because this only works for hosted images by url. Local images would need to be in the source file. But i figured it out, I just needed to us the built in add_static_files function with my image files. Then apply your CSS class discriptor. Of course you had already thought of this, it just took me awhile to find it.

app.add_static_files('/images', 'images')
ui.context.client.layout.classes('bg-[url(images/portrait.jpg)] bg-cover bg-center')

or

app.add_static_files('/images', 'images')
ui.column().classes('w-80 h-80 bg-[url(images/portrait.jpg)]')