Working with Images¶
Why should I add images?¶
Images can reinforce brand identity, improve the user experience, and contribute to the aesthetic of your app. This doc includes best practices for working with images, but isn’t exhaustive.
Where should I store my images?¶
Images can be accessed in a variety of ways, including as a:
- URL
- Field on an object
- Attachment (Salesforce)
- Static resource (Salesforce)
- Content document (Salesforce)
These sources tell Skuid where to look for the image; it also determines if the image is static or dynamic—which can change how you add it to your page.
How do I add an image?¶
To determine the best method for adding an image, ask yourself:
- Is it a static or dynamic image? For example, I’d like to display a grid of profile photos for a group of users—so hardcoded, static images probably wouldn’t work well.
- Where do I want the image to appear?
- Do I need to control the layout and size of the image?
Based on your answers, try one of the following methods to add your image.
Use the Image component¶
Consider using the Image component if your image is part of or reacts to your page’s data. While you can add static images with the Image component, it’s great for displaying images in context. To do so, connect this component to a model, add a field, and dynamically display images based on that field.
If you want to adjust layout beyond height and width, we suggest the Wrapper component instead.
Use the Wrapper component¶
If you want an image that is primarily decorative and stylized, consider using the Wrapper component. This component allows you to add a background image, adjust the size, and add text on top of the image.
This is best for displaying static images like logos and hero images. It also gives you the most granular control over size and layout. Wrappers can’t connect to models, so they aren’t a good fit for dynamic images.
Use a template field in a Table with HTML¶
This is a bit more advanced! Use this method to add dynamic images to a Table component based on the row’s record. For this method, you can add an <img>
HTML element and point towards an image file type, field, or URL.
Check out this Skuid tip of the week to learn more about adding images in a Table component.