{"id":1374,"date":"2020-06-03T16:11:41","date_gmt":"2020-06-03T16:11:41","guid":{"rendered":"http:\/\/code.fliplet.com\/?p=1374"},"modified":"2025-09-08T16:15:26","modified_gmt":"2025-09-08T16:15:26","slug":"image-component","status":"publish","type":"post","link":"https:\/\/help.fliplet.com\/image-component\/","title":{"rendered":"Image component"},"content":{"rendered":"<p>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.<\/p>\r\n<h2>How to Use an Image Component<\/h2>\r\n<div class=\"iframe-container\"><iframe loading=\"lazy\" width=\"640\" height=\"400\" frameborder=\"0\" src=\"https:\/\/www.youtube.com\/embed\/3aAV8b_GDPw?rel=0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\r\n<h2>Selecting images<\/h2>\r\n<p>In the <strong>Select Image<\/strong> tab, you can browse your app\u2019s file manager or upload new files by dragging them into the manager. Double-clicking a file replaces the placeholder image with your chosen image.<\/p>\r\n<h2>Editing images<\/h2>\r\n<p>The <strong>Image Editor<\/strong> tab provides a live preview of your selected image and offers three editing tools:<\/p>\r\n<ul>\r\n\t<li><strong>Crop<\/strong> \u2013 Choose from aspect ratios such as Custom, Original, 4:1, 16:9, 4:3, or 1:1, and adjust the crop area before applying.<\/li>\r\n\t<li><strong>Resize<\/strong> \u2013 Enter pixel dimensions for width and height, with the option to lock or unlock the aspect ratio.<\/li>\r\n\t<li><strong>Rotate<\/strong> \u2013 Rotate the image left or right, preview the changes, and apply or cancel as needed.<\/li>\r\n<\/ul>\r\n<h2>Configuring settings<\/h2>\r\n<p>The <strong>Settings<\/strong> tab gives you control over interactions, performance, and accessibility:<\/p>\r\n<ul>\r\n\t<li><strong>Interactions<\/strong> \u2013 Choose how users can engage with the image:\r\n\r\n<ul>\r\n\t<li>No interaction (static image)<\/li>\r\n\t<li>Pinch-to-zoom (zoom within the app preview)<\/li>\r\n\t<li>Pinch-to-zoom (Full screen) \u2013 expands the image when tapped<\/li>\r\n\t<li>Other tap\/click actions, including:\r\n\r\n<ul>\r\n\t<li>Display another screen<\/li>\r\n\t<li>Go back to the previous screen<\/li>\r\n\t<li>Return to the app list<\/li>\r\n\t<li>Open a web page<\/li>\r\n\t<li>Open a document<\/li>\r\n\t<li>Play a video<\/li>\r\n\t<li>Open the \u201cabout this app\u201d overlay<\/li>\r\n\t<li>Log out<\/li>\r\n\t<li>Call a JavaScript function<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n\t<li><strong>Performance<\/strong> \u2013 Enable lazy loading by selecting \u201cLoad this image after the page is loaded\u201d to improve performance on image-heavy screens.<\/li>\r\n\t<li><strong>Accessibility<\/strong> \u2013 Provide alternative text to describe the image for screen readers. Leave the field blank only if the image is decorative.<\/li>\r\n<\/ul>\r\n<h2>Managing components<\/h2>\r\n<p>Once added, images can be duplicated, moved, or deleted using the orange toolbar above the component. Changes are applied when you select <strong>Save &amp; Close<\/strong> in the configuration panel. You can then preview your app to test the image settings and publish when ready.<\/p>\r\n<h2>Tips<\/h2>\r\n<ul>\r\n\t<li>Use optimized, high-resolution images for clarity without slowing down performance.<\/li>\r\n\t<li>Enable full-screen pinch-to-zoom for galleries or detailed images that benefit from closer inspection.<\/li>\r\n\t<li>Combine lazy loading with smaller file sizes to improve speed on screens with many images.<\/li>\r\n\t<li>Write clear and concise alt text for accessibility wherever possible.<\/li>\r\n<\/ul>\r\n<h2>Troubleshooting<\/h2>\r\n<ul>\r\n\t<li><strong>Stretched images<\/strong> \u2013 Check the aspect ratio lock when resizing and reapply cropping if needed.<\/li>\r\n\t<li><strong>Image not displaying<\/strong> \u2013 Ensure the file has uploaded successfully and is not hidden behind another element.<\/li>\r\n\t<li><strong>Pinch-to-zoom not working<\/strong> \u2013 Confirm the correct interaction setting has been selected.<\/li>\r\n\t<li><strong>Link action not triggering<\/strong> \u2013 Verify that the selected action has been configured correctly with a valid target.<\/li>\r\n<\/ul>\r\n<div class=\"pre-requisites\">\r\n<p><strong>Related Articles<\/strong><\/p>\r\n<ul>\r\n\t<li><a href=\"\/selecting-files\/\">Selecting Files<\/a><\/li>\r\n\t<li><a href=\"\/configure-links\/\">Configure Links<\/a><\/li>\r\n\t<li><a href=\"\/gallery-component\/\">Gallery Component<\/a><\/li>\r\n\t<li><a href=\"\/grid-component\/\">Grid Component<\/a><\/li>\r\n\t<li><a href=\"\/slider-component\/\">Slider Component<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<!-- \/wp:post-content -->","protected":false},"excerpt":{"rendered":"<p>Easily add an image from a file to your app<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[190],"tags":[38,209],"class_list":["post-1374","post","type-post","status-publish","format-standard","hentry","category-component","tag-image","tag-components"],"_links":{"self":[{"href":"https:\/\/help.fliplet.com\/wp-json\/wp\/v2\/posts\/1374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.fliplet.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/help.fliplet.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/help.fliplet.com\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/help.fliplet.com\/wp-json\/wp\/v2\/comments?post=1374"}],"version-history":[{"count":5,"href":"https:\/\/help.fliplet.com\/wp-json\/wp\/v2\/posts\/1374\/revisions"}],"predecessor-version":[{"id":9573,"href":"https:\/\/help.fliplet.com\/wp-json\/wp\/v2\/posts\/1374\/revisions\/9573"}],"wp:attachment":[{"href":"https:\/\/help.fliplet.com\/wp-json\/wp\/v2\/media?parent=1374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/help.fliplet.com\/wp-json\/wp\/v2\/categories?post=1374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/help.fliplet.com\/wp-json\/wp\/v2\/tags?post=1374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}