Media
Images, videos and other media can be uploaded inside the Umbraco Media section to be used to display content on the page using the Page Components.
Media section inside Umbraco Backoffice
There are a range of formats, sizes and types of media you can upload to the Umbraco. However, there are some size and format limits in place to keep the website running fast and smoothly. The media should be:
- 500kb or less in size.
- 3840x2160px maximum resolution.
- In any of the following formats to be used on the Page Components:
- JPG/JPEG
- PNG
- WebP
- SVG
- GIF
It is recommended to upload the images in PNG or JPG/JPEG format, unless you're uploading SVGs or animated media, because the images are automatically compressed and converted to WebP for use on the pages after it is uploaded to the Umbraco for faster website performance. It is not recommended to convert the PNG or JPG/JPEG images to WebP yourself since this would lose more quality after it is uploaded to the Umbraco.
To reach the maximum resolution and media size it is recommended to use media resizer and compressor. A couple of the easiest tools to do this can be found below:
- Media resizer - ReduceImages (this will take you to an external site).
- Media compressor - TinyPNG (this will take you to an external site).
Media Folder Structure
To keep Umbraco Backoffice media tidy and easy to find, a media folder structure is in place. Opening the Media tab displays one main folder - Marketing. Opening this, will display additional four folders:
- Welcome Page - images and media for the welcome page such as welcome background images, offer banners, section images.
- Header - logos for the header such as tombola logo or navigation menu logos.
- Page Content - the main folder for the website content.
- Footer - logos and icons for the header such as safe gambling logos or payment logos.
Please, stick to the folder structure that is created. If you think that a folder is missing for your type of content, feel free to expand the folder tree by adding an appropriate folder and let Onboarding team know about the changes.
Page Content
The main folder for the website content. It is split into a range of folders to accompany different types of content needed to create pages.
Media folder structure inside Umbraco Backoffice
It is important to place the media and images into their appropriate folders, this will not only help find the content faster but also future proof the Umbraco from being messy and hard to work with. Media folders explained:
- Digital Marketing - folder for content from Digital Marketing Team to create landing pages.
- Community - content for community pages such as Community Hub or Meet the Chat Moderators.
- Contact Us - contact us page and component content.
- About Us - about us page content.
- Social Media - folder for any social media content. This can be social media icons, logos, social media event banners or offers.
- Promotions - game and website promotional content, such as bingo/arcade game promotions or Playmates. Game Promotions folder is split into years and months to keep the game promotions image content easy to find and maintain, such as deleting the old promotions.
- Seasonal - content for any national celebration such as Christmas, New Year or Halloween.
- IAC - I am a Celebrity promotional content. This is split into years and a range of smaller folders such as Promotions, Bugs and Competitions.
- Games - any content that has any tombola game displayed. This can be a game tile, promotional game banner or offer banner with a specific game.
- Awards - award logos, banners and icons.
- Safeplay - tombola Safeplay content such as tombola Safeplay logo or Safeplay tools logos.
- Mobile App - content for tombola app promotional banners or app UI screenshots.
- Winners - profile pictures for winners page.
- Articles - content for articles pages. It is recommended to create a folder inside Articles folder with the article page name and place the media content inside of it.
- Guides - content for guides pages. It is recommended to create a folder inside Guides folder with the guide page name and place media content inside of it.
- Talks - content for talks pages. It is recommended to create a folder inside Talks folder with the talks page name and place media content inside of it.
- Icons - any graphic icon. Icons are grouped into different type of folders inside the Icons folder, thus, please, place the new icons into an appropriate folder.
- Shapes - tombola shapes and backgrounds with shapes.
- Banners - promotional and graphical banners.
- Offer Banners - tombola offer banners.
- Background Pictures - graphical background pictures to be used with Section Layouts with Background Image.
- tombola Logos - tombola and tombola arcade logos.
Component Media Sizes
The tables below show the aspect ratio and the optimal size of the images for every component.
Layout with Background Image
The image size and aspect ratio depends on the Section Layout Height setting selected. It's recommended to use the highest resolution and quality image possible.
Media Blocks
Images inside the Media Blocks size changes based on the settings applied to the block or the screen size of the device. It is recommended to use images in Universal Size so that the images will be displayed not pixelated on any size screen.
Card Elements
Images on the Card Elements have size and aspect ratio predefined. It is best to use media that match the aspect ratio and size as instructed below. However, to not have many media files with different sizes it is best to use images in Universal Size.
Previous section:
Routing
Next section: