Skip to main content
This is a custom warning

Does the component apply visual style — color, typography, icons, space, borders, and more — using appropriate variable tokens?

Tovuti Impacted

[8-13-24 12:00 PM MT] Our Technology team is aware of the issue with Interactive Content and is working on a resolution. In the meantime, we do not recommend attempting to edit this content, as it will not resolve the issue.

Please check back here for updates.

Email support@tovutiteam.com if you have any questions.

Unlock the power of AI-generated content creation with Dizi

Dizi is an AI-powered LMS content creation assistant that creates quizzes and lessons in seconds and entire professional-looking courses in just minutes. Turn weeks of research, planning, and lesson-building into a click of a button.
Reminder! Tovuti Weekly Maintenance Window!

Tovuti's scheduled weekly maintenance window is every Saturday between 8:00 AM and 12:00 PM, US Mountain Time.

There may be downtime during this period.

Insert a Mobile Responsive Image (WYSIWYG Editor)

  • Updated

When users access the Learner Portal on a mobile or desktop device, Admins may ensure an image from the Tovuti WYSIWYG Editor displays correctly.

This article outlines the following concepts:

 

Access WYSIWYG Editor

From the Admin Portal, navigate to the WYSIWYG Editor > click the Image icon

admin_wysiwyg_responsive_image_01.png

 

Upload Images

Upload two versions of the image: one with dimensions for desktop and one with dimensions for mobile. Test different dimensions to determine what works best for the image.

Select the images and copy the provided URLs for each.

admin_wysiwyg_responsive_image_02.png

 

Responsive tab

Go to the Responsive tab. Click the “+” button (1) to add a responsive image option.

In the first option, paste the URL (2) for the desktop image. In the second option, paste the URL for the mobile image.

Input 1 for the x-value (3) of the desktop image and a value over 1 (1.1) for the x-value of the mobile image (4).

admin_wysiwyg_responsive_image_03.png

 

Desktops use physical pixels to render images; therefore, inputting a ratio of 1 renders the image as defined by the dimensions. Mobile devices use virtual pixels to render webpages designed for desktops. For this reason, mobile devices always have a Pixel Ratio (virtual to physical pixels) of greater than 1. 

Inputting 1.1 for the x-value of the mobile image fulfills the requirements for creating the responsive image. Test different ratios above 1 and view the rendered image on different mobile devices.

Related articles