Note: this article is based on the media gallery as used before the new CMS media gallery will be released. Things might be different after the new media gallery is released in 2025.
Two ways to upload images
The Peppered platform uses the same process for uploading images across websites, mailings, and narrowcasting. While the image gallery upload tool is the primary method, you can also add images through the rich text editor. Let's first explore both tools briefly.
Uploading images using a media gallery
Whether it's a production, banner, media part on a page, or newsletter introduction, all use the same tool to upload images—the media gallery.
When you find a media gallery, clicking "choose files" opens a pop-up where you can select and upload multiple images at once from your computer.
After uploading, you can add Title, Description, Credits and Link info. How these fields are used depends on the context. Images from the same media gallery can be used on different areas of your website, mailings, narrowcasting, and even external destinations. We will discuss these cases one by one later in this article.
The media gallery optimises the image for all intended uses and creates all needed crops during upload. This makes sure your content looks great and also reduces data transfer by using crops that are not too big, resulting in faster page loads.
All individual crops of the same image can be recropped from the original to optimize them as you see fit, via the “crop” button.
For website images, our crop overlay article shows how to view and adjust image crops using the "Reveal crops" feature in the Special Access menu of the Peppered Dashboard. This helps ensure your images look great across all devices—just adjust your browser size to preview the responsive changes.
When creating mailings, images are automatically pulled from their source. Simply add productions, events, or stories to your mailing, and the system will use the appropriate image crop in your mail template.
The media gallery also lets you add alt-text to images where needed. While the "title" field typically serves as the alt-text, this varies depending on the image's context and placement. We'll explore this in more detail later.
The media gallery is clearly the most effective way to handle images on the Peppered Platform.
Uploading images using the Rich Text Editor
Most rich text editors also feature an option to upload an image. Sometimes this makes sense to add an image inline next to your text, and often this feature is used to add links to images too, making it a flexible way to add graphic elements to any text area.
After uploading an image, you can add the “alternative description” to add an alt text to the image, and you can change the displayed size of the image.
There is however a downside to this way of uploading images, when not used correctly: The rich text editor does not have an in-build cropping feature, which means every uploaded image will be used in its original file size.
Although uploaded images can be scaled down in the pop-up, this does not decrease the file size. It only changes how big the image is displayed on screen.
So if you decide to upload an image in the rich text editor, please optimise your image first before uploading it. Keep to a maximum of 1000 pixels wide for desktop website use, and use around 600 pixels wide maximum for mailings. Also, try to compress the image before you upload it. A .jpg image will work best for photographic images, while .png formats work really well for graphic designs and other images with clean lines and artwork.
Since images uploaded in the rich text editor are only used as part of that bit of text, we will not mention the rich text editor any more in this article. Below we will dive deeper into the media gallery and how it is used in different contexts.
Where are media galleries used?
Media galleries are the main tool for adding one or multiple images, and you can find them in a lot of CMS modules. In this article, we will dive deeper into several CMS modules to explain in which ways images in the media galleries are used. These modules are:
- Productions
- Banners
- Story parts
- hero
- media gallery
- description with image
Now let’s look at each of these areas in detail.
If you are looking for other modules, you might find them in the section “Other media galleries, a quick overview” at the bottom of this article.
Media gallery use in productions
coming soon
Media gallery use in Banners
coming soon
Media gallery use in Story parts
coming soon
hero
coming soon
media gallery
coming soon
description with image
coming soon
Other media galleries, a quick overview
Some other CMS modules that also use a media gallery will be ignored in this article. In this overview we provide a quick note about images used in these modules, for the sake of completeness of this article:
- Products In websites with an integrated purchase path, products can be shown on a page and in the purchase path itself. The first image in the media gallery is used as a small thumbnail next to the product title. The image’s title, description, credits and link fields are not used.
- Themes The first image in the media gallery is used as the hero image on a theme page. It is also used as a thumbnail in the theme-group page. In both cases, the image is used as a background image and is considered decorative. Because the theme name is always shown, there is no need for alt-text. The image’s title, description, and link fields are therefore not used. The credits field can be used for image attribution and is shown on top of the hero image
- Visitor tags Visitor tags can be displayed in the “My account” menu after logging in. The media gallery provides the option to upload a tiny icon next to the visitor tag name. As this icon is considered decorative and the name of the visitor tag is also shown, the image’s title, description, credits, and link fields are not used.
- Story types Story types can be displayed in story cards. The media gallery provides the option to upload a tiny icon next to the story type name. As this icon is considered decorative and the name of the story type is also shown, the image’s title, description, credits, and link fields are not used.
- Stories / pages The main page of any story has one media gallery, called “meta image”. The media gallery provides the option to upload an image that is used in story tiles in overviews on the website and in the open graph data for use by third parties. The use in tiles is considered decorative, and since each story tile always has a story title and short description, alt texts are not used here. Open graph meta images also don’t use these attributes. The image’s title, description, credits, and link fields are therefore not used.
- People The first image in the media gallery is used as the hero image on the biography page. It is also used as a thumbnail in production pages. In both cases, the image is used as a background image and is considered decorative. Because the person’s name is always shown, there is no need for alt-text. The image’s title, description, credits and link fields are therefore not used.
- Content library parts
- description with image This parts work exactly the same as the Story Part with the same name. See Story Part > description with image above.
- media gallery This parts work exactly the same as the Story Part with the same name. See Story Part > media gallery above.
General info about alt text use
- In general we use the title field of an image for the alt attribute where technically possible (ie. the image is not metadata, and not a css background), unless that image title is itself visible and displayed in full (this would cause duplication).
- Note that in cases where an image element is implemented as a decorative background element that scales to cover an area, and/or has text placed on top of it, the alt text is probably hidden from screenreaders etc. This makes the alt attribute maybe potentially relevant for search engines, but very little else.
- We never use the title of a production or page/story as the alt text for an image because that would just result in duplication. In these cases images are always shown in combination with the production or page/story title, and therefore don’t require an alt text.