Skip to content

Presentation Tool Does Not Show Overlays on Images in Astro #326

@rusbers

Description

@rusbers

Describe the bug

When enabling the Presentation Tool with Astro, the blue overlays for visual editing appear over text but not over images. I checked my implementation and didn't find any mistakes in my code.

To verify, I also cloned the official Sanity Astro Movies example (repo link), which includes visual editing, and noticed that overlays over images don’t appear there either.

Is there an issue with how the Presentation Tool works with Astro? Or is there any additional configuration required to make overlays work for images?

Additional Context

  • I followed the Sanity Astro Blog Tutorial to integrate the Presentation Tool.
  • The same issue appears in the official movies example project.
  • The browser console does not show any relevant errors.

I have also created a repository where this issue can be reproduced:

To Reproduce

  1. Clone my project: astro-template (blog-tutorial branch).
  2. Create a .env file in the project root with the following values:
    PUBLIC_SANITY_PROJECT_ID=""  
    PUBLIC_SANITY_DATASET="production"  
    PUBLIC_SANITY_VISUAL_EDITING_ENABLED="true"  
    SANITY_API_READ_TOKEN=""  
  3. Start Sanity Studio and create the first post.
  4. Run the Astro project and navigate to http://localhost:4321/post/slug-name.
  5. Try to use the Presentation Tool. The overlays appear over text but not over images.

Expected behavior

The Presentation Tool should show overlays over images, similar to how it does over text.

Actual behavior

The blue overlays do not appear over images, making visual editing of images difficult.

Screenshots

Image

Which versions of Sanity are you using?

@sanity/cli (global)  3.68.3 (latest: 3.80.1)
@sanity/astro          3.2.6 (up to date)
@sanity/image-url      1.1.0 (up to date)
sanity                3.80.1 (up to date)

What operating system are you using?

Windows 11

Which versions of Node.js / npm are you running?

$ npm -v && node -v
10.8.2
v20.16.0

Would appreciate any insights into whether this is a bug or a misconfiguration! 🙏

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions