Image component

The Image component allows you to add and customize images in Fliplet Studio. It includes tools for selecting, editing, and configuring images, as well as options for accessibility, performance, and interactivity. This article provides an overview of its key features and capabilities.

How to Use an Image Component

Selecting images

In the Select Image tab, you can browse your app’s file manager or upload new files by dragging them into the manager. Double-clicking a file replaces the placeholder image with your chosen image.

Editing images

The Image Editor tab provides a live preview of your selected image and offers three editing tools:

• Crop – Choose from aspect ratios such as Custom, Original, 4:1, 16:9, 4:3, or 1:1, and adjust the crop area before applying.
• Resize – Enter pixel dimensions for width and height, with the option to lock or unlock the aspect ratio.
• Rotate – Rotate the image left or right, preview the changes, and apply or cancel as needed.

Configuring settings

The Settings tab gives you control over interactions, performance, and accessibility:

• Interactions – Choose how users can engage with the image:
  • No interaction (static image)
  • Pinch-to-zoom (zoom within the app preview)
  • Pinch-to-zoom (Full screen) – expands the image when tapped
  • Other tap/click actions, including:
    • Display another screen
    • Go back to the previous screen
    • Return to the app list
    • Open a web page
    • Open a document
    • Play a video
    • Open the “about this app” overlay
    • Log out
    • Call a JavaScript function
• Performance – Enable lazy loading by selecting “Load this image after the page is loaded” to improve performance on image-heavy screens.
• Accessibility – Provide alternative text to describe the image for screen readers. Leave the field blank only if the image is decorative.

Managing components

Once added, images can be duplicated, moved, or deleted using the orange toolbar above the component. Changes are applied when you select Save & Close in the configuration panel. You can then preview your app to test the image settings and publish when ready.

Tips

• Use optimized, high-resolution images for clarity without slowing down performance.
• Enable full-screen pinch-to-zoom for galleries or detailed images that benefit from closer inspection.
• Combine lazy loading with smaller file sizes to improve speed on screens with many images.
• Write clear and concise alt text for accessibility wherever possible.

Troubleshooting

• Stretched images – Check the aspect ratio lock when resizing and reapply cropping if needed.
• Image not displaying – Ensure the file has uploaded successfully and is not hidden behind another element.
• Pinch-to-zoom not working – Confirm the correct interaction setting has been selected.
• Link action not triggering – Verify that the selected action has been configured correctly with a valid target.