Images

This guide describes how to add images to your web application using Prepr. Follow the step-by-step instructions to master the process.

Introduction

It’s hard to imagine today’s content delivery without images. Whatever copy you see on the internet — a webinar schedule, a product description, a blog post, a daily news feed, etc. — they all have visuals to attract and engage customers.

Using image files has become a routine task for content editors. With Prepr, you can do that in a quick and simple way. Additionally, working with various image formats and automatic image optimization is as easy as it gets.

Imagine you’re creating a blog post and want to support it with images. In this case, you will go through the following steps in Prepr:

  • First, allow using assets in a model.
  • Next, add images to a content item.
  • Optionally, edit and configure images.
  • Finally, retrieve images using the API.

Let’s begin.

Note

This guide assumes you have already set up a content model. If not, we recommend starting with the following steps:

If you’re unsure about how to structure your content, check out our Example models for inspiration.

Step 1: Add an Assets field to your model

To use assets in your content items, you must first add the Assets field to a content model as follows:

  1. Click the Schema tab to open the Schema Editor.
  2. Click on a model to open its details.
  3. Click or drag the Assets field from the list of field types into your model.

Add Assets field

  1. Fill in the Assets field settings, then click Save to confirm. For more information, check out the Field types guide.

Fill in Assets field settings

Note

Make sure to select the Image asset type in the General tab to allow adding image files to this field.

Tip

In the Settings tab, you can also enable the Caption and Alignment features and define Image presets for cropping. For more information, see the Edit and configure images step.

Once done, you can add images to your content item.

Step 2: Add images to a content item

Now that you have allowed using assets in a model, you can add images to your content item as follows:

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

  2. On the Content item page, go to the media placeholder and click the icon.

Add asset to a content item

  1. Select one or multiple images from the Media Library or upload new ones.

  2. Click Add x items to confirm.

Select asset

Note

If cropping is set as required in the Asset field settings, you will need to crop images while adding them to a content item. If it is not required, you can do it in the next step.

Step 3 (optional): Edit and configure images

Once you’ve added images to your content item, Prepr gives you various options to enhance your image files.

In the Prepr Editor interface, you can perform the following actions:

  • Crop images based on your image presets to adjust visuals to a specific device type or web page element.
  • Add a caption to provide a comprehensive description of your images. If you run a multi-language application, you can easily localize image captions.
  • Set alignment to define the position on a web page.

On the Content item page, hover over an image and click the icon in the top right corner, then select the needed action.

Edit image

Note

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

Once done, proceed to the next step.

Step 4: Retrieve images using the API

Now that you've added and configured images, you can retrieve these files using the API.

The following snippet 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 arguments according to your desired set-up. For more information, see the GraphQL API reference.

query {
Blog (id: "e2294731-43b5-4d67-9faa-4ffbb49e658c"){
media: image {
  desktopUrl: url(preset: "desktop")
  mobileUrl: url(preset: "mobile")
  caption
  alignment
  author
  }
 }
}
curl --location --request POST 'https://graphql.prepr.io/<YOUR-ACCESS-TOKEN>' \
--header 'Content-Type: application/json' \
--data-raw '{"query":"query {Blog (id:\"e2294731-43b5-4d67-9faa-4ffbb49e658c\"){ media: image { desktopUrl: url(preset: \"desktop\") mobileUrl: url(preset: \"mobile\") caption alignment author }}}","variables":{}}'
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

var graphql = JSON.stringify({
query: "query {Blog (id:\"e2294731-43b5-4d67-9faa-4ffbb49e658c\"){ media: image { desktopUrl: url(preset: \"desktop\") mobileUrl: url(preset: \"mobile\") caption alignment author }}}",
variables: {}
})
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: graphql,
redirect: 'follow'
};

fetch("https://graphql.prepr.io/<YOUR-ACCESS-TOKEN>", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
// WARNING: For POST requests, body is set to null by browsers.
var data = JSON.stringify({
query: "query {Blog (id:\"e2294731-43b5-4d67-9faa-4ffbb49e658c\"){ images: image { desktopUrl: url(preset: \"desktop\") mobileUrl: url(preset: \"mobile\") caption alignment author }}}",
variables: {}
});

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
if(this.readyState === 4) {
  console.log(this.responseText);
}
});

xhr.open("POST", "https://graphql.prepr.io/<YOUR-ACCESS-TOKEN>");
xhr.setRequestHeader("Content-Type", "application/json");

xhr.send(data);
<?php
$client = new Client();
$headers = [
'Content-Type' => 'application/json'
];
$body = '{"query":"query {Blog (id:\\"e2294731-43b5-4d67-9faa-4ffbb49e658c
\\"){ media: image { desktopUrl: url(preset: \\"desktop\\") mobileUrl: url(preset: \\"mobile\\") caption alignment author }}}","variables":{}}';
$request = new Request('POST', 'https://graphql.prepr.io/<YOUR-ACCESS-TOKEN>', $headers, $body);
$res = $client->sendAsync($request)->wait();
echo $res->getBody();
{
"data": {
  "Blog": {
    "media": [
      {
        "desktopUrl": "https://4e6ricsvaqpi.b-cdn.net/ex_0,ey_0,eh_1200,h_1200,ew_1920,w_1920/s3-website-preprio/83961c7c-744f-47c5-9c04-d921412ed1ee.jpg",
        "mobileUrl": "https://4e6ricsvaqpi.b-cdn.net/ex_0,ey_358,eh_564,h_564,ew_1920,w_1920/s3-website-preprio/83961c7c-744f-47c5-9c04-d921412ed1ee.jpg",
        "caption": "Sed tristique facilisis odio. In non lacinia ex, non hendrerit nunc. Fusce in accumsan dui.",
        "alignment": "center",
        "author": "Donec iaculis libero"
      }
    ]
  }
 }
}

Tip

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: