With the integration to Typo3, you can publish your images and videos from Mediaflow directly on your website or intranet. A fantastic way for editors to always have access to files that are GDPR-compliant, have the correct alt texts, and videos that are accessibility adapted. Those who are Typo3 users do not need to download files to their computer first and thus do not need to have a login in Mediaflow. (But of course, they can have a login to Mediaflow based on other needs.)
Getting started with the integration
You can start using the integration as soon as it has been installed in Typo3. For the files to be selected and used optimally, you need to have prepared the settings for them in Mediaflow first.
Publish images and videos in Typo3
Once you have installed the plugin, you can access the Mediaflow library in editor mode in Typo3. All files you insert are saved in the directory mediaflow under the menu option File list.
You insert files in two ways - either via Mediaflow in the administration menu or when you insert content on a content page.
Insert files directly into Typo3's media library
An easy way to add images to TYPO3's media library is to insert them via the menu option Mediaflow.
Click on Mediaflow in the administration menu on the left.
Then click Open File Selector to open Mediaflow's media selector, which shows the folders you have chosen to share with the Typo3 integration.
Select an image you want to add to TYPO3's media library.
Click Use this file.
Write an Alt text for the image or use Mediaflow's AI service that writes the alt-text based on the image's subject, and fill in a Description for the image if there isn't one. If alt-text and description have been added in Mediaflow, they are included automatically and are shown in the File Selector during this process.
Click Use this image.
You will receive the following message and the image has been added to the media library in Typo3.
To see the image in the library, click Filelist and then on the folder named mediaflow.
Typo3 and download presets
Since Typo3 supports its own formats for each image inserted in content, it is not possible to use the download presets that Mediaflow has built-in. Instead, the original image is transferred, and it is possible to adjust the image's height and width for different device sizes.
An image available in Typo3's media library can be inserted in multiple places without affecting each other.
Insert images on a page
When you have created a page in Typo3, you have different regions where you can add content.
Select one of the regions and click Create new content.
Choose to search for one of the different elements or select from the list.
Under the tab Images, you can either choose to add an image that you have previously downloaded from Mediaflow and placed in the media directory. To do this, click Add image. This will show the file folders available in Typo3, and files from Mediaflow are available in the folder named mediaflow.
It is also possible to select a completely new image from Mediaflow, which, when you have chosen to insert it in Typo3, is saved in the "mediaflow" folder in Typo3's media directory. To do this, click From Mediaflow.
NOTE!
If you choose to insert a completely new image from Mediaflow, you must save the page first by clicking Save at the top of the webpage.
Once the page has been saved, you can open Mediaflow and our file selector will appear.
Find the image you want to insert by either locating it among the folders you have made available for the Typo3 integration or use the search field.
When the current file has been found, click on the file and then on Use this file to proceed to the next step.
Fill in an Alt-text, or ask Mediaflow's AI to do it for you, and write a Description. If such information is filled in Mediaflow, it will automatically appear in the respective boxes. You will have the opportunity to change the information if needed.
Click Use this file to insert the image in Typo3.
The image is now downloaded, saved in Typo3's media library, and added as a component in the region you selected.
If you want to change the cropping area for the images depending on which device the visitor uses to access the website, it can be done by clicking Open editor under Image manipulation.
The cropping you choose for the different image templates (which can have different names depending on how Typo3 is configured) is displayed depending on the device a visitor uses, such as a mobile phone, tablet, laptop, and so on.
If you want users to be able to click and open a larger version of the image, often called lightbox functionality, you can enable it for the image under Behavior and the option Enlarge on Click.
There are more settings for how images are handled and categorised under the different tabs, but it is up to administrators how thorough you want to be with this type of information.
Insert video on a page
When you have created a page in Typo3, you have different regions where you can add content.
Select one of the regions and click Create new content.
Choose to search for Mediaflow Video or click on Special elements in the list.
Click on the Mediaflow tab to be able to search for the video you want to insert on the page.
Click Select Mediaflow Video. This opens Mediaflow's file selector.
Find the video you want to insert by either locating it among the folders you have made available for the Typo3 integration or use the search field.
When the file has been found, click the button labelled Use this file to proceed to the next step.
At this step, you can choose whether the video should be embedded with JavaScript or via an iframe. We recommend JavaScript. You can also choose a theme (if included in your subscription), as well as whether the video should start at a specific time and if the video should autoplay as soon as the page has loaded.
Insert the video by clicking the button Use this file.
In Typo3, you can now see the code the video uses to be embedded as well as some metadata. Depending on how administrators have configured your Typo3 installation, there may be more or fewer fields visible to your user in the system.
Finish by clicking Save at the top of the page. The video is now inserted on the page in Typo3.