---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio"
locale: en
meta:
"og:title": "Academy Article"
---
[Go to home](https://academy.laioutr.com/en)
- [Studio](https://academy.laioutr.com/en/bereiche/studio)
- [Content and media](https://academy.laioutr.com/en/leitfaeden/content-and-media)
- [Manage media in Cockpit and Studio](https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio)
# Manage media in Cockpit and Studio
Images, videos and audio files are managed centrally in the Media Library under Content in Cockpit. In Studio, the media picker selects files from every connected library, such as the shop system, and uploads new ones where the library allows it.
## Before you start
- Plan
- All plans
- Role
- Edit access to Studio and permission to edit content
- Duration
- 5 min
### Prerequisites
- Optional: an app with its own media library, for example Shopify or Shopware
Last reviewed on October 15, 2026
Media are needed in sections and blocks: in the hero banner, in product tiles, in content blocks. Laioutr manages them in two places. In Cockpit, the project's **Media Library** sits under **Content**. Files are uploaded centrally there, sorted into folders, renamed, moved and deleted.
In Studio, every media field opens the **media picker**. It combines several libraries: the project's own Media Library and the libraries of installed apps, such as Shopify Files or Shopware Media. Depending on the library, there is search, sorting, folders and upload. Files still being processed show a loading indicator; failed files are marked and cannot be selected. For images and videos a focal point can be set so that the important part stays visible on every device.
A uniform media object is stored, regardless of the source. External applications get access to a project's media through a dedicated, revocable API key.
## Step by step
1. 1 ### Step 1: Open the Media Library
Open **Content** › **Media Library** in the project sidebar.
2. 2 ### Step 2: Upload and organise files
Upload files and place them in folders. Renaming, moving and deleting also happen here.
3. 3 ### Step 3: Open the media picker in Studio
In Studio, select a section or block with a media field and open the media field in the properties panel.
4. 4 ### Step 4: Choose library and file
Choose the library at the top of the picker, find the file through search, sorting or folders and select it. Where the library allows it, upload new files directly.
5. 5 ### Step 5: Set the focal point
For images and videos, set the focal point on the most important part of the frame.
6. 6 ### Step 6: Check on devices
Switch between desktop, tablet and phone in the preview and check the crop.
## Check the result
The media item appears in the preview in every device mode with the intended crop. Files uploaded through Cockpit appear in the chosen folder of the Media Library.
## Frequently asked questions
Why is upload missing in a library?
Each library declares what it supports. Some sources are read-only; the file is then uploaded in the source system or in the Media Library.
Why can a file not be selected?
The file is still being processed, for example a video being transcoded, or processing failed. Failed files are marked and locked.
Where do the shop images come from?
Apps such as Shopify or Shopware bring their own media library. It appears in the media picker next to the project's Media Library.
Can an external application use the media?
Yes. A dedicated, revocable API key gives an external application access to the media of exactly one project.
## Related
- [Deliver images through the Laioutr CDN](https://academy.laioutr.com/en/artikel/deliver-images-through-the-laioutr-cdn)4 min
The Laioutr CDN stores a project's images in a dedicated store and delivers them from the project's own hostname. Size and format are adapted at the edge on request, and delivered images stay cached for a long time.
- [Add and arrange sections and blocks](https://academy.laioutr.com/en/artikel/add-and-arrange-sections-and-blocks)7 min
Sections are the large areas of a page in header, body or footer, and blocks are content units inside a section's slots. Both are added and arranged in the layers tree and edited in the properties panel.
- [Create and manage API keys](https://academy.laioutr.com/en/artikel/create-and-manage-api-keys)6 min
API keys are created in the organisation settings under API keys. An organisation key authenticates the CLI and CI/CD, a restricted key gives an external application access to one project's media only.
- [Connect Shopify](https://academy.laioutr.com/en/apps/connect-shopify)10 min
The Shopify app connects a Shopify store to Laioutr through the Storefront API, Customer Account API and Admin API. Products, collections, cart, menus, content and customer login come straight from Shopify.
## Learn it in a lesson
- [Manage and deliver media](https://academy.laioutr.com/en/lektionen/frontend-manager-manage-media)8 min
- [Add images and videos](https://academy.laioutr.com/en/lektionen/go-live-add-images-and-videos)6 min
## [Content and media](https://academy.laioutr.com/en/leitfaeden/content-and-media)
Search this guide
1. [Manage content in Content Collections](https://academy.laioutr.com/en/artikel/manage-content-in-content-collections)6 min
2. [Check drafts in the preview before publishing](https://academy.laioutr.com/en/artikel/check-drafts-in-the-preview)5 min
3. [Manage media in Cockpit and Studio](https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio)5 min
4. [Maintain markets and translations in Studio](https://academy.laioutr.com/en/artikel/maintain-markets-and-translations-in-studio)6 min
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "en",
"name": "Default",
"url": "https://academy.laioutr.com/",
"translationOfWork": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio#/schema/question/3"
},
{
"@id": "https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio#/schema/question/4"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio"
]
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/en",
"position": 1
},
{
"@type": "ListItem",
"name": "Studio",
"item": "https://academy.laioutr.com/en/bereiche/studio",
"position": 2
},
{
"@type": "ListItem",
"name": "Content and media",
"item": "https://academy.laioutr.com/en/leitfaeden/content-and-media",
"position": 3
},
{
"@type": "ListItem",
"name": "Manage media in Cockpit and Studio",
"item": "https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio#/schema/question/1",
"@type": "Question",
"inLanguage": "en",
"name": "Why is upload missing in a library?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Each library declares what it supports. Some sources are read-only; the file is then uploaded in the source system or in the Media Library.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio#/schema/question/2",
"@type": "Question",
"inLanguage": "en",
"name": "Why can a file not be selected?",
"acceptedAnswer": {
"@type": "Answer",
"text": "The file is still being processed, for example a video being transcoded, or processing failed. Failed files are marked and locked.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio#/schema/question/3",
"@type": "Question",
"inLanguage": "en",
"name": "Where do the shop images come from?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Apps such as Shopify or Shopware bring their own media library. It appears in the media picker next to the project's Media Library.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio#/schema/question/4",
"@type": "Question",
"inLanguage": "en",
"name": "Can an external application use the media?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. A dedicated, revocable API key gives an external application access to the media of exactly one project.
"
}
}
]
}
```