Image Handling Boy Photograph

You’ve found an amazing image that’s guaranteed to catch the attention of your audience, and now you want to share it. How difficult can it be? Surprisingly tricky, actually. Publishing images across devices and platforms can be far more time-consuming than you’d expect.

Increasing the number of places the image is published means changing its format again and again, opening up even more opportunities for optimization mistakes and formatting headaches.

Luckily, Enonic can help. Our image handling tools make it easy to insert, edit and share images across every platform and device.

Where Do You Use Images in a CMS?

There are a number of places you might want to use images in your CMS:

  • Text editor: Insert a picture wherever you want in the text editor.

  • The metadata: Use metadata to connect an image to a certain part of your site or content. For example, you can use metadata to show the image in search results or your landing page.

  • Image module: You can use your CMS to insert featured images directly into a designated area on your website, helping to showcase them.

Uploading Your Images to Enonic

Uploading images in Enonic is a breeze. Drop them into the text editor field, the “insert image” option, or directly into your site structure using the create content dialog.

Search or Browse to Find the Right Images

If your image is already in Enonic, you can search or browse to find it.

Insert Images in Your Content

  1.  Choose the aspect ratio and positioning of the image, and add in a caption and alternative text.
  2. Insert the image into your content, whether it’s directly in the text editor or in a module on your site.

Editing the Image

Now that you’ve uploaded your image, it’s time for the really important part—editing it. Cropping, rotating, flipping, and choosing a focal point for your image will ensure that it looks great, no matter the device or platform you’re viewing it on.

Edit

Use the editing tool to crop (zoom and pan), rotate, or flip the image.

Focal Point

Choosing a focal point for your image ensures it looks good across your whole site. It means that even if the template on your web page has an image with an 1:1 aspect ratio in one place, and a 16:9 aspect ratio in another, your image will never appear cropped in the wrong place or with a load of blank space on either side.

Image Metadata and Access Rights

Once you’ve edited your image and added a focal point, you can also add metadata like alt text, image URL, description, copyright information etc. You can also add access rights to control who sees the image and who can edit it. 

Organizing Your Images

An organized image library should be a key feature of any CMS, so we make it simple to keep all of your media in order.

Store, Save and Organize Your Images

When you upload images in Enonic, they’re stored under each piece of content they’re attached to, or where they were uploaded in the hierarchy.

You can also create folders for your images. Thanks to user access permissions, you can control exactly who can view and edit these folders.

Right click and select ‘move’ on the images to arrange them exactly as you wish in the hierarchy.

Advanced Image Features for Developers

Advanced image features give you more control over the appearance of your images. They include:

Scaling functions to ensure the image fits the given width and height of the designated picture proportions.

Filters to adjust the appearance of your image, for example by adding borders or grayscale.

UX

Image editing shouldn’t be limited to desktop. That’s why the Enonic’s editing tools work on mobile too, thanks to large icons and touchscreen functionality.

Digital experiences rely on incredible visuals. That’s why we’ve made uploading, editing, and formatting them as simple as possible. Our intuitive editing tools not only make it easy to showcase your images, but they ensure your pictures look great wherever they’re seen.

Naming Convention

As cluttering is inevitable, you should enforce a certain naming convention, as well as ensure your CMS has a database or folder structure to collect your images into one place (or several, if it suits you better).

A well-thought out naming convention will, together with tagging if your CMS supports that, make it easy for you to find and retrieve images for your purposes and repurposing.

In the name or tag, you can for instance indicate if the image is featured, or if it serves some specific purpose, as well as identifying the theme of the related article or blog post, and the contents of the image.

For example: the image is in this article can be called “Paintbrush woman image handling.”

Alt-text

When using images on the web, there are a couple of things to consider. First, be aware of the so-called “alt text.” Web browsers are not like humans, and cannot see images the same way we can. Instead, the browsers “read” the alt text of the image to get an idea of what it’s all about. If, for some reason, the browser cannot display the picture, the alt text will be shown instead (“alt” means “alternative”).

Furthermore, visually impaired people also get to read what the image shows thanks to the alt text. So be mindful of both search engine optimization and usability/accessibility when setting the alt text—you want both search engines and all human visitors to understand what all the content on the page is about.

Image Size

Another aspect of images to be wary about is the size. More and more people consume the Internet while on the move, that is while they use their mobile phones and the mobile data packs.

Having images with enormous sizes will quickly devour any bandwidth limit, so make sure to compress the image in your CMS, if it can handle compression and scaling seamlessly (and it should!), or use external tools like TinyPNG, etc. to reduce file size.

First published 20 August 2018, updated 19 October 2026.

Related Blog Posts

Get some more insights:


Get Started with Enonic! 🚀