Proximus Media GuidesContent visual
Image, gif or video independant from any content or used in other components.
Overview
The content visual is an independant component, separated from any content or sometimes used in other components. It can be placed anywhere on a page. It can be an image, a gif or a video.
Types of media
The content visual is versatile and can support multiple medias:
Image
Most common media to use with the content visual.
Animated gif
Uses the same size as the image. Ideal for short animations. It should stop after 5 seconds and have a maximum of 3 repetitions for it to be accessible. For longer contents, it's best to use the video format.
Gifs are heavy format and should only be used if necessary. If it can be hidden in mobile then you probably don't need it in desktop either and it might be best to use an image.
Video
Video is for longer type of content. It's uploaded on an external website (vimeo, youtube).
Examples
The content visual can be used independantly but also along with different components. Here are some use examples:
Used independantly
As said before, the content visual is used in many different ways. You can place it anywhere and it's not dependant from any components. For example it could be placed next to a media box. In mobile, the content visual comes on top or below any content.
With a timeline
You can place your visual in a gridding of your choice next to the timeline. The visual can change with the different timeline steps.
In a tab
Visuals can change in each tabs.
In a content header/content media
Can be used inside other Magnolia components such as content header or content media.
Gridding
The composition options are based on our default grid. Please refer to the gridding article for more information.
The content visual is set to the grids. You can place your content visual in whatever gridding you'd like. Except in mobile, prefer to use the full grid or else it will be too narrow for other contents.
How to
Please use the template and respect the following guidances:
- Template is set to the ideal size when used within a component. Please adapt the template only if needed according to your needs.
- Since the visual is separated from any content, there are no margins or definite safe area.
- One visual for all breakpoints (mobile, tablet, desktop)
- Test your visual and adapt if needed
- Make sure your visual is not too heavy and compress if needed.
You're part of Proximus organization? Go to the template - If not, request it
Technical specifications
Sizes are for reference and guidance, note that they may change with the content or gridding. But in most cases refer to the following specifications when you export your visual:
Content visual
| Breakpoints | Size | Max weight | Format |
|---|---|---|---|
| Mobile, tablet & desktop (-m) | 640*300px (Defined size when used in components but can be adapted for specific usage) | 80KB | .jpg |
| Mobile, tablet & desktop (-m) | 640*300px (Defined size when used in components but can be adapted for specific usage) | 300KB | .gif |
To ensure good UI quality and website performances, it's very important to respect the maximum weight indicated while keeping a correct image quality. Discover here our images compression recommendations.
Naming convention
When exporting your visuals, make sure you use the correct naming. Do not use caps, spaces, accents or symbols (except a dash - ) Please respect the following naming convention:
- Name Description of the visual, campaign or page
- Date yymm = year month (2108 = August 2021)
- Content
- Language (optional) English by default (-en), French (-fr), Dutch (-nl). If it exists in only one language, it isn't mandatory to specify.
Images testing
Testing your image(s) is an important step of the images creation. It allows you to test the behavior in all breakpoint and to ensure the quality of the end results.
Discover here our images testing recommendations