Images
How to add, upload, and style images.
There are a few different ways to add an image to your app. You can add images directly from the Media Gallery; from an Image Part, from an Image Gallery Part, or from one of many sections or pages that contain images.
Accessing the Media Gallery
The Media Gallery is accessed from the left navigation. Selecting an image will add it to your page. Selecting 'Upload' will add that media to the Media Gallery. You then need to select that media to add it to your page.
Adding Images
To add an image to your app, always make sure you’ve selected the part you would like to add the image to.
You can add images directly from the Media Gallery; from an Image Part, from an Image Gallery Part, or from one of many sections or pages that contain images.
Image Parts
Location in the Parts Library: Most used parts > Images
Image parts are located in the Parts Library in the left menu. There are a range of image placeholder styles for you to choose from, including a basic image, an image with a call-to-action overlay, images with different text placements in the overlay, images with various properties applied - such as rounding, shadows, borders, and fading overlay with text.
The image parts are designed so that when you select the image type you like, and add it, you can then replace the placeholder image with your preferred image.
The Image Gallery
Location in the Parts Library: Page Sections > Image Gallery
In the parts library, under ‘Page Sections’, you’ll see the Image Gallery.
The image gallery is made of up placeholder images in different combinations designed to display your images. Just add the gallery style then replace the placeholder images with your images.
Many sections and full pages within the parts library have images already in place. Just select the image and replace it with your preferred image.
Replacing an Image With a New Image From the Media Gallery
Select the image you want to replace.
The Image Editor will appear in the right menu. Select Image > Value Set, then toggle to ‘Choose’. You will see all of the images in your Media Gallery. Select the most appropriate image, and it will replace the original image.
Uploading Images from Your Device
The Image Editor will appear in the right menu. Select Image > Value Set, then toggle to ‘Choose’, then click ‘Upload’.
Then select the most appropriate images from your device and they will be added to your Media Gallery.
Formatting Images
There are several ways to adjust the look of your images. We can adjust the opacity, apply rounding to some or all of the edges, apply elevation, change the ‘cover’ so that the image takes up the full space available in its container, apply a color gradient to the image, alter the aspect ratio and the sizing of the image, alter the rotation of the image, and flip the image on its horizontal and vertical axis.
Adjusting the Image Opacity
Select the image you want to apply the opacity to. Go to the Decoration editor in the right menu, and go to 'Image Opacity'. You’ll see a sliding scale from 0 to 1, increasing in increments of 0.1.
Values between 0 and 1 represent varying levels of transparency, allowing the background to partially show through the image. For example, an opacity of 0.5 would make the image appear semi-transparent, showing half of the image and half of the background.
An opacity value of 0.1 means the image is almost completely transparent, and it is barely visible. In this case, the background shows through almost entirely.
An opacity value of 1 means the image is completely opaque, and it is fully visible, covering the background.
Adjust the slider until you reach the desired opacity. You can reset the opacity back to its original by clicking 'Default'.
Applying Rounding
Images can be softened and rounded using the Decoration Editor, in the 'rounding' tab.
Rounding can be applied to all of the image, the top left, top right, bottom left, and bottom right, or a combination of these. There are various degrees of rounding ranging from none to full, with incremental size points in between.
Applying Shadow
Shadow can easily be applied to the outside of an image by using the Decoration Editor, in the 'shadow' tab. Shadow can be applied on a scale from 'small' through to 'extra extra large'.
Applying A Border
Borders can be applied around images using the Border Editor on the right menu. There are three key elements to the border - its style, color, and size.
It's a good idea to start by selecting a size. That way you will see the border around the part. Change the size using the slider.
Then select your preferred style and color.
Applying A Blur Effect
Need to apply a blur to an image? Just select the image, then open 'Blur' in the right menu. Select the level of blur required. You can also set the blur based on device size if needed.
You can reset the blur back to its original by clicking 'Default'.
Applying a Color or a Color Gradient Over an Image
Applying a color or a color gradient over an image can create an eye-catching effect for your design.
To apply a color, select the image, then go to the Decoration Editor. You'll need to adjust the opacity from 1 to something lower than that, such as 0.8 or 0.9, depending on the level of color you want to see over the image. This is because the image has to be slightly transparent for any color to be seen.
Once you've selected the level of opacity, go to the Colors Editor. Go to the Background tab, as we want to set the background color for the image. Then select your color. You can choose a theme color, mix a color, or apply a color gradient.
Sizing
The dimensions of the image can be set for each breakpoint using the size property. Within the sizing property, a specific width and height can be applied. Further, minimum and maximum width and height can be set for each breakpoint. The aspect ratio will be maintained when the width and height are set.
Modifying Images in the Editor
To modify your image, select the image, and then the Image Editor on the right. You'll see the options to Modify or Choose.
To modify the image, select 'Modify'. This will open the toolbar:
From left to right you can:
Zoom in on the image
Zoom out
Flip the image horizontally
Flip the image vertically
Rotate the image to the right
Rotate the image to the left
Lock and unlock the aspect ratio
Revert the image to its original form
Save your changes as a new image. When you save the changes, both the original image the new image will be available in the Media Gallery.
Here's an example of flipping an image, zooming in, and saving it as a new image:
What is Alt Text?
Alt text, short for alternative text, is a brief description of an image used in HTML code to provide information about the content or function of the image. It is primarily used for accessibility purposes, as it allows screen readers to describe images to users who are visually impaired or who have difficulty seeing the images on a webpage.
When an image cannot be displayed for any reason, the alt text appears in place of the image, providing context about what the image contains or represents. Additionally, search engines use alt text to understand and index images, which can improve the SEO (search engine optimization) of a webpage.
Alt text should be concise and descriptive, accurately conveying the content or purpose of the image. It's important to avoid using generic phrases like "image" or "image of" and instead provide meaningful descriptions that enhance the understanding of the content for all users.
It's easy (and important!) to add alt text to your image. Select the image, and you'll see the Image property editors on the right. The first one is Alt Text.
Then, key in a brief description of your image. Here's an example:
Related Information
Last updated
Was this helpful?