Editing and configuring assets in content items

This article describes the Prepr features you can use to edit and configure assets when adding them to your web application.

Introduction

Media files can enrich your website content only when they are qualitative and usable. For instance, images should be optimized for a device and presented at the highest resolution possible. Likewise, having a well-described video with the key cues in your audience’s native language increases the chances your customers will watch the content. In other words, the way you configure your assets significantly affects your content usability.

The following options are available for you to edit and configure assets in your content item:

• Cropping images
• Editing captions
• Defining alignment

Before configuring your assets though, let's first look at how to add assets to a content item.

Adding assets to a content item

If asset fields are defined in the model of your content item, you'll see an asset block for each asset field. Check out more details on the supported assets in Prepr.

To add assets to a content item, simply drag and drop the asset file from your local storage to this block, or click it to open the media window dialog to choose an existing file in Prepr.

From this window, you can also click the Upload asset button instead to choose the files you want to upload and add them to your content item.

Once done, click the Add x assets button to add these to the content item.

Now that you know how to add assets to a content item, let's dive into cropping images.

Cropping images

Cropping an image is important when adding it to your content. You crop images to look great on all devices, such as mobile, desktops, and tablets.
With Prepr, you can crop image files easily, without altering the original stored files.

To enable cropping on images, developers can define the image presets. Check out the Assets field settings for more details. When you add images to content items and crop them according to the presets, a developer can retrieve the chosen presets using the GraphQL API to render them accordingly in the web app. For that, they need to specify a preset name in the API request. For more details, see the sample query for retrieving Presets in the GraphQL API reference.

Alternatively, a developer can transform images themselves using the API. For more information, check out the REST API or the GraphQL API.

Crop new images

Follow the same process above to add images to a content item. When adding an image to a content item and cropping is required in the asset field settings, you'll see the Crop x assets button at the bottom of the media dialog window.

1. Click the Crop x assets button to open the crop images window.

   

2. Simply choose the preset and move the crop area over the part of the image that you want cropped.

3. If there are multiple presets, simply click the thumbnail of the next preset to add its crop.

4. When cropping multiple files, click the next image thumbnail in the bottom left corner to crop another image or click the Next asset button.

5. Once done, click the Add x assets button to add the cropped images to the content item.

Crop existing images

When cropping is not set to required, you can add a crop after the image has already been added to a content item. To crop an existing image in a content item, complete the following steps for each image:

1. On the Content item page, hover over the image and click the icon in the top right corner, then click Crop image. Or click the icon on the image thumbnail to open the crop editor quickly.

2. In the crop editor window, select a preset and an area in your crop by dragging the points or moving the entire crop area.

3. Click Save to apply the updated cropped image.

Edit image crop

If you want to change the current crop, complete the following steps for each image:

1. On the Content item page, hover over the image and click the icon in the top right corner, then click Edit crop. Or simply click the icon to open the crop editor window and follow the same steps as above.

Delete image crop

To delete a crop, hover over the image thumbnail in the Content item and click the icon in the top right corner. Then, choose the Delete crop option.

Caption

The Caption feature lets you create multiple descriptions for a single asset every time you use this asset in a content item or a content item locale. While the Asset Description field is recommended for internal use, captions are helpful in the following cases:

• When you need to describe a single asset across multiple content items.
• When you need to describe a single asset in a multi-language content item.

To create a caption for an asset, a developer can enable the Allow caption toggle in the asset field settings.

1. On the Content item page, hover over the image thumbnail and click the icon in the top right corner, then click Edit caption.

   

2. In the opened dialog window, type your text, then click Save to apply your caption.

Alignment

The Alignment feature lets you position a digital asset within the text elements on a web page. You can choose from the following options:

• Left – aligns the left edges of an asset and text element.
• Center – aligns the center points of an asset and text element.
• Right – aligns the right edges of an asset and text element.

To align an asset, a developer can enable the Allow alignment toggle in the asset field settings.

1. On the Content item page, hover over an image and click the icon in the top right corner.
2. Select the desired alignment option.