LogoLogo
FeaturesHelp & ResourcesShowcasePricingLogin
Learn Section
Learn Section
  • Introduction
  • Getting Started
    • Finding your way around
    • Core concepts
      • Data Binding
      • Data Insertion
      • Dynamic Visibility
    • Creating and managing projects
      • Creating a Project
      • Saving a Project
      • Opening a Project
      • Version History
    • Templates
  • Components
    • Overview
    • Layout & Positioning
    • Charts
      • Line Chart
      • Column Chart
      • Bar Chart
      • Pie Chart
      • Combination Chart
      • Area Chart
      • Spline Chart
      • Step Chart
    • DataViz
      • Gauge
      • Word Cloud
      • Chord Diagram
      • Sankey Diagram
      • Schedule (Gantt)
      • Metric Tile
      • Progress Bar
      • Trend Icon
      • Mapbox
      • Loading Animation
    • Tables
      • Scorecard
      • Data Table
    • Controls
      • Push Button
      • Dropdown
      • Multi Select Dropdown
      • Listbox
      • Label Based Menu
      • Checkbox
      • Radio Button
      • Slider
      • Value Input
      • Print Button
      • URL Button
      • Screenshot
      • Hotspot
      • Date Picker
      • Toggle Switch
      • Scenario
    • Text
      • Text Label
      • Text Input
      • Text Area
    • Shapes
      • Rectangle
      • Ellipse
      • Line
    • Media
      • Image
      • Icon
    • Containers
      • Container
      • Web View
      • Repeat Container
      • Row Layout
      • Column Layout
  • Functions
    • Overview
    • Data Mover
    • External Parameters
    • Export to Excel
    • Export to PDF
    • Timer
    • Tableau Parameters
    • Browser Info
    • TextJoin
    • Unique List
  • Connections
    • Overview
    • Excel One Drive
      • Excel One Drive Read
      • Excel One Drive Writeback
    • Google Sheets
      • Google Sheets Read
      • Google Sheets Writeback
    • Ninox Connections
    • Smartsheets
    • CSV Connector
    • SAP Webi Connector
    • XDC Connections
    • Database Connections
    • Zapier Trigger
  • Spreadsheet
    • Overview
    • Spreadsheet functionality
    • Supported Spreadsheet Functions
    • Spreadsheet performance
  • Best practices for the Squirrel spreadsheet
  • Publishing & Sharing
    • Overview
    • Project Settings
    • Publishing to Squirrel Cloud
    • Publishing Locally
    • Using the Project Manager
    • Adding projects to PowerPoint
    • Adding projects to Tableau
    • Progressive Web Apps (PWA)
  • SETTINGS
    • Image Library
    • Custom Fonts
  • Account Management
    • Manage your account Profile
    • Understanding your Squirrel plan usage
    • Changing your Plan
    • Billing
    • How do I delete my account?
  • Frequent Questions
    • What data do you keep and for how long?
  • How-Tos
    • Overview
    • Add-ons
      • Add-on Documentation
      • Window Size – Add responsive behavior to your components
      • Window Size - Getting responsive behavior in the canvas
    • Adding your own Google Fonts
    • Chart title and Checkbox label text case formatting
    • Deleting functions and connections
    • Find & Replace Fonts
    • Getting a Mapbox API access token
    • Renaming a component, function or connection
    • Seeing Data from a Connector at Design time
    • Troubleshooting Projects in the Console
    • Using colors and color values
  • Tutorials
    • Create a temperature conversion app
    • Create a revenue growth app from an existing spreadsheet
    • Whack-A-Squirrel Game
    • Filtered Rows Insertion: Building a Filtered Selection
Powered by GitBook
LogoLogo

Explore

  • Home
  • Features
  • Pricing
  • Download Squirrel

Help

  • Learn
  • Community
  • Support
  • FAQ's

Updates

  • Blog
  • Events
  • Release Notes

Company

  • Contact Us
  • Privacy Policy
  • Terms of Use

Copyright © 2019 - 2024 InfoSol Ltd. All rights reserved.

On this page
  • Image Properties
  • GENERAL
  • STYLING

Was this helpful?

  1. Components
  2. Media

Image

This article describes how to configure the Image component and details each of its properties.

PreviousMediaNextIcon

Last updated 1 month ago

Was this helpful?

The Image component allows you to display graphics within your Squirrel projects. Media types supported include .jpg, .png, .bmp, .gif, etc.

Select Image from the Media category of the component library. Move the mouse cursor over the canvas and click to add an image to your project.

Image Properties


GENERAL

  • Source image from

    • My Library – select an image from the Image Library, uploaded from your computer

    • URL – get the image from a web link

    • Unsplash – search for an image in the Unsplash library

My Library

Upload image — The Import button is only available when the My Library option is selected in the 'Source image from' property. Click to open the File Explorer window and locate the image source file.

Once selected, the Image will be uploaded and can be accessed through the Image Library.

URL

Image URL — Available only when the URL option is selected in the 'Source image from' property. Type or paste the URL into the property field, or bind to a cell in the spreadsheet containing the required image's URL.

Note that for both URL and Unsplash sources, the project must have access to the internet when it is running, for the image to be displayed

Unsplash

Search — The search box is available when the Unsplash option is chosen. Type in a search term and hit return to see a selection of related images. Click on one of the images to insert it into your project.

  • Opacity – This determines the transparency of the Image component and can be set in 4 different ways:

    • Using the opacity slider

    • Typing in a value

    • Using the spinner buttons (values are adjusted by 10% per click)

    • Binding to value in a spreadsheet cell

  • Resize image to component – Checking this option will constrain the image size to the proportions of the Image component.

  • Maintain aspect ratio – This option maintains the image’s natural width-to-height ratio (its aspect ratio) as the component is resized, ensuring the image is not distorted by the resize. (This option is only available when “Resize image to component” is selected)

  • Block mouse events – Checking this option will stop mouse interactions with components covered by the Image component, e.g. a slider component sitting on a layer beneath the image component would not function. A partially covered component may still have some functionality. The option is checked by default.

STYLING

Corners - adjust the slider to adjust the roundness of the image component's corners.

The Image properties consist of three property drawers, a GENERAL drawer, STYLING drawer, and a DYNAMIC VISIBILITY drawer. This guide will not describe the dynamic visibility properties as these are generic to each visible component, a separate guide and tutorial on dynamic visibility can be found .

here