Authoring

Images in Sophora Web

This guide explains how to edit image documents in Sophora Web.

In Sophora, images are documents. You can use an image document multiple times within the text of another document or as a document component. Image documents contain metadata.

Each image document contains several image variants, not just a single image file.

For example, variants can include teaser images, a large text image, and a small text image. Sophora displays the appropriate variant based on the context.

The standard workflow is to create an image document using one original image. Sophora automatically crops and generates all image variants from this original image.

Sophora supports .jpg and .png files. Use a high-quality image, as it will be used to generate the image variants. .gif and .svg images are also supported.

Creating a new image document

To ceate a new image:

  1. In Sophora Web, click or tap the Plus icon in the navigation pane.
  2. Select an image document type. The available document types depend on your Sophora configuration.
  3. In the ID stem field, enter the document name. The name can contain letters from the Latin alphabet and digits (0–9), but it cannot end with a digit. Spaces, special characters, and brackets are not permitted. You can use hyphens or underscores as separators.
  4. To set or change the document's location, click or tap Edit (pen icon) next to the folder field, select a folder, and then click or tap Select.
  5. Click or tap Create Document. The new image document opens, and you can begin editing it.

Uploading an original image

To upload an original image file:

  1. In Sophora Web, create or open an image document.
  2. In a newly created or existing image document, click or tap Upload Image.
  3. Select an image file from your local file system.
  4. Fill out all the mandatory fields.
  5. Save the image document.
  6. Sophora generates all image variants for this image*.

Setting the focal point for all image variants

Sophora Web enables you to set a focal point for all image variants for a single image. This will cause the Sophora Image Service to generate the variant binary data around this point.

To set the focal point for all image variants:

  1. In Sophora Web, create or open an image document.
  2. If you can set a focal point, select a point on the image. A crosshair marks the focal point.
  3. Save the image document.

After setting a focal point, you can review the resulting image variants in the Variants view before saving the image.

Adjusting image variants

The top section in the Variants view displays the currently cropped variant (or variants, if you crop several variants of the same aspect ratio simultaneously). Use the bottom section to select from the available variants. Use the bottom section of the Variants view to select from the available variants. If several variants share the same aspect ratio, you can select one of the groupings. A pencil icon marks any variants modified since you opened the image Variants view.

To adjust the croppings of an image variant:

  1. In Sophora Web, create or open an image document.
  2. Click or tap Variants. This opens the full-screen view for the image and all its variants.
  3. In the Variants view, click or tap the Separate tab.
  4. Select and drag the bright area to move the entire selected area or select and drag one of the handles at the sides and corners to resize it.
  5. In the top right of the variants view, click or tap Done.
  6. Save the image document.

To adjust the croppings of a group of image variants:

  1. In Sophora Web, create or open an image document.
  2. Click or tap Variants. This opens the full-screen view for the image and all its variants.
  3. In the Variants view, select the tab corresponding to the custom group of variants, such as 1:1 or 16:9.
  4. Select and drag the bright area to move the entire selected area or select and drag one of the handles at the sides and corners to resize it.
  5. In the top right of the Variants view, click or tap Done.
  6. Save the image document.

To upload an individual image file for an image variant:

  1. In Sophora Web, create or open an image document.
  2. Click or tap Variants. This opens a full screen crop view of the image and all its variants.
  3. In the Variants view, click or tap the Separate tab.
  4. Click or tap the context menu (three dots) of the variant you wish to override.
  5. Select Upload image for this variant from the menu.
  6. Upload the image file from your computer.
  7. In the bottom drawer, select either Scale image to fit into variant or Keep image size in variant. These options appear only when your image file does not fit the image variant.
  8. In the top right of the variants view, click or tap Done.
  9. Save the image document.

Brightness and contrast settings

You can change the brightness and contrast for each or all image variants of an image.

To change the brightness or contrast of an individual image variant:

  1. In Sophora Web, create or open an image document.
  2. Click or tap Variants.
  3. In the Variants view, click or tap the Separate tab.
  4. Adjust the brightness or contrast with the sliders next to the image. By default, image variants have no brightness or contrast changes (value 0). You can use the sliders to set values ranging from a maximum increase (value 100) to a maximum decrease (value -100).
  5. In the top right of the Variants view, click or tap Done.
  6. Save the image document.

To change the brightness or contrast of grouped image variants at once:

  1. In Sophora Web, create or open an image document.
  2. Click or tap Variants.
  3. In the Variants view, click or tap the tab with the custom group of variants, eg 1:1 or 16:9.
  4. Adjust the brightness or contrast with the sliders next to the image. By default, image variants have no brightness or contrast changes (value 0). You can use the sliders to set values ranging from a maximum increase (value 100) to a maximum decrease (value -100).
  5. In the top right of the Variants view, click or tap Done.
  6. Save the image document.

To change the brightness or contrast of all image variants at once:

  1. In Sophora Web, create or open an image document.
  2. Click or tap Variants.
  3. Adjust the brightness or contrast with the sliders next to the image. By default, image variants have no brightness or contrast changes (value 0). You can use the sliders to set values ranging from a maximum increase (value 100) to a maximum decrease (value -100).
  4. Below the sliders, click or tap Set for all.
  5. In the top right of the Variants view, click or tap Done.
  6. Save the image document.

Last modified on 11/30/20

The content of this page is licensed under the CC BY 4.0 License. Code samples are licensed under the MIT License.

Icon