# Assets
# Images
# Library
The image library is located in the Assets section of the left-hand menu, where you can manage all assets. Here, you can edit asset details, change their location, download or copy the asset's link, and delete them. You can also crop files and images.
💡 Images must be in JPG format, saved for the web, with a maximum file size of 2 MB. The maximum dimensions, depending on the ratio, are 3000 px for height or width.
# Image Management
- To upload an image to the library, drag and drop the new image into the library interface, or click the red Upload files button in the top right corner.
- To modify an image already uploaded in the library, click on the image name to open a dedicated page. On this page, you can change the image title, add a mobile version, and insert a caption. At the top right, the image itself will be visible, with options to download or replace it with another image.
NOTE: The caption will be visible if activated in the media section of Pagebuilder.
It is not mandatory to upload images from the library; you can also upload images directly from the page or post you are working on. To do this:
- Click the + Immagine button to select an image already uploaded, or click the Upload file button to add a new image.
- By clicking + Immagine, a pop-up window will appear, allowing you to either select an image already uploaded or upload a new one by dragging it (drag and drop) or clicking the Upload file button at the bottom left.
- You can also modify the images directly on the page by double-clicking the image icon. This will open a sidebar on the right. A new page will open where you can make all the necessary modifications to the image.
# Video
Video management in Craft CMS is highly versatile, thanks to the ability to use dedicated platforms and integrate with external services like Vimeo and Cloudflare. This approach ensures high-quality videos without compromising server performance and offers extensive options for customization, security, and video content management. During the project phase, we will determine which service to use based on specific requirements.
# Vimeo
Vimeo is a video-sharing platform that offers users tools and technologies for creating and uploading videos.
In any case, at the top left there is a search bar that allows you to search for folders or videos quickly and easily. From the left-hand menu, click on Library. Here, you can create folders to organize your uploaded videos. It is recommended to create specific folders to avoid scattering videos. If needed, the search bar in the top-left corner allows you to quickly find folders or videos.
- Upload the video by dragging it directly into the Vimeo window, or by clicking the New Video button in the top right corner. A panel will open where you can select the video by clicking the Choose files button or dragging it directly into the box.
- Click the button with the lock icon and the word Privacy to modify the video’s privacy settings. A panel will open where you can choose the video’s visibility, for example, hiding it from the public or restricting access with a password.
- Click the icon with three dots in the top right corner, select Video File Links, and a panel will open with all available links. The one to copy is the HLS link.
- Click Copy Link to copy it.
# Cloudflare
Cloudflare is a platform that improves website performance. We use it to upload and optimize videos, ensuring fast and secure access.
- From the left sidebar menu, click on Stream, and a page will open where you can upload new videos or view those already uploaded.
- Upload a new video by dragging it into the appropriate box, or click click to browse to select a file.
- Click on the video to open its dedicated page. Wait for the video to be ready, as indicated by the icon on the right. If the icon is blue and shows Queued or Processing, wait for the video to finish uploading. When the icon turns green with the Ready label, you can open the video page and copy the HLS link.
- On the right, you’ll find the HLS Manifest URL title. Click the icon with the two squares to copy the HLS link.
# Inserting Videos into the CMS
On Craft, the process and the fields to fill out are identical for both Vimeo and Cloudflare. In the Source field, paste the HLS link. On the right, you'll find the Ratio field, which allows you to adjust the video's aspect ratio, usually set to 16:9, but modifiable if needed.
In addition to inserting the video link in the designated field, you can define various options for the same video.
- The Mobile Source field allows you to upload a different video for mobile devices, avoiding format or resolution issues.
- The Caption field is used only if the video caption is included in the site design.
- The Poster field is essential for setting the video's cover image, which will appear in case of a slow connection or during loading. To set the cover image:
- Click the + Poster button to select an image from those already uploaded.
- Click the Upload to File to choose one from your computer. The cover image can simply be the first frame of the video.
- You can choose whether to enable or disable the audio of the video.
- You can configure whether the video should start automatically or manually.