Fix gallery style #4576
Fix gallery style #4576
Conversation
|
No worries! |
|
All the demos for this PR have been deployed at https://huggingface.co/spaces/gradio-pr-deploys/pr-4576-all-demos |
freddyaboulton
requested review from
pngwn,
aliabid94,
abidlabs,
dawoodkhan82 and
hannahblair
|
@freddyaboulton am I missing something or are the preview buttons not being shown anymore at the bottom of the Gallery? code: import pathlib
import gradio as gr
paths = [
path.as_posix() for path in sorted(pathlib.Path('.').glob('c*.jpg'))
]
with gr.Blocks() as demo:
gallery = gr.Gallery(value=paths)
demo.queue().launch()
|
|
@abidlabs - the preview buttons only show up if the image is clicked right? On the docs of the latest release:
|
… into 4542-fix-gallery-style
|
Ah my bad! I'm still getting weird behavior when clicking on the images to get to the preview:
Also in an embedded setting (like Jupyter notebook, or Spaces I assume), I'm not able to click on the images at all to get to the preview (nothing happens when you click on them), which I was confused in the first place |
|
@abidlabs I just pushed up a fix for the first issue you noted (you can test fix here) - that's reproducible on main and not introduced in this pr. See https://huggingface.co/spaces/hysts-debug/gallery-gradio-3-34-0 Let me look at the jupyter notebook issue now! Thanks for flagging |
| <div | ||
| on:keydown={on_keydown} | ||
| class="preview" | ||
| class:fixed-height={height !== "auto"} |
There was a problem hiding this comment.
Got rid of fixed-height so that the preview would cover the block and not look like this:
| class:pt-6={show_label} | ||
| > | ||
| {#each _value as [image, caption], i} | ||
| <button | ||
| class="thumbnail-item thumbnail-lg" | ||
| class:selected={selected_image === i} | ||
| on:click={() => (selected_image = can_zoom ? i : selected_image)} | ||
| on:click={() => (selected_image = i)} |
There was a problem hiding this comment.
Got rid of can_zoom to fix the gallery click not working on jupyter that @abidlabs noticed. I think the zoom works well on small screens but it's possible I misunderstood the original motivation for this variable
There was a problem hiding this comment.
LGTM @freddyaboulton. I tried a lot of different parameters and the issues seem to have been resolved, thanks!
Let's write some tests for Gallery later this week.
|
Even the Gallery from @pngwn's original demo renders fine: 
|
| @@ -229,15 +222,14 @@ | |||
| > | |||
| <div | |||
| class="grid-container" | |||
| style="{grid_cols_style} {grid_rows_style}" | |||
| style:object_fit | |||
| style="{grid_cols_style} {grid_rows_style} --object-fit: {object_fit}; height: {height}" | |||
There was a problem hiding this comment.
why is height set here? it's already set in the parent Block in js/app/src/components/Gallery/Gallery.svelte
There was a problem hiding this comment.
Need here otherwise the parameter is not respected in the actual gallery size:
|
Thanks for the reviews everyone!! |
Description
Fixes: #4542
@hannahblair - started working on this before you assigned yourself. Should have assigned myself. Sorry!
@aliabid94 I think this is just an oversight from #4374 ?
Repro:
Deployed this pr to a duplicate of the original repro space (https://huggingface.co/spaces/freddyaboulton/gallery-gradio-3-35-2)
You can clone this locally and build this PR to test locally.
🎯 PRs Should Target Issues
Before your create a PR, please check to see if there is an existing issue for this change. If not, please create an issue before you create this PR, unless the fix is very small.
Not adhering to this guideline will result in the PR being closed.
Tests & Changelog
PRs will only be merged if tests pass on CI. To run the tests locally, please set up your Gradio environment locally and run the tests:
bash scripts/run_all_tests.shYou may need to run the linters:
bash scripts/format_backend.shandbash scripts/format_frontend.shUnless the pull request is labeled with the "no-changelog-update" label by a maintainer of the repo, all pull requests must update the changelog located in
CHANGELOG.md:Please add a brief summary of the change to the Upcoming Release section of the
CHANGELOG.mdfile and includea link to the PR (formatted in markdown) and a link to your github profile (if you like). For example, "* Added a cool new feature by
[@myusername](link-to-your-github-profile)in[PR 11111](https://github.com/gradio-app/gradio/pull/11111)".