Adding images to web apps

This step-by-step guide describes how to add images to your web application.

Introduction

Prepr simplifies asset management and provides multi-format support. This guide covers the end-to-end workflow from defining image assets in your Prepr schema, adding images to content items and fetching them via the API.

Prerequisites

You need to have the following setup before you can render images in your web application.

A free Prepr account
At least one content model in your environment.

For more information on how to set up a content model in Prepr, check out the content modeling basics. If you’re still unsure about how to structure your content, check out our example models for inspiration.

Adding images to your web application

The steps below make use of the example of a cover image in blog articles.

Define the Assets field in your model

To allow editors to add images to content items, you need to add the Assets field to the corresponding model as follows:

Click the Schema tab and click the model you want to update.

Define asset field in model

Drag the Assets field from the list of field types to the position you want it in your model.
In our example for a cover image, we choose the Single-asset field. This means content editors can only add one cover image to a blog article content item.
Enter the Display name and make sure only the Image asset type is enabled.
Click the Settings tab to enable the Caption, for example, and define the Asset position and cropping such as the Set focal point option. Then click the Save button. For more information on different settings, check out the Field types guide.

Now, content editors can add and configure a cover image when they create or edit a blog article content item.

Add images to a content item

Now that you’ve allowed content editors to add an image to content items for a model, let’s look at the typical steps a content editor follows to do this.

Navigate to the Content tab. You can either create a new content item or open an existing one.

Add image to content item

In the content item, you can simply drag an image from your local storage to the image block or choose an existing image in the Media library.
Add a caption and set the focal point, if needed. The required configuration depends on the settings defined in the previous step.

The content editor can configure the asset with the following options if these are enabled in the settings of the Assets field:

Setting alignment to define the position (left, right or center) on a web page.
Adding captions to provide a comprehensive description of your images. If you run a multi-language application, you can easily localize image captions.
Setting an image focal point to define the key area of an image to remain visible during resizing.
Cropping images based on your image presets to adjust visuals to a specific device type or web page element.

You can also transform images on the fly using the API. For more details, check out the following references:

Now that you have content items with images, let’s look at how to request those content items with their images using API requests.

Retrieve images using the API

Now that you’ve added and configured images, you can retrieve them when you request a content item using the API.

The following GraphQL query shows how to retrieve image files, including image presets named “desktop” and “mobile”, image caption, alignment, and author. You may want to add or remove fields according to your desired set-up. For more information, see the GraphQL API reference.

QUERY


query {
  BlogArticle (id: "a9b9266b-35c3-4941-bb02-42c265f16") { 
    _id
    title
    _slug
 
    # Query the image ("cover")
    cover { 
      _id
      url
 
      # Example desktop and mobile presets, if configured and set in content item
      desktopUrl: url(preset: "desktop")
      mobileUrl: url(preset: "mobile")
 
      original_name
      caption
      alignment
      author
      
      # Query focal point, if set instead of cropping presets
      focal_point {
        x
        y
      }
 
    height
    width
    file_size
    mime_type
    }
  }
}

Image download filename

If you want to make your front-end images available for download in your web application, you can define the download name of the image by setting the download filename in the URL you provide for download.

That’s it. Once you publish your content item, images become available in your web application in the best possible format.

Want to learn more?

Check out the following guides to learn how to add other asset types to your web application: