search

Media Server Image Manipulation Tutorial: A Comprehensive Guide to Dynamic Image Processing

In this tutorial, you'll upload an image to the ComUnity Platform Media Server, add it to an application screen, and then apply transformations to create different versions of the same image—all without editing the original file.

By the end, you'll have a working image displayed in your app with rotation applied, and you'll know how to resize, crop, and apply effects to any image using simple URL modifications.

hashtag
Before You Begin

Make sure you have:

  • Access to the ComUnity Developer Toolkit

  • An existing project open in the Toolkit

  • An image file ready to upload (PNG or JPEG work best for image manipulation)

hashtag
Step 1: Open the Media Server

Let's start by navigating to where you'll upload your image.

  1. In your project, click the Settings icon (the gear) next to your project name. The Project Settings dialog opens.

  2. You'll see environment tabs at the top: Global, Development environment, QA environment, and Production environment. Click on Development environment since we're just testing for now.

  3. In the left sidebar, click on Media server.

You should now see the Media Server upload interface with a drag-and-drop area and an "Uploaded Files" panel on the right.

circle-info

Each environment has its own separate Media Server. This means an image you upload to Development won't exist in QA or Production until you upload it there too. This keeps your testing isolated from your live application.

hashtag
Step 2: Upload Your Image

Now let's get your image into the Media Server.

  1. Find your image file on your computer.

  2. Drag it into the upload area, or click "Select a file" to browse.

  3. Wait a moment while the file uploads. Once complete, your file appears in the Uploaded Files panel on the right with a green checkmark.

  4. Click on your uploaded file in the list. At the bottom of the panel, you'll see two URLs appear:

    • File URL – Uses your original filename, like: https://toolkitv3.comunity.me/u/f/my-photo.png

    • SHA URL – Uses a unique hash based on the file contents, like: https://toolkitv3.comunity.me/u/d/77d55728427f43cce27624d37658dd11292f1f8c42d288af059b27297127e551.139.127.120.0.2048.1368.png

  5. Copy the SHA URL – you'll need this in the next step. The SHA URL is longer but it's what you'll use when you want to manipulate the image later.

circle-info

Notice the numbers in the SHA filename? For images, the Media Server embeds colour and dimension information right in the filename: SHA.red.green.blue.alpha.width.height.extension. This helps the server process your image efficiently.

hashtag
Step 3: Add the Image to a Screen

With your image uploaded, let's display it in your application.

  1. Close the Project Settings dialog and click Screens in the left sidebar.

  2. Select the screen where you want to add your image, or create a new screen.

  3. In the Screen Controls panel on the right, find the Image control.

  4. Drag the Image control onto your screen structure where you want the image to appear.

  5. With the Image control selected, look at the Properties panel on the right. You'll see fields for Name and Image.

  6. In the Image field, paste just the SHA filename portion—you don't need the full URL. For example:

    The Toolkit automatically resolves this to the correct Media Server URL.

  7. Once you've entered a valid image reference, an Image Preview appears below the field showing your image. This confirms the Toolkit found and loaded your image successfully. Click Save and Launch your project.

Your image is now part of your screen. When users view this screen in your app, they'll see the image you uploaded.

hashtag
Step 4: Apply Image Manipulation Using a Content Control

Here's where the Media Server becomes powerful. Instead of opening an image editor to rotate your photo, you can apply transformations directly through the URL. To do this, you'll use a Content control with Markdown syntax rather than the Image control.

  1. Go back to your screen in the Screens section.

  2. From the Screen Controls panel, drag a Paragraph (Content) control onto your screen structure.

  3. With the Content control selected, look at the Properties panel. You'll see a Markdown field.

  4. Enter your image using Markdown image syntax, but this time construct the URL for graphics manipulation. Change /u/d/ to /u/g/ and add your modifier at the end:

markdown

  1. Click Save.

  2. Launch your project. Your image now displays rotated 180 degrees!

Let's break down what changed in the URL:

  • /u/g/ tells the Media Server you want to apply graphics manipulation (instead of /u/d/ for direct access)

  • $rotate/180 at the end rotates the image 180 degrees

circle-info

The Content control with Markdown gives you full control over image URLs, making it perfect for applying transformations. The Image control is simpler but doesn't support URL modifiers.

hashtag
Step 5: Try More Transformations

Now that you understand how modifiers work, try these variations in your Content control's Markdown field:

Create a thumbnail (150 pixels):

markdown

Resize to exactly 300×200 pixels:

markdown

Resize to fit within 400×300 while keeping proportions:

markdown

Apply a vintage sepia effect:

markdown

Add a soft blur:

markdown

Combine multiple effects – just chain them together:

markdown

This creates a 300×300 thumbnail with sepia toning and a subtle blur, all from a single URL.

hashtag
Step 6: Fix Mobile Photo Orientation

If you're building an app where users upload photos from their phones, you'll encounter a common problem: photos appear rotated incorrectly. This happens because phones store rotation data separately from the image itself.

The fix is simple. Add $autoOrient to your image URL in the Markdown:

markdown

This reads the photo's orientation data and rotates it correctly. For any user-uploaded mobile photos, this modifier should be your default.

hashtag
Step 7: Upload to Other Environments

Your image works perfectly in Development. Now let's prepare it for QA testing.

  1. Open Project Settings again.

  2. This time, click the QA environment tab.

  3. Click Media server in the sidebar.

  4. Upload the same image file.

The image now exists in both Development and QA. When you're ready for production, repeat this process on the Production environment tab.

circle-info

Your image URLs will work the same way in each environment—only the base URL changes. The SHA filename stays identical because it's based on the file contents, not where you uploaded it.

hashtag
What You've Learned

You've completed a full workflow with the ComUnity Media Server:

  1. You navigated to the Media Server through Project Settings, selecting your environment first.

  2. You uploaded an image and discovered the two URL types—File URL for readable links and SHA URL for version integrity.

  3. You added a simple image to a screen using the Image control with just the SHA filename.

  4. You learned that the Content control with Markdown syntax lets you apply image manipulation by using /u/g/ URLs with modifiers.

  5. You applied transformations like rotation, resizing, and effects by adding modifiers to the URL.

  6. You discovered $autoOrient for handling mobile uploads.

  7. You understood that each environment has its own Media Server, keeping development isolated from production.

hashtag
Quick Reference

When you need to manipulate images, remember this pattern:

Common modifiers you'll use often:

  • $thumb/size – Create a thumbnail

  • $resize/width/height/m – Resize maintaining aspect ratio

  • $rotate/color/degrees – Rotate the image

  • $crop/width/height – Crop to size

  • $autoOrient – Fix mobile photo orientation

  • $sepia – Vintage effect

  • $blur/radius/sigma – Soften the image

The server caches your transformed images, so the first request does the processing and subsequent requests are served instantly.

hashtag
Next Steps

Now that you're comfortable with the basics, try:

  • Using the $drawText modifier to add watermarks to images

  • Creating an icon set using the /u/icon/ path with custom colours

  • Setting up a content screen that displays user-uploaded photos with $autoOrient applied automatically

Last updated