This week in Orchard - 05/10/2019
In our post, we would like to give you a walkthrough about how to use the localization files in Orchard Core. With the localization files, we will see the brand new RTL support and close our post with the new attached media field!
On Orchard Core
Demos
Use localization files
To get localization files you can go to the documentation of Orchard Core, where you will find the link called localized.
This will navigate you to the Crowdin page of Orchard Core. At the upper right corner of the page, you will find a button to download translations. Download this ZIP file and extract the Localization folder to your App_Data folder. You can see that we have one folder for each language. These will come NuGet packages at some point.
If you have a running site you have to restart it, because these files will be found and loaded only on startup. The next thing to do is to enable the Localization module, that provides support for UI localization.
After that you should head to Configuration -> Settings -> General and add the supported cultures for the site. Here we added to cultures (Arabic and French) to the list of the supported cultures.
If we set the default culture to French and hit Save, you will see the localized Settings page.
RTL support
Now because in the previous demo we added Arabic to the list of the supported cultures we can see the RTL support. Set Arabic as the default culture and hit Save. Now everything is translated in Arabic and everything is on the right. It automatically picks up the RTL logic from the current culture and all the CSS have custom properties to render differently based or not on RTL flags.
In the following screen, you can see the Assets page using the Arabic culture.
The Assets.json file has a new property called generateRTL. If you set the value of this property to true, this will process the CSS files to generate a new rule specifically for RTL by inverting all the margins and the paddings and the positions, because it's integrated with the Gulp pipeline.
You can see a good example for the RTL support in the media.css file of the OrchardCore.Media module.
Attached media field
Let's see how to use the new attached media field in Orchard Core! If you set up your site using the Blog recipe, you can add a new field to the existing Article content type. Go to the content definition of the Article content type and add a new Media Field to it. Let's call it Images. Now if you edit the Images Media Field, there should be an option to say I would like to use the attached type of the editor.
In the following GIF, you can see how to change the editor type of the media field and add images with the different editor types. The main difference is now instead of browsing an image from the Assets, you can upload your new image from your computer. So in the case of an attached media field, you can't pick a file using the media picker. These pictures are not available in the media manager, they are only stored for this content item and only accessible from this content item. They are stored in the same folder as all the media, but they are not manageable. The content item is the aggregate root of these images.
If you navigate to Content -> Assets we don't see the files, just if you have the right permissions for that.
On Lombiq
Orchard Dojo Newsletter
Now we have 59 subscribers of the Lombiq's Orchard Dojo Newsletter! We have started this newsletter to inform the community around Orchard with the latest news about the platform. By subscribing to this newsletter, you will get an e-mail every time when a new post published to Orchard Dojo, including This week in Orchard of course.
Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here!