Viewer Preset editor presentation mode not changeable | Community
Skip to main content
J
JaimePe1
May 27, 2025
Solved

Viewer Preset editor presentation mode not changeable

  • May 27, 2025
  • 3 replies
  • 760 views

I created a Viewer Preset of the type Interactive Image for the use of custom hotspot. I am unable to change the presentation mode away from Desktop. The Buttons that should allow me to change are not selectable and disabled. I was looking in the documentation of Viewer Presets but saw nothing that mention that this would be the case. That could be the issue?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SantoshSai

Hi @jaimepe1,

I am assuming you are talking about AEM Dynamic Media -  Interactive Image Viewer Preset:

When creating a Viewer Preset of type Interactive Image, the Presentation Mode (Desktop, Tablet, Mobile) options are intentionally disabled. This is expected behaviour - even though it’s not clearly documented.

The reason is that Interactive Image viewers are primarily designed for desktop use and do not support multiple presentation modes like some other viewer types (eg. Image Set, Spin Set, or Video viewers). As a result, the UI controls to switch or configure presentation modes are not available for this viewer type.

If your use case requires responsive behaviour across devices, you can:

  • Embed the viewer within a responsive container and manage layout with CSS.

  • Or, for more control and flexibility, use the Dynamic Media Viewer SDK to create a custom viewer that supports different layouts for mobile and tablet devices.

Hope that helps!

3 replies

SantoshSai
Community Advisor
SantoshSaiCommunity AdvisorAccepted solution
Community Advisor
May 27, 2025

Hi @jaimepe1,

I am assuming you are talking about AEM Dynamic Media -  Interactive Image Viewer Preset:

When creating a Viewer Preset of type Interactive Image, the Presentation Mode (Desktop, Tablet, Mobile) options are intentionally disabled. This is expected behaviour - even though it’s not clearly documented.

The reason is that Interactive Image viewers are primarily designed for desktop use and do not support multiple presentation modes like some other viewer types (eg. Image Set, Spin Set, or Video viewers). As a result, the UI controls to switch or configure presentation modes are not available for this viewer type.

If your use case requires responsive behaviour across devices, you can:

  • Embed the viewer within a responsive container and manage layout with CSS.

  • Or, for more control and flexibility, use the Dynamic Media Viewer SDK to create a custom viewer that supports different layouts for mobile and tablet devices.

Hope that helps!

Santosh Sai
    AmitVishwakarma
    Community Advisor
    AmitVishwakarmaCommunity Advisor
    Community Advisor
    May 28, 2025

    Hi @jaimepe1 ,

    When you create a Viewer Preset of type Interactive Image, the Presentation Mode (Desktop / Tablet / Mobile) is intentionally disabled this is by design.

    Why?

    Interactive Image Viewers are only supported on Desktop viewports in the standard viewer config. Adobe does not expose UI toggles for tablet/mobile presentation modes because:

    Interactive hotspots may not be responsive or accessible on smaller screens

    The rendering behavior is not optimized for mobile devices out-of-the-box

    This is why the "Presentation Mode" buttons are disabled even though no official documentation clearly calls this out.

     

    Option 1: Responsive Embedding Using CSS

    Wrap your Interactive Image Viewer inside a responsive container and let CSS media queries handle layout for mobile/tablet.

    Example:

    <div class="responsive-wrapper"> <iframe src="https://s7d1.scene7.com/s7viewers/html5/InteractiveImageViewer.html?config=companyx/CustomViewerPreset&asset=companyx/my-image" frameborder="0" style="width: 100%; height: 100%;" allowfullscreen ></iframe> </div> <style> .responsive-wrapper { width: 100%; padding-top: 75%; /* Aspect ratio (4:3) */ position: relative; } .responsive-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style>

    This makes your viewer behave responsively across mobile, tablet, and desktop.

     

    Option 2: Use Dynamic Media Viewer SDK (Advanced, Custom Layouts)

    If you need full control over responsive behavior, use the Dynamic Media Viewer SDK to build your own custom viewer.

    Features:

      - Dynamically adapt layout based on screen size

      - Custom hotspot behavior per device

      - Full control over zoom, hotspots, interactivity, etc.

    Example Flow:

      - Load s7viewers.js

      - Create custom configuration using JS

      - Initialize viewer inside a responsive div

    Regards,
    Amit

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    July 14, 2025

    @jaimepe1 Just checking in — were you able to resolve your issue?
    We’d love to hear how things worked out. If the suggestions above helped, marking a response as correct can guide others with similar questions. And if you found another solution, feel free to share it — your insights could really benefit the community. Thanks again for being part of the conversation!

    Kautuk Sahni
    Terms & ConditionsAccessibility statement

    Loading footer...