FVS Picture Component

Applicable scenarios: Users who have installed the "FVS Large Screen Editing Mode" plugin can refer to this article to learn about the related functions of the FVS template.

1. Version

2. Function introduction

The picture component, as the name suggests, can display various built-in asset, custom picture or online picture.

Three types of pictures are supported: built-in picture, custom upload, and online pictures.

Note: This article only introduces the unique functions of the picture component, and other attributes are not repeated.

For component interaction, please refer to: FVS Component Frame Interaction Attributes

For component animation, see: FVS Component Frame Animation Attributes

For component attributes, please refer to: FVS Component Attributes

Create a new big screen template:

Add a Picture Component to the page, and it will display "Add a picture in the right panel" by default. As shown below:

FVS large screen template has built-in a series of static and dynamic pictures, including icons, backgrounds, decorative lines, decorative graphics, borders, etc.

Select the picture component, click Content, select Built-in Picture for the picture type, and click Choose.

The user can select the desired image, and click Finish to complete the image configuration. As shown below:

Users can upload their own locally prepared images to the template and use it.

1. Upload pictures

After selecting the Custom Upload method, click Choose, and then click +Upload Picture to select a local image file and upload it.

The supported image files are jpg, png, gif and webm formats.

2. Choose a picture

The uploaded picture can be called in any picture component of the FVS template.

After selecting the Custom Upload method, click Choose, select the picture, and click Finish to call the asset. As shown below:

3. Delete pictures

Click Choose, hover the mouse over the corresponding picture, and a delete button will appear in the upper right corner of the picture.

Click the Delete button, and the prompt box "If deleted, all acomponents that use this asset will be affected. Are you sure to delete?" pops up. Click Delete to delete the custom asset.

If a picture component uses the deleted picture asset, the content of the component will be empty when previewing.

The FVS picture component supports calling online pictures. Please make sure that the server can access the filled picture address.

Select the picture component, click Content, select Online Picture for the picture type, and fill in the picture address to call the picture asset. As shown below:

The picture address does not support relative addresses, only absolute addresses, such as http://localhost:8075/webroot/help/picture/background/sale.gif

Built-in pictures, custom uploaded pictures, and online pictures all support setting the picture attributes "filling" and "hue".

1. Filling

If you choose the common filling method, you can choose three picture processing methods:

2. Hue

The hue adjustment range is 0~100, as shown in the following figure:

For the completed template, please refer to: 

FVS Picture Component Example.fvs