Viewer Preset editor presentation mode not changeable

[JaimePe1]

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?

[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!

[AmitVishwakarma]

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